/**
* Motif v3.7.0
* A responsive front-end framework to tell *your* story
* http://getmotif.com
*/
/**
* Global Stylesheet
* The site's main (and perhaps only) stylesheet. All supporting stylesheet
* files are imported into and compiled from here.
*/
/*
QA Refresh 2020
---
Primary
*/
@font-face {
font-family: "Proxima Nova Light";
src: url("/resources/fonts/proxima-nova/proxima-nova-light.eot");
src: url("/resources/fonts/proxima-nova/proxima-nova-light.eot?#iefix") format('embedded-opentype'), url("/resources/fonts/proxima-nova/proxima-nova-light.woff") format('woff'), url("/resources/fonts/proxima-nova/proxima-nova-light.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Proxima Nova Regular";
src: url("/resources/fonts/proxima-nova/proxima-nova-regular.eot");
src: url("/resources/fonts/proxima-nova/proxima-nova-regular.eot?#iefix") format('embedded-opentype'), url("/resources/fonts/proxima-nova/proxima-nova-regular.woff") format('woff'), url("/resources/fonts/proxima-nova/proxima-nova-regular.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Proxima Nova Semibold";
src: url("/resources/fonts/proxima-nova/proxima-nova-semibold.eot");
src: url("/resources/fonts/proxima-nova/proxima-nova-semibold.eot?#iefix") format('embedded-opentype'), url("/resources/fonts/proxima-nova/proxima-nova-semibold.woff") format('woff'), url("/resources/fonts/proxima-nova/proxima-nova-semibold.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Proxima Nova Bold";
src: url("/resources/fonts/proxima-nova/proxima-nova-bold.eot");
src: url("/resources/fonts/proxima-nova/proxima-nova-bold.eot?#iefix") format('embedded-opentype'), url("/resources/fonts/proxima-nova/proxima-nova-bold.woff") format('woff'), url("/resources/fonts/proxima-nova/proxima-nova-bold.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Proxima Nova Black";
src: url("/resources/fonts/proxima-nova/proxima-nova-black.eot");
src: url("/resources/fonts/proxima-nova/proxima-nova-black.eot?#iefix") format('embedded-opentype'), url("/resources/fonts/proxima-nova/proxima-nova-black.woff") format('woff'), url("/resources/fonts/proxima-nova/proxima-nova-black.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Proxima Nova Extrabold";
src: url("/resources/fonts/proxima-nova/proxima-nova-extrabold.eot");
src: url("/resources/fonts/proxima-nova/proxima-nova-extrabold.eot?#iefix") format('embedded-opentype'), url("/resources/fonts/proxima-nova/proxima-nova-extrabold.woff") format('woff'), url("/resources/fonts/proxima-nova/proxima-nova-extrabold.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
/****************/
/* 2017 refresh */
/****************/
.text-color-regular {
color: #29333A;
}
.text-color-headings {
color: #274B64;
}
.text-transform-uppercase {
text-transform: uppercase;
}
.beige-01 {
color: #EDEAE3;
}
.beige-02 {
color: #f5f2ec;
}
.blue-01 {
color: #29333A;
}
.blue-02 {
color: #274a63;
}
.blue-03 {
color: #156783;
}
.blue-04 {
color: #274B64;
}
.blue-05 {
color: #74B0BD;
}
.green-01 {
color: #217053;
}
.green-02 {
color: #9DB351;
}
.green-03 {
color: #879b42;
}
.green-04 {
color: #7D942E;
}
.orange-01 {
color: #E49546;
}
.purple-01 {
color: #6F2648;
}
.purple-02 {
color: #963D68;
}
.red-01 {
color: #B44252;
}
.red-02 {
color: #9B3544;
}
.offwhite-01 {
color: #e4e4e1;
}
.bg--beige-01 {
background-color: #EDEAE3;
}
.bg--beige-01:hover {
background-color: #ffffff;
}
.bg--beige-02 {
background-color: #f5f2ec;
}
.bg--beige-02:hover {
background-color: #ffffff;
}
.bg--blue-01 {
background-color: #29333A;
}
.bg--blue-01:hover {
background-color: #3e4d58;
}
.bg--blue-02 {
background-color: #274B64;
}
.bg--blue-02:hover {
background-color: #1D3B4F;
}
.bg--blue-03 {
background-color: #156783;
}
.bg--blue-03:hover {
background-color: #1c8aaf;
}
.bg--blue-04 {
background-color: #274B64;
}
.bg--blue-04:hover {
background-color: #356789;
}
.bg--blue-05 {
background-color: #74B0BD;
}
.bg--blue-05:hover {
background-color: #5894A1;
}
.bg--green-01 {
background-color: #217053;
}
.bg--green-01:hover {
background-color: #1B5D45;
}
.bg--green-02 {
background-color: #9DB351;
}
.bg--green-02:hover {
background-color: #7D942E;
}
.bg--green-03 {
background-color: #879b42;
}
.bg--green-03:hover {
background-color: #a2b858;
}
.bg--green-04 {
background-color: #7D942E;
}
.bg--green-04:hover {
background-color: #9ebb3a;
}
.bg--orange-01 {
background-color: #E49546;
}
.bg--orange-01:hover {
background-color: #B6712C;
}
.bg--purple-01 {
background-color: #6F2648;
}
.bg--purple-01:hover {
background-color: #953361;
}
.bg--purple-02 {
background-color: #963D68;
}
.bg--purple-02:hover {
background-color: #6F2648;
}
.bg--red-01 {
background-color: #B44252;
}
.bg--red-01:hover {
background-color: #9B3544;
}
.bg--red-02 {
background-color: #9B3544;
}
.bg--red-02:hover {
background-color: #bf4456;
}
.bg--offwhite-01 {
background-color: #e4e4e1;
}
.bg--offwhite-01:hover {
background-color: #fcfcfc;
}
/**
* Normalize
* Using the Normalize.css (http://necolas.github.io/normalize.css/) with only minor modification.
*/
/*
HTML5 Display Definitions
Set the appropriate `display` definitions for new HTML5 elements.
The majority will be displayed `block`.
*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/*
Some, however, need to be `inline-block` with an IE7 fallback.
*/
audio,
canvas,
video {
display: inline-block;
}
.lte7 audio,
.lte7 canvas,
.lte7 video {
display: inline;
zoom: 1;
}
/*
Audio
From Normalize.css:
> Prevents modern browsers from displaying `audio` without controls.
> Remove excess height in iOS5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
/*
Type
*/
/*
HTML Font Size Adjust
1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
`em` units.
2. Prevents iOS text size adjust after orientation change, without disabling
user zoom.
*/
html {
font-size: 100%;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */
}
html,
button,
input,
select,
textarea {
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
abbr[title] {
border: none;
}
i,
cite,
address {
font-style: normal;
}
dfn {
font-style: italic;
}
b {
font-weight: normal;
}
strong {
font-weight: bold;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote,
menu,
ul,
ol,
dl,
table,
figure {
/* Display & Box Model */
margin: 1.25rem 0 0 0;
/* Other */
font-size: 1rem;
}
menu,
ol,
ul {
padding-left: 2.5em;
}
li ul,
li ol {
margin-top: 0.625em;
margin-bottom: 0.625em;
}
dd {
margin-left: 2.5em;
}
blockquote {
padding: 1.25em 2.5em;
}
blockquote > :first-child {
margin-top: 0;
}
q {
quotes: none;
}
q:before,
q:after {
content: "";
content: none;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
small {
font-size: 1em;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
border: 0;
}
.lte7 img {
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
}
form {
margin: 0;
}
fieldset {
border: none;
margin: 0;
padding: 0;
}
legend {
width: 100%;
border: 0;
padding: 0;
display: block;
white-space: normal;
}
.lte7 legend {
margin-left: -7px;
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
display: block;
}
button .lte7,
input .lte7,
select .lte7,
textarea .lte7 {
vertical-align: middle;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
display: inline-block;
cursor: pointer;
}
button .lte7,
html input[type="button"] .lte7,
input[type="reset"] .lte7,
input[type="submit"] .lte7 {
overflow: visible;
display: inline;
zoom: 1;
}
button,
input {
line-height: normal;
}
button[disabled],
input[disabled] {
cursor: default;
}
button.js-submit-btn.is-disabled,
input.js-submit-btn.is-disabled,
button.js-submit-btn.is-disabled:hover,
input.js-submit-btn.is-disabled:hover {
cursor: default;
background: #cfcdcd;
color: #29333A;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input[type="checkbox"],
input[type="radio"] {
margin: 3px;
padding: 0;
box-sizing: border-box;
position: relative;
vertical-align: top;
}
input[type="checkbox"] .lte7,
input[type="radio"] .lte7 {
width: 13px;
height: 13px;
}
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-spacing: 0;
}
/*
Spacing Helpers
Spacing helpers are quick but powerful classes that add margin or padding to
any given element. These classes are `!important`, so they override all other
styles.
* `p`, `m` = padding, margin
* `a`, `t`, `r`, `b`, `l`, `h`, `v` = all, top, right, bottom, left, horizontal, vertical
* `s`, `m`, `l`, `n` = small (~`5px`), medium (~`10px`), large (~`20px`), none (`0`)
For example: `.pam` means "padding, all, medium".
**Note:** These are all based on the current element's font size and the
project's vertical rhythm (even on the sides, to provide uniform spacing).
As such, they require `_vars.less`.
*/
.ptn,
.pvn,
.pan {
padding-top: 0 !important;
}
.pts,
.pvs,
.pas {
padding-top: 0.3125rem !important;
}
.ptm,
.pvm,
.pam {
padding-top: 0.625rem !important;
}
.ptl,
.pvl,
.pal {
padding-top: 1.25rem !important;
}
.prn,
.phn,
.pan {
padding-right: 0 !important;
}
.prs,
.phs,
.pas {
padding-right: 0.3125rem !important;
}
.prm,
.phm,
.pam {
padding-right: 0.625rem !important;
}
.prl,
.phl,
.pal {
padding-right: 1.25rem !important;
}
.pbn,
.pvn,
.pan {
padding-bottom: 0 !important;
}
.pbs,
.pvs,
.pas {
padding-bottom: 0.3125rem !important;
}
.pbm,
.pvm,
.pam {
padding-bottom: 0.625rem !important;
}
.pbl,
.pvl,
.pal {
padding-bottom: 1.25rem !important;
}
.pln,
.phn,
.pan {
padding-left: 0 !important;
}
.pls,
.phs,
.pas {
padding-left: 0.3125rem !important;
}
.plm,
.phm,
.pam {
padding-left: 0.625rem !important;
}
.pll,
.phl,
.pal {
padding-left: 1.25rem !important;
}
.mtn,
.mvn,
.man {
margin-top: 0 !important;
}
.mts,
.mvs,
.mas {
margin-top: 0.3125rem !important;
}
.mtm,
.mvm,
.mam {
margin-top: 0.625rem !important;
}
.mtl,
.mvl,
.mal {
margin-top: 1.25rem !important;
}
.mrn,
.mhn,
.man {
margin-right: 0 !important;
}
.mrs,
.mhs,
.mas {
margin-right: 0.3125rem !important;
}
.mrm,
.mhm,
.mam {
margin-right: 0.625rem !important;
}
.mrl,
.mhl,
.mal {
margin-right: 1.25rem !important;
}
.mbn,
.mvn,
.man {
margin-bottom: 0 !important;
}
.mbs,
.mvs,
.mas {
margin-bottom: 0.3125rem !important;
}
.mbm,
.mvm,
.mam {
margin-bottom: 0.625rem !important;
}
.mbl,
.mvl,
.mal {
margin-bottom: 1.25rem !important;
}
.mbx,
.mvx,
.max {
margin-bottom: 2.5rem !important;
}
.mln,
.mhn,
.man {
margin-left: 0 !important;
}
.mls,
.mhs,
.mas {
margin-left: 0.3125rem !important;
}
.mlm,
.mhm,
.mam {
margin-left: 0.625rem !important;
}
.mll,
.mhl,
.mal {
margin-left: 1.25rem !important;
}
/*
Text Align
Simple classes to adjust your text alignment. They can be added to individual elements or on wrapping elements (an outer `div`, perhaps) to adjust the alignment of all the child elements.
*/
.align--left {
text-align: left;
}
.align--center {
text-align: center;
}
.align--right {
text-align: right;
}
.align--sub {
vertical-align: sub;
}
.align--middle {
vertical-align: middle;
}
.align--top {
vertical-align: top;
}
/*
Floats
Next, we have classes for floating elements.
*/
.float--left {
float: left;
}
.float--center {
margin-left: auto;
margin-right: auto;
}
.float--right {
float: right;
}
.float--none {
float: none;
}
.clear {
clear: both;
}
/*
"New Line"
Turns an `inline` or `inline-block` element into a `block` one.
*/
.new-line,
.media-object,
.media-object > *,
.media-object > :first-child img,
.media-object__figure img,
.media-object__desc,
.figure > a,
[class*="figure--"] > a,
.figure img,
[class*="figure--"] img,
[class|="ratio"]:before,
.input-label,
label,
input-hint,
.input-hint,
input-desc,
.input-desc {
display: block;
}
.group,
.breadcrumb,
.media-object--checkbox {
/* Mixins */
}
.group:before,
.group:after,
.media-object--checkbox:before,
.media-object--checkbox:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.group:after,
.media-object--checkbox:after {
clear: both;
}
/*
"Is Hidden"
Visually hides content in a way that leaves it accessible to screen readers.
Like more magic, makes the visible invisible.
*/
.is-hidden,
.js .reveal__target {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.is-hidden.focusable:active,
.is-hidden.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .is-hidden a,
body:hover .is-hidden input,
body:hover .is-hidden button {
display: none;
}
@media all and (max-width: 47.9375em) {
.is-hidden-small {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.is-hidden-small.focusable:active,
.is-hidden-small.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .is-hidden-small a,
body:hover .is-hidden-small input,
body:hover .is-hidden-small button {
display: none;
}
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
.is-hidden-medium {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.is-hidden-medium.focusable:active,
.is-hidden-medium.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .is-hidden-medium a,
body:hover .is-hidden-medium input,
body:hover .is-hidden-medium button {
display: none;
}
}
@media all and (min-width: 62em) {
.is-hidden-large {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.is-hidden-large.focusable:active,
.is-hidden-large.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .is-hidden-large a,
body:hover .is-hidden-large input,
body:hover .is-hidden-large button {
display: none;
}
}
/*
"Isn't Hidden"
Undoes `.is-hidden`.
*/
.isnt-hidden,
.js .reveal__target.is-revealed {
/* Mixins */
width: auto;
height: auto;
margin: 0;
position: relative;
clip: auto;
}
body:hover .isnt-hidden a,
body:hover .isnt-hidden input,
body:hover .isnt-hidden button {
display: inline-block;
}
.lte7 body:hover .isnt-hidden a,
.lte7 body:hover .isnt-hidden input,
.lte7 body:hover .isnt-hidden button {
display: inline;
zoom: 1;
}
/*
"Relative Container"
Exactly what it sounds like.
*/
.relative-container,
[class|="ratio"],
.js .expand__target,
.js .fade__target,
[class*="input-alert"],
.js .canvas__primary,
.js .canvas__secondary {
position: relative;
}
.text-center {
text-align: center;
}
.text-normal {
text-transform: none;
}
.text-black {
color: #29333A;
}
.d-block {
display: block;
}
.d-inline {
display: inline-block;
}
.border-none {
border: none !important;
}
/*
Horizontal List
The basic `.list--x` module simply removes bullets from lists and inlines the list
items, making the link `inline-block`. The idea is to give the skeleton of a
horizontal list/navigation without adding too much style (yet).
*/
[class*="list--x"] li {
display: inline;
}
[class*="list--x"] a {
display: inline-block;
}
/*
Horizontal List (Forceful)
Rather than making the list `inline-block`, it floats the list elements
(except on the smallest screen sizes, where it remains vertical). More precise
than the default Horizontal List.
*/
[class*="list--x--forceful"] li,
[class*="list--x--forceful"] a {
display: block;
}
@media all and (min-width: 30em) {
[class*="list--x--forceful"]:before,
[class*="list--x--forceful"]:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="list--x--forceful"]:after {
clear: both;
}
[class*="list--x--forceful"] li {
float: left;
}
}
.list__unstyled {
list-style: none;
}
/*
Link List
A basic extension of the Horizontal List, this adds some margin to the links in
the list for a more pleasant looking list of links.
**Note:** Because we are using the `[class*=""]` attribute selector, using the
`.link-list--x` class takes advantage of the `list--x` module we declared
earlier, as well as the Forceful variation (`.link-list--x--forceful`)
without having to declare *both* `.list--x` and `.link-list--x` in our HTML.
````link-list
````
*/
[class*="link-list--x"] a {
margin-right: 1.875rem;
}
[class*="link-list--x"] li:last-child a {
margin-right: 0;
}
/*
Pagination
An extension of the basic `.list--x` module that simply adds enough padding on
the links for pagination.
*/
.list--x--pgs a {
padding: 0 0.625em;
}
.list--x--pgs a,
.list--x--pgs a:hover,
.list--x--pgs a:focus {
color: inherit;
}
/*
Breadcrumb
Another extension of the `.list--x` module, adding a breadcrumb `label`
and floating it and the ordered list.
````breadcrumb
Breadcrumb Link
Breadcrumb Link
Breadcrumb Link
````
*/
.breadcrumb {
margin-top: 1.25em;
}
.breadcrumb__label {
margin: 0 0.5625rem 0 0;
float: left;
}
.breadcrumb__list--x {
margin: 0;
float: left;
}
.breadcrumb li {
margin-right: 0.5625rem;
}
/*
Button List
````button-list
````
*/
[class*="button-list--x"] {
margin-top: 0;
overflow: hidden;
}
[class*="button-list--x"] li,
[class*="button-list--x"] a {
display: block;
}
[class*="button-list--x"] li {
float: left;
}
.pagination {
color: #c5c4bc;
font-style: italic;
text-align: center;
font-size: 14px;
font-size: .875rem;
line-height: 1.0714285714285714;
}
.pagination li:before {
content: "/";
}
.pagination li.prev:before,
.pagination li.prev + li:before,
.pagination li.next:before,
.pagination li:first-child:before {
content: "";
}
.pagination a {
color: #74b0bd;
padding: 0 .14285714285714285em 0 .35714285714285715em;
}
.pagination a:hover,
.pagination a:focus,
.pagination a.is-current {
color: #177da4;
}
.pagination .prev a,
.pagination .next a {
width: 11px;
height: 21px;
text-indent: -9999em;
background: transparent url(/resources/images/pagination-nav.png) no-repeat;
vertical-align: middle;
display: inline-block;
}
.lte7 .pagination .prev a,
.lte7 .pagination .next a {
display: inline;
zoom: 1;
}
.pagination .prev a:hover,
.pagination .next a:hover,
.pagination .prev a:focus,
.pagination .next a:focus,
.pagination .prev a.is-current,
.pagination .next a.is-current {
opacity: .65;
filter: alpha(opacity=65);
}
.pagination .prev a {
background-position: left top;
}
.pagination .next a {
background-position: right top;
}
.pagination li.disabled a,
.pagination li.disabled a:hover,
.pagination li.disabled a:focus {
cursor: default;
}
/*
Media Object
The Media Object is an image (or media-type) to the left with (typically)
descriptive content to the right. The media object can be whatever size it
wants, the basic format will remain the same. (Text will **not** wrap.) This
has any number of applications, such as a checkbox next to a label with lots
of text.
See: [The Media Object Saves Hundreds of Lines of Code][1]
[1]: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
````media-object
````
*/
.media-object,
.media-object > *,
.media-object__desc {
overflow: hidden;
}
.media-object--checkbox {
/* Display & Box Model */
display: inline-block !important;
overflow: visible;
}
.media-object--checkbox > :first-child,
.media-object--checkbox .media-object__figure {
/* Display & Box Model */
margin-right: 0.28125rem;
}
ul .media-object {
margin-bottom: 15px;
display: flex;
align-items: top;
}
.basic-interior__body .media-object + p {
margin-top: 1.25rem;
}
@media all and (min-width: 30em) {
.media-object > .object,
.media-object__figure {
max-width: 40%;
min-width: 14px;
margin-top: 0;
margin-right: 1.125rem;
float: left;
}
.media-object > * > :first-child,
.media-object__desc > :first-child {
margin-top: 0;
}
}
@media all and (max-width: 29.9375em) {
.media-object > .object,
.media-object__figure {
max-width: 40%;
min-width: 14px;
margin-top: 0;
margin-right: 1.125rem;
float: left;
}
.media-object > * > :first-child,
.media-object__desc > :first-child {
margin-top: 0;
}
}
@media all and (min-width: 48em) {
.media-object > .object,
.media-object__figure {
max-width: 50%;
min-width: 14px;
}
}
/*
Figures
Great for integrating images into bodies of text, the `.figure` class is
modified by the `--left` and `--right` keywords depending on where you would
like it placed.
````plain-media
````
````captioned-media
This caption enhances the photo above. It should only be a brief sentence or two long.
````
*/
.figure,
[class*="figure--"] {
margin-top: 1.25em;
}
.figure img[width],
[class*="figure--"] img[width] {
margin-left: auto;
margin-right: auto;
}
.figure.floatLeft,
[class*="figure--"].floatLeft {
float: left;
margin-top: 0;
margin-right: 1.125rem;
margin-bottom: 0.3125rem;
}
.figure.floatRight,
[class*="figure--"].floatRight {
float: right;
margin-top: 0;
margin-left: 1.125rem;
margin-bottom: 0.3125rem;
}
.figure > img[style="float: left;"] {
margin-right: 1.125rem;
}
@media all and (min-width: 30em) {
[class*="figure--"] {
margin-top: 0;
max-width: 50%;
}
.figure--left,
.figure--right {
padding-bottom: 0.625rem;
}
.figure--left {
float: left;
padding-right: 2.25rem;
}
.figure--right {
float: right;
padding-left: 2.25rem;
}
}
.icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: text-bottom;
fill: currentColor;
}
.no-svg .icon {
display: none;
}
.icon-old {
display: inline-block;
vertical-align: middle;
font-size: .85em;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-rendering: optimizeLegibility;
white-space: nowrap;
-webkit-font-feature-settings: "liga", "dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-moz-font-feature-settings: "liga", "dlig";
-ms-font-feature-settings: "liga", "dlig";
-o-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";
font-family: "Symbolset";
}
/*
Ratios
Ratios are used primarily for objects that must scale in both width and height
proportionally, such as embedded videos.
See: (http://daverupert.com/2012/04/uncle-daves-ol-padded-box/)
The `.ratio` class (and its modifier) are placed on a wrapping element, with
its child contents wrapped by the `.ratio__content` class.
For embedded videos, use the `.ratio--video` class, and it will assume an
`iframe` is the direct child:
VIDEO
*/
[class|="ratio"]:before {
/* Pretty */
content: "";
}
.ratio--video:before {
/* Display & Box Model */
padding-top: 56.25%;
}
.ratio--1x1:before,
.ratio--square:before {
padding-top: 100%;
}
.ratio--2x1:before {
padding-top: 50%;
}
.ratio--1x2:before {
padding-top: 200%;
}
.ratio__content,
.ratio--video iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/*
Wrapper
This is the site-wide containing class. Put it around anything you want to be
contained in the "site width". By default, caps off at `1150px`.
*/
.wrapper {
width: 92%;
margin-left: auto;
margin-right: auto;
}
@media all and (min-width: 77.5em) {
.wrapper {
width: 80%;
max-width: 71.875rem;
}
}
.wrapper--spaced-top {
margin-top: 50px;
}
.wrapper--padded-top {
padding-top: 50px;
}
.wrapper--full-width {
width: 100%;
}
/*
Animated Revealing/Hiding Block Modules
When JavaScript is enabled, these blocks are used (most easily in conjunction
with Motif jQuery plugins) to reveal and hide blocks of content, sometimes
accompanied by CSS3 animations.
*/
.js {
/*
Reveal Target
`.reveal__target` is a simple class that is accessibly hidden by default.
Add the `.is-revealed` class to show it.
I am hidden.
I am no longer hidden.
*/
/*
Expand Target
`.expand__target` has a maximum height of `0` by default, and once it
receives the `.is-expanded` class, animates in height to its maximum value.
This is the cheap CSS way of expanding animation, as in collapsible
accordions. More precise timing most likely requires JS enhancement.
I am hidden from view.
I have expanded into view.
*/
/*
Fade Target
`.fade__target` is the same as `.expand__target` (in that it grows in
height), but it adds opacity fading to the mix.
I am hidden.
I have faded and expanded into view.
*/
}
.js .reveal__target.is-revealed {
/* Pretty */
overflow: visible;
}
.js .expand__target,
.js .fade__target {
max-height: 0;
overflow: hidden;
}
.js .expand__target.is-expanded,
.js .fade__target.is-faded {
max-height: 999px;
}
.js .expand__target.is-expanded,
.js .fade__target.is-faded,
.js .expand__target.was-expanded,
.js .fade__target.was-faded {
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}
.js .fade__target {
opacity: 0;
filter: alpha(opacity=0);
}
.js .fade__target.is-faded {
opacity: 1;
filter: alpha(opacity=100);
}
.no-transition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
/*
Main Nav Module
A minor enhancement to the Reveal or Expand Target modules if added to the
main navigation bar. This snippet, on Medium screens and larger, makes sure
the expandable Nav (on smaller screens) is no longer hidden, and that the
Menu Title (be it "Main Menu", the hamburger icon, etc.) is hidden from view.
*/
@media all and (min-width: 48em) {
.js .menu__list {
max-height: 999px;
}
.menu__title {
display: none;
}
}
/*
Tabs
The tabs module (and accompanying plugin) creates a very basic widget that
allows embedding and basic styling.
````tabs
First Tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Second Tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
````
*/
.js .tabs > nav + *,
.js .tabs__section {
position: relative;
overflow: hidden;
}
.js .tabs > nav + * > *,
.js .tab {
display: none;
}
.js .tabs > nav + * > *.is-current,
.js .tab.is-current {
display: block;
}
/*
Font Declarations
Using the `.web-font` and `.web-font-svg` mixins, declare webfonts using the
"bulletproof" `@font-face` syntax.
See: (http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax/)
*/
/*
Font Classes
Each font family and weight used in the site is given its own LEGO-block class
to enable quick use and modularity.
*/
/*
Heading Styles
In Motif, typography is broken into pieces that separate skin from structure.
In this case, that means the font sizing (structure) is separate from the
styling (skin) -- which includes font family, color, etc.
Heading styles are some of the type skins, and we start out with
`.primary-heading` (which is also the `h`-tag default) and
`.secondary-heading`. Add as necessary.
````primary-heading
Primary Heading
````
*/
h1,
.styles__heading-1 {
font-size: 42px;
font-size: 2.625rem;
line-height: 1.19047619;
letter-spacing: 0em;
margin-top: 0;
font-weight: normal;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
color: #29333A;
}
a > h1,
a > .styles__heading-1 {
color: #177DA4;
}
a > h1:hover,
a > .styles__heading-1:hover {
color: #115974;
}
h2,
.styles__heading-2 {
font-size: 32px;
font-size: 2rem;
line-height: 1.1875;
letter-spacing: -0.009375em;
margin-top: 0;
font-weight: normal;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
color: #29333A;
}
a > h2,
a > .styles__heading-2 {
color: #177DA4;
}
a > h2:hover,
a > .styles__heading-2:hover {
color: #115974;
}
h3,
.styles__heading-3 {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.20833333;
letter-spacing: 0em;
margin-top: 0;
font-weight: normal;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
color: #29333A;
}
a > h3,
a > .styles__heading-3 {
color: #177DA4;
}
a > h3:hover,
a > .styles__heading-3:hover {
color: #115974;
}
h4,
.styles__heading-4 {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3;
letter-spacing: 0em;
margin-top: 0;
font-weight: normal;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
color: #29333A;
}
a > h4,
a > .styles__heading-4 {
color: #177DA4;
}
a > h4:hover,
a > .styles__heading-4:hover {
color: #115974;
}
h5,
.styles__heading-5 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0em;
margin-top: 0;
font-weight: normal;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
color: #29333A;
}
a > h5,
a > .styles__heading-5 {
color: #177DA4;
}
a > h5:hover,
a > .styles__heading-5:hover {
color: #115974;
}
/*
Body Text
Another type style, but this mimicks the default body text of the site.
````body-text
This is a paragraph of text. Some of the text may be emphasised and some it might even be strongly emphasised . Occasionally quoted text may be found within a paragraph …and of course a link may appear at any point in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.
````
*/
/*
Unstyled List
A basic stripping of list styles.
*/
.list--unstyled,
[class*="list--x"] {
padding-left: 0;
list-style: none outside none;
}
/*
Blockquote
A basic blockquote.
````blockquote
At last we will reveal ourselves to the the Jedi. At last we will have
our revenge.
Darth Maul
````
*/
.blockquote {
padding-left: 1.125rem;
}
.blockquote blockquote {
padding: 0;
}
.blockquote__cite {
display: block;
}
.blockquote__cite:before {
content: "\2014";
}
.text--white {
color: #fff !important;
}
strong {
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
/*
Typographic Scale
The building blocks for the site's type sizes. Almost exclusively, an element's
font size is assigned with one of these classes. If a new size is needed, a new
class is created here so it can be used and reused elsewhere.
The list of type sizes can grow or shrink, but be vigilant in keeping the
number of sizes to a minimum. A nice rule of thumb is that no two sizes can one
pixel in difference (forcing you to choose one over the other, giving you one
class where you previously had two).
*/
.canon-text {
font-size: 64px;
font-size: 4rem;
line-height: 0.78125;
}
.paragon-text,
.wysiwyg h2,
.wysiwyg .paragon-text {
font-size: 42px;
font-size: 2.625rem;
line-height: 0.71428571;
}
.primer-text,
.wysiwyg h3,
.wysiwyg .primer-text {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.25;
line-height: 2.8125rem;
}
.tertia-text {
font-size: 32px;
font-size: 2rem;
line-height: 0.625;
}
.normal-text,
.wysiwyg h4,
.wysiwyg .normal-text {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
.normal-text--long {
line-height: 1.875;
}
.median-text {
font-size: 24px;
font-size: 1.5rem;
line-height: 0.83333333;
}
.petite-text,
.wysiwyg h5,
.wysiwyg .petite-text {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.42857143;
}
.minion-text,
.wysiwyg h6,
.wysiwyg .minion-text {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.66666667;
}
.nonpareil-text {
font-size: 10px;
font-size: 0.625rem;
line-height: 1;
}
/*
Link Styles
Very basic stuff. The primary link color can be altered in the `_config.less`
file. Hover, focus, and current states are accounted for.
*/
a {
font-size: 16px;
font-size: 1rem;
line-height: 1;
color: #177DA4;
text-decoration: none;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
a:hover,
a:focus {
color: #115974;
text-decoration: underline;
outline: none;
}
.law-enforcement-administration a:hover,
.law-enforcement-administration a:focus {
color: #1D3B4F;
}
.energy-law a:hover,
.energy-law a:focus {
color: #B6712C;
}
.international-and-comparative-law a:hover,
.international-and-comparative-law a:focus {
color: #1B5D45;
}
.transnational-arbitration a:hover,
.transnational-arbitration a:focus {
color: #5894A1;
}
.law-and-technology a:hover,
.law-and-technology a:focus {
color: #9B3544;
}
.criminal-justice a:hover,
.criminal-justice a:focus {
color: #7D942E;
}
.other-programs a:hover,
.other-programs a:focus {
color: #6F2648;
}
a.is-current {
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
color: #115974;
}
.law-enforcement-administration a.is-current {
color: #274B64;
}
.energy-law a.is-current {
color: #E49546;
}
.international-and-comparative-law a.is-current {
color: #217053;
}
.transnational-arbitration a.is-current {
color: #74B0BD;
}
.law-and-technology a.is-current {
color: #B44252;
}
.criminal-justice a.is-current {
color: #9DB351;
}
.other-programs a.is-current {
color: #963D68;
}
.link,
.list--x--pgs a[href],
.marquee-action {
font-size: 16px;
font-size: 1rem;
line-height: 1;
letter-spacing: 0.1em;
display: inline-block;
position: relative;
text-transform: uppercase;
border: 3px solid transparent;
}
.link:hover,
.list--x--pgs a[href]:hover,
.marquee-action:hover {
text-decoration: none;
}
.link:hover:after,
.list--x--pgs a[href]:hover:after,
.marquee-action:hover:after {
content: '';
height: 1px;
background: #115974;
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: translateY(1px);
}
.link:focus,
.list--x--pgs a[href]:focus,
.marquee-action:focus {
border-color: #177DA4;
}
.link:focus:hover:after,
.list--x--pgs a[href]:focus:hover:after,
.marquee-action:focus:hover:after {
display: none;
}
.link:active,
.list--x--pgs a[href]:active,
.marquee-action:active {
color: #29333A;
}
.link svg,
.list--x--pgs a[href] svg,
.marquee-action svg {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
margin-left: 5px;
}
.link--small {
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
letter-spacing: 0.05714286em;
}
.link--inline {
border: 3px solid transparent;
}
.link--inline:hover,
.link--inline:focus,
.link--inline.is-current {
color: #115974;
}
.link--inline:focus {
border-color: #177DA4;
}
.link--inline:active {
color: #29333A;
}
/*
Unlink
Basic class to remove some link styling.
@TODO: Put in `_presentational.less` file?
*/
.unlink {
text-decoration: none;
}
/*
Forms
*/
/*
Basic Form Elements
Inputs and textareas are set to `width: 100%` to adapt to the width of their
wrapper. (Great for grids.) Select boxes are set to the width of their content,
maxing out at `100%`.
Almost all the form elements in Motif are best used inside a `label`.
Text Field
*/
input,
textarea {
font-size: 16px;
font-size: 1rem;
line-height: 1;
width: 100%;
margin-top: 0.625rem;
border: 1px #8C9398 solid;
padding: 0.625rem;
background-color: #F5F2EC;
outline: 3px solid transparent;
outline-offset: 3px;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
border-color: #29333A;
}
input:focus,
textarea:focus {
outline-color: #177DA4;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus,
input:active,
textarea:active,
input.is-current,
textarea.is-current {
z-index: 1;
}
input[type="checkbox"],
input[type="radio"] {
width: auto;
transform: translateY(4px);
}
input[type="checkbox"]:hover,
input[type="radio"]:hover,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
border: none;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
outline: none;
}
.lte7 input[type="checkbox"],
.lte7 input[type="radio"] {
width: 13px;
}
input[type="checkbox"] + label,
input[type="radio"] + label,
input[type="checkbox"] + .desc,
input[type="radio"] + .desc {
padding-top: 0.1875rem;
padding-left: 1.125rem;
border-left: 1px solid #6F777C;
}
input[type="checkbox"] + .desc label,
input[type="radio"] + .desc label {
padding-top: 0;
}
input[type="submit"] {
outline-offset: 0px;
}
textarea {
height: 5rem;
}
legend + ul {
margin-top: 1.25rem !important;
}
.select {
position: relative;
margin-top: 0.625rem;
border: 1px #8C9398 solid;
background-color: #F5F2EC;
}
.select:hover {
border-color: #29333A;
}
.select select {
font-size: 16px;
font-size: 1rem;
line-height: 1;
width: 100%;
max-width: 100%;
margin: 0;
outline: 3px solid transparent;
outline-offset: 3px;
border: 0;
border-radius: 0;
padding: 0.625rem;
background-color: transparent;
color: #29333A;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
text-transform: capitalize;
-webkit-appearance: none;
-moz-appearance: none;
}
.select select.no-capitalize {
text-transform: none;
}
.select select:focus {
outline-color: #177DA4;
}
.select .select-icon {
position: absolute;
bottom: 0.3125rem;
right: 0.3125rem;
}
/*
Input Widths
While you are encouraged to use the responsive grid system in conjunction with
your form styles, sometimes it's useful to have form field widths that are
simply consistent across viewports. These are those.
Text Field
*/
.input--eighth {
width: 12.5%;
}
.input--quarter {
width: 25%;
}
.input--half {
width: 50%;
}
.input--xxxs {
max-width: 1.875rem;
}
.input--xxs {
max-width: 3.125rem;
}
.input--xs {
max-width: 6.25rem;
}
.input--s {
max-width: 10.9375rem;
}
.input--m {
max-width: 15.625rem;
}
.input--l {
max-width: 21.875rem;
}
/*
Form Modules
````attached-label-before
$
````
````attached-label-after
.com
````
````attached-label-before-and-after
www.
.com
````
````attached-label-submit
````
*/
.attached-label {
display: table;
overflow: hidden;
}
.attached-label > * {
margin-top: 0;
display: table-cell;
vertical-align: middle;
}
.attached-label > * > :first-child {
margin-top: 0;
}
.attached-label [class*="btn"] {
display: block;
width: 100%;
}
.search.mobile-search__form {
margin-top: 30px;
}
@media all and (min-width: 48em) {
.search.mobile-search__form {
display: none;
}
}
.mobile-search__input {
background: transparent;
border: 2px solid #fff;
color: #fff;
height: 48px;
font-size: 1.1rem;
}
.mobile-search__input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #cfcdcd;
font-size: 1.1rem;
}
.mobile-search__input::-moz-placeholder {
/* Firefox 19+ */
color: #cfcdcd;
font-size: 1.1rem;
}
.mobile-search__input:-ms-input-placeholder {
/* IE 10+ */
color: #cfcdcd;
font-size: 1.1rem;
}
.mobile-search__input:-moz-placeholder {
/* Firefox 18- */
color: #cfcdcd;
font-size: 1.1rem;
}
/*
Input Label
The `.input-label` class should be added to form labels that want a little
extra styling for the label text.
(You may need to do some fancy things with hidden or altered labels, which is
why these styles aren't added to the `label` element by default.)
Text Field
There are also input descriptions, which go directly underneath the label text,
and input hints that typically go underneath the input field.
Text Field
This is a small description of the field.
This is an important hint.
*/
.input-label,
label {
font-size: 16px;
font-size: 1rem;
line-height: 1.1875;
padding-top: 1.25em;
color: #6F777C;
}
input-hint,
.input-hint {
color: #a9a6a7;
margin-top: 0.3125em;
}
input-desc,
.input-desc {
margin-top: 0em;
}
/*
Fieldset
A simple class to add to fieldsets that want a little more spacing.
*/
.fieldset {
margin-top: 1.25em;
padding-bottom: 1.25em;
}
/*
Checkbox List
Lists of radio or checkbox inputs should typically be just that: lists. In
Motif, you're encouraged to mark up your input lists as semantically as
possible, meaning a fieldset, with a legend, and a list of inputs:
This is a question for a radio list?
*/
ul.checkbox-list {
padding-left: 1.25em !important;
margin-top: 0.625em;
}
legend + .checkbox-list {
margin-top: 0em;
}
legend .input-label {
padding-bottom: 0.3125em;
}
legend + .input-desc {
/* Positioning */
position: relative;
top: -0.3125rem;
}
input + ul.checkbox-list {
margin-top: 1rem;
}
/*
Form Validation
*/
/*
Input States
A couple of classes added to inputs (typically by a JS Validation plugin) that
alter the child elements to convey states of success and error.
Text Field
*/
.is-successful input,
.is-successful textarea,
.is-successful select {
border-color: #0E7D2C;
}
.is-erroneous input,
.is-erroneous textarea,
.is-erroneous select {
border-color: #DD0A04;
}
/*
Form Messaging
Within labels, there are input alerts that apply to individual fields.
Text Field
This field is required.
*/
[class*="input-alert"] {
/* Display & Box Model */
display: inline-block;
/* Pretty */
color: #13496d;
}
#parent-form .bubble.input-alert {
display: inline-block;
}
.input-alert--warning {
color: #ec8e04;
}
.input-alert--error {
color: #DD0A04;
}
.input-alert--success {
color: #0E7D2C;
}
.error-list {
padding: 2em;
border: 3px solid #B44252;
margin-bottom: 2em;
background: rgba(180, 66, 82, 0.1);
}
/*
Responsive Grid
The default responsive grid in Motif is built with a few rules in mind:
1. Each row of columns must be wrapped in a row element
2. There's no need to specify if a column is first or last
With that in mind, there is a basic syntax to learn for what classes to use.
Our breakpoints are classified as:
- Base
- Small
- Medium
- Large
- Extra Large
Our default responsive grid system only uses 3 grids to cover all of our bases:
- `grid, small` covers Base and Small viewports, but cuts off at Medium
- `grid, medium` covers only Medium
- `grid, large` starts at Large and covers Extra Large as well (there is no max
cutoff value for `grid, large`)
Understanding that, the syntax should be easy to understand. In these examples,
we will talk about `grid, small`:
- **Rows**: `.gs-row` (Grid, Small, Row)
- **Columns**: `.gcs` (Grid, Column, Small)
- **Column Width**: `.gs-half` (Grid, Small, Half-Width)
However, to be slightly more succinct, you can use the condensed column syntax:
- **Columns (Condensed)**: `.gcs-half` (Grid, Column, Small, Half-Width)
In brief, the way the grid works is that `.gcs` floats the element to the left
(by default), and adds padding to both the left and the right. `-half` gives
it a width of `50%`. The combined padding of the two columns bumped up against
each other form the full "gutter". The `.gs-row` then clears the floats and has
a *negative* margin on both the left and the right that pops the columns out to
the sides the exact width of their paddings, meaning the column content lines
up with the site boundaries on the left and right without the need to specify
"first" or "last" column classes.
To use this responsively, then, you just add the classes by breakpoint:
By default, the column breakdown of each grid breakpoint:
- `grid, small`: 4 columns
- `grid, medium`: 9 columns
- `grid, large`: 12 columns
For the larger grids, the classes follow the numbers closely...
- `.gcl-10of12
- `.gcm-4of9`
...in just about every combination (based on their total column number), but
all of the grids also have a few "fuzzy" shortcuts as well:
- `half`
- `third`
- `quarter`
- `three-quarters`
- `two-thirds`
*/
.g-halves,
.g-thirds,
.g-quarters {
margin-left: -0.75rem;
margin-right: -0.75rem;
/* Pretty */
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.g-halves:before,
.g-thirds:before,
.g-quarters:before,
.g-halves:after,
.g-thirds:after,
.g-quarters:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.g-halves:after,
.g-thirds:after,
.g-quarters:after {
clear: both;
}
ul.g-halves,
ul.g-thirds,
ul.g-quarters {
padding-left: 0;
list-style: none outside none;
}
.g-halves > *,
.g-thirds > *,
.g-quarters > * {
display: inline;
float: left;
padding-left: 0.75rem;
padding-right: 0.75rem;
/* Display & Box Model */
display: inline-block;
/* Positioning */
float: none;
/* Pretty */
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.g-halves > * {
width: 50%;
}
.g-thirds > * {
width: 33.33333%;
}
.g-quarters > * {
width: 25%;
}
.opera-only :-o-prefocus,
.g-thirds {
word-spacing: -0.43em;
}
/**
* Mobile Grid
*/
@media all and (max-width: 47.9375em) {
[class*="gs-row"],
.gs-quarters,
.gs-thirds,
.gs-halves {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
[class*="gs-row"]:before,
[class*="gs-row"]:after,
.gs-quarters:before,
.gs-quarters:after,
.gs-thirds:before,
.gs-thirds:after,
.gs-halves:before,
.gs-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="gs-row"]:after,
.gs-quarters:after,
.gs-thirds:after,
.gs-halves:after {
clear: both;
}
ul[class*="gs-row"],
ul.gs-quarters,
ul.gs-thirds,
ul.gs-halves {
padding-left: 0;
list-style: none outside none;
}
.gs-row--rtl > [class*="gcs"] {
float: right;
}
.gs-row--ltr > [class*="gcs"] {
float: left;
}
[class*="gcs"],
.gs-quarters > *,
.gs-thirds > *,
.gs-halves > * {
display: inline;
float: left;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.gs-quarter,
.gcs-quarter,
.gs-quarters > * {
width: 25%;
}
.gs-third,
.gcs-third,
.gs-thirds > * {
width: 33.33333%;
}
.gs-half,
.gcs-half,
.gs-halves > * {
width: 50%;
}
.gs-two-thirds,
.gcs-two-thirds {
width: 66.66667%;
}
.gs-three-quarters,
.gcs-three-quarters {
width: 75%;
}
.gs-full,
.gcs-full {
width: 100%;
}
.gs-row--flex,
.gs-quarters,
.gs-thirds,
.gs-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.gs-row--flex > [class*="gcs"],
.gs-quarters > *,
.gs-thirds > *,
.gs-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.gs-row--flex,
.gs-quarters,
.gs-thirds,
.gs-halves {
word-spacing: -0.43em;
}
}
/**
* Tablet Grid
*/
@media all and (min-width: 48em) and (max-width: 61.9375em) {
[class*="gm-row"],
.gm-quarters,
.gm-thirds,
.gm-halves {
margin-left: -1rem;
margin-right: -1rem;
}
[class*="gm-row"]:before,
[class*="gm-row"]:after,
.gm-quarters:before,
.gm-quarters:after,
.gm-thirds:before,
.gm-thirds:after,
.gm-halves:before,
.gm-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="gm-row"]:after,
.gm-quarters:after,
.gm-thirds:after,
.gm-halves:after {
clear: both;
}
ul[class*="gm-row"],
ul.gm-quarters,
ul.gm-thirds,
ul.gm-halves {
padding-left: 0;
list-style: none outside none;
}
.gm-row--rtl > [class*="gcm"] {
float: right;
}
.gm-row--ltr > [class*="gcm"] {
float: left;
}
[class*="gcm"],
.gm-quarters > *,
.gm-thirds > *,
.gm-halves > * {
display: inline;
float: left;
padding-left: 1rem;
padding-right: 1rem;
}
.gm-quarter,
.gcm-quarter,
[class*="m-2of8"],
.gm-quarters > * {
width: 25%;
}
.gm-third,
.gcm-third,
[class*="m-3of9"],
[class*="m-2of6"],
.gm-thirds > * {
width: 33.33333%;
}
.gm-half,
.gcm-half,
[class*="m-4of8"],
[class*="m-3of6"],
.gm-halves > * {
width: 50%;
}
.gm-two-thirds,
.gcm-two-thirds,
[class*="m-6of9"],
[class*="m-4of6"] {
width: 66.66667%;
}
.gm-three-quarters,
.gcm-three-quarters,
[class*="m-6of8"] {
width: 75%;
}
.gm-full,
.gcm-full {
width: 100%;
}
[class*="m-8of9"] {
width: 88.88889%;
}
[class*="m-7of9"] {
width: 77.77778%;
}
[class*="m-5of9"] {
width: 55.55556%;
}
[class*="m-4of9"] {
width: 44.44444%;
}
[class*="m-2of9"] {
width: 22.22222%;
}
[class*="m-1of9"] {
width: 11.11111%;
}
[class*="m-7of8"] {
width: 87.5%;
}
[class*="m-5of8"] {
width: 62.5%;
}
[class*="m-3of8"] {
width: 37.5%;
}
[class*="m-1of8"] {
width: 12.5%;
}
[class*="m-6of7"] {
width: 85.71429%;
}
[class*="m-5of7"] {
width: 71.42857%;
}
[class*="m-4of7"] {
width: 57.14286%;
}
[class*="m-3of7"] {
width: 42.85714%;
}
[class*="m-2of7"] {
width: 28.57143%;
}
[class*="m-1of7"] {
width: 14.28571%;
}
[class*="m-5of6"] {
width: 83.33333%;
}
[class*="m-1of6"] {
width: 16.66667%;
}
[class*="m-4of5"] {
width: 80%;
}
[class*="m-3of5"] {
width: 60%;
}
[class*="m-2of5"] {
width: 40%;
}
[class*="m-1of5"] {
width: 20%;
}
.gm-row--flex,
.gm-quarters,
.gm-thirds,
.gm-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.gm-row--flex > [class*="gcm"],
.gm-quarters > *,
.gm-thirds > *,
.gm-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.gm-row--flex,
.gm-quarters,
.gm-thirds,
.gm-halves {
word-spacing: -0.43em;
}
}
/**
* Desktop Grid
*/
/*
````desktop-grid
````
*/
@media all and (min-width: 62em) {
[class*="gl-row"],
.gl-quarters,
.gl-thirds,
.gl-halves {
margin-left: -1.125rem;
margin-right: -1.125rem;
}
[class*="gl-row"]:before,
[class*="gl-row"]:after,
.gl-quarters:before,
.gl-quarters:after,
.gl-thirds:before,
.gl-thirds:after,
.gl-halves:before,
.gl-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="gl-row"]:after,
.gl-quarters:after,
.gl-thirds:after,
.gl-halves:after {
clear: both;
}
ul[class*="gl-row"],
ul.gl-quarters,
ul.gl-thirds,
ul.gl-halves {
padding-left: 0;
list-style: none outside none;
}
.gl-row--rtl > [class*="gcl"] {
float: right;
}
.gl-row--ltr > [class*="gcl"] {
float: left;
}
[class*="gcl"],
.gl-quarters > *,
.gl-thirds > *,
.gl-halves > * {
display: inline;
float: left;
padding-left: 1.125rem;
padding-right: 1.125rem;
}
.gl-quarter,
.gcl-quarter,
[class*="l-3of12"],
[class*="l-2of8"],
.gl-quarters > * {
width: 25%;
}
.gl-third,
.gcl-third,
[class*="l-4of12"],
[class*="l-3of9"],
[class*="l-2of6"],
.gl-thirds > * {
width: 33.33333%;
}
.gl-half,
.gcl-half,
[class*="l-6of12"],
[class*="l-5of10"],
[class*="l-4of8"],
[class*="l-3of6"],
.gl-halves > * {
width: 50%;
}
.gl-two-thirds,
.gcl-two-thirds,
[class*="l-8of12"],
[class*="l-6of9"],
[class*="l-4of6"] {
width: 66.66667%;
}
.gl-three-quarters,
.gcl-three-quarters,
[class*="l-9of12"],
[class*="l-6of8"] {
width: 75%;
}
.gl-full,
.gcl-full {
width: 100%;
}
[class*="l-11of12"] {
width: 91.66667%;
}
[class*="l-10of12"] {
width: 83.33333%;
}
[class*="l-7of12"] {
width: 58.33333%;
}
[class*="l-5of12"] {
width: 41.66667%;
}
[class*="l-2of12"] {
width: 16.66667%;
}
[class*="l-1of12"] {
width: 8.33333%;
}
[class*="l-10of11"] {
width: 90.90909%;
}
[class*="l-9of11"] {
width: 81.81818%;
}
[class*="l-8of11"] {
width: 72.72727%;
}
[class*="l-7of11"] {
width: 63.63636%;
}
[class*="l-6of11"] {
width: 54.54545%;
}
[class*="l-5of11"] {
width: 45.45455%;
}
[class*="l-4of11"] {
width: 36.36364%;
}
[class*="l-3of11"] {
width: 27.27273%;
}
[class*="l-2of11"] {
width: 18.18182%;
}
[class*="l-1of11"] {
width: 9.09091%;
}
[class*="l-9of10"] {
width: 90%;
}
[class*="l-8of10"] {
width: 80%;
}
[class*="l-7of10"] {
width: 70%;
}
[class*="l-6of10"] {
width: 60%;
}
[class*="l-4of10"] {
width: 40%;
}
[class*="l-3of10"] {
width: 30%;
}
[class*="l-2of10"] {
width: 20%;
}
[class*="l-1of10"] {
width: 10%;
}
[class*="l-8of9"] {
width: 88.88889%;
}
[class*="l-7of9"] {
width: 77.77778%;
}
[class*="l-5of9"] {
width: 55.55556%;
}
[class*="l-4of9"] {
width: 44.44444%;
}
[class*="l-2of9"] {
width: 22.22222%;
}
[class*="l-1of9"] {
width: 11.11111%;
}
[class*="l-7of8"] {
width: 87.5%;
}
[class*="l-5of8"] {
width: 62.5%;
}
[class*="l-3of8"] {
width: 37.5%;
}
[class*="l-1of8"] {
width: 12.5%;
}
[class*="l-6of7"] {
width: 85.71429%;
}
[class*="l-5of7"] {
width: 71.42857%;
}
[class*="l-4of7"] {
width: 57.14286%;
}
[class*="l-3of7"] {
width: 42.85714%;
}
[class*="l-2of7"] {
width: 28.57143%;
}
[class*="l-1of7"] {
width: 14.28571%;
}
[class*="l-5of6"] {
width: 83.33333%;
}
[class*="l-1of6"] {
width: 16.66667%;
}
[class*="l-4of5"] {
width: 80%;
}
[class*="l-3of5"] {
width: 60%;
}
[class*="l-2of5"] {
width: 40%;
}
[class*="l-1of5"] {
width: 20%;
}
/*
Media Grid
The Media Grid allows you to place a grid of photos or videos (catalog or
retail products, etc.) without floating them, alleviating the need to concern
yourself with clearing the floats with rows should an object extend further
than another. Also, because they are not floating, it allows you to align
the entire group center, making sure any "orphaned" grid entries are centered.
The syntax is simply the same as the regular responsive grid system, except
the row class has a `--flex` modifier.
````media-grid
Alderaan is peaceful. We have no weapons.
Alderaan is peaceful. We have no weapons.
Alderaan is peaceful. We have no weapons.
````
*/
.gl-row--flex,
.gl-quarters,
.gl-thirds,
.gl-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.gl-row--flex > [class*="gcl"],
.gl-quarters > *,
.gl-thirds > *,
.gl-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.gl-row--flex,
.gl-quarters,
.gl-thirds,
.gl-halves {
word-spacing: -0.43em;
}
}
.row {
margin-left: -1.125em;
margin-right: -1.125em;
}
.columns {
padding-left: 1.125rem;
padding-right: 1.125rem;
}
@media all and (min-width: 30em) {
.columns {
display: inline-table;
}
}
@media all and (min-width: 30em) {
.two {
width: 8.125em;
}
}
@media all and (min-width: 30em) {
.three {
width: 13.3125em;
}
}
@media all and (min-width: 30em) {
.four {
width: 18.5em;
}
}
@media all and (min-width: 30em) {
.five {
width: 23.6875em;
}
}
@media all and (min-width: 30em) {
.six {
width: 28.875em;
}
}
@media all and (min-width: 30em) {
.seven {
width: 34.0625em;
}
}
@media all and (min-width: 30em) {
.eight {
width: 39.25em;
}
}
@media all and (min-width: 30em) {
.nine {
width: 44.4375em;
}
}
@media all and (min-width: 30em) {
.ten {
width: 49.625em;
}
}
@media all and (min-width: 30em) {
.eleven {
width: 54.8125em;
}
}
@media all and (min-width: 62em) {
.twelve {
width: 60em;
}
}
/*
Off-Canvas Trigger (Small Screens Only)
The Off-Canvas Trigger is a simple way of pushing a column of content
off-canvas and sliding it on upon trigger. In this case, the `is-active`
class is placed on the `.off-canvas` wrapping element so that it can
adjust both child elements.
@TODO: Adjust for IE9?
@TODO: Show better example w/ Reveal plugin
*/
.js [class*="off-canvas--"] {
/* Positioning */
position: relative;
/* Display & Box Model */
overflow: hidden;
}
.js [class*="off-canvas--"].is-active > .canvas__primary {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.js [class*="off-canvas--"].is-active > .canvas__primary,
.js [class*="off-canvas--"].was-active > .canvas__primary,
.js [class*="off-canvas--"].is-active > .canvas__secondary,
.js [class*="off-canvas--"].was-active > .canvas__secondary {
-webkit-transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.js .canvas__secondary {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.js .off-canvas--left > .canvas__primary,
.js .off-canvas--right > .canvas__primary,
.js .off-canvas--left > .canvas__secondary,
.js .off-canvas--right > .canvas__secondary {
min-height: 100vh;
}
.js .off-canvas--left > .canvas__secondary,
.js .off-canvas--right > .canvas__secondary {
height: 100vh;
overflow: hidden;
overflow-y: auto;
}
.js .off-canvas--left.is-active,
.js .off-canvas--right.is-active,
.js .off-canvas--left.is-active > .canvas_primary,
.js .off-canvas--right.is-active > .canvas_primary {
height: 100vh;
overflow: hidden;
}
.js .off-canvas--right.is-active > .canvas__secondary {
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.js .off-canvas--right > .canvas__primary {
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
/* Positioning */
float: left;
/* Display & Box Model */
margin-left: -100%;
}
.js .off-canvas--right > .canvas__secondary {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Positioning */
float: right;
/* Display & Box Model */
margin-right: -100%;
}
.js .off-canvas--left.is-active > .canvas__secondary {
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.js .off-canvas--left > .canvas__primary {
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
/* Positioning */
float: right;
/* Display & Box Model */
margin-right: -100%;
}
.js .off-canvas--left > .canvas__secondary {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Positioning */
float: left;
/* Display & Box Model */
margin-left: -100%;
}
.js .off-canvas--top,
.js .off-canvas--bottom {
/* Positioning */
position: relative;
/* Display & Box Model */
min-height: 100vh;
}
.js .off-canvas--top.is-active,
.js .off-canvas--bottom.is-active {
height: 100vh;
overflow: hidden;
}
.js .off-canvas--top.is-active > .canvas__primary,
.js .off-canvas--bottom.is-active > .canvas__primary {
/* Positioning */
position: absolute;
top: 0;
right: 0;
left: 0;
/* Display & Box Model */
height: 100vh;
overflow: hidden;
}
.js .off-canvas--top.is-active > .canvas__secondary,
.js .off-canvas--bottom.is-active > .canvas__secondary {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Display & Box Model */
overflow: auto;
}
.js .off-canvas--top > .canvas__secondary,
.js .off-canvas--bottom > .canvas__secondary {
/* Positioning */
position: absolute;
left: 0;
right: 0;
/* Display & Box Model */
width: 100%;
height: 80vh;
overflow: hidden;
}
.js .off-canvas--top.is-active > .canvas__primary {
-webkit-transform: translate3d(0, 80vh, 0);
-moz-transform: translate3d(0, 80vh, 0);
-o-transform: translate3d(0, 80vh, 0);
-ms-transform: translate3d(0, 80vh, 0);
transform: translate3d(0, 80vh, 0);
}
.js .off-canvas--top > .canvas__secondary {
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
-o-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
/* Positioning */
top: 0;
}
.js .off-canvas--bottom.is-active > .canvas__primary {
-webkit-transform: translate3d(0, -80vh, 0);
-moz-transform: translate3d(0, -80vh, 0);
-o-transform: translate3d(0, -80vh, 0);
-ms-transform: translate3d(0, -80vh, 0);
transform: translate3d(0, -80vh, 0);
}
.js .off-canvas--bottom > .canvas__secondary {
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
/* Positioning */
bottom: 0;
}
.js .canvas__primary,
.js .canvas__secondary {
/* Display & Box Model */
width: 100%;
}
.js .canvas__primary {
z-index: 1;
}
.js .canvas__secondary {
z-index: 2;
}
@media all and (min-width: 48em) {
.js [class*="off-canvas--"].is-active > .canvas__primary,
.js [class*="off-canvas--"].was-active > .canvas__primary,
.js [class*="off-canvas--"].is-active > .canvas__secondary,
.js [class*="off-canvas--"].was-active > .canvas__secondary {
-webkit-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.js .off-canvas--right > .canvas__secondary,
.js .off-canvas--left > .canvas__secondary {
width: 70%;
}
.js .off-canvas--right.is-active > .canvas__primary {
-webkit-transform: translate3d(30%, 0, 0);
-moz-transform: translate3d(30%, 0, 0);
-o-transform: translate3d(30%, 0, 0);
-ms-transform: translate3d(30%, 0, 0);
transform: translate3d(30%, 0, 0);
}
.js .off-canvas--right > .canvas__secondary {
margin-right: -70%;
}
.js .off-canvas--left.is-active > .canvas__primary {
-webkit-transform: translate3d(-30%, 0, 0);
-moz-transform: translate3d(-30%, 0, 0);
-o-transform: translate3d(-30%, 0, 0);
-ms-transform: translate3d(-30%, 0, 0);
transform: translate3d(-30%, 0, 0);
}
.js .off-canvas--left > .canvas__secondary {
margin-left: -70%;
}
}
@media all and (min-width: 62em) {
.js .off-canvas--right > .canvas__secondary,
.js .off-canvas--left > .canvas__secondary {
width: 60%;
}
.js .off-canvas--right.is-active > .canvas__primary {
-webkit-transform: translate3d(40%, 0, 0);
-moz-transform: translate3d(40%, 0, 0);
-o-transform: translate3d(40%, 0, 0);
-ms-transform: translate3d(40%, 0, 0);
transform: translate3d(40%, 0, 0);
}
.js .off-canvas--right > .canvas__secondary {
margin-right: -60%;
}
.js .off-canvas--left.is-active > .canvas__primary {
-webkit-transform: translate3d(-40%, 0, 0);
-moz-transform: translate3d(-40%, 0, 0);
-o-transform: translate3d(-40%, 0, 0);
-ms-transform: translate3d(-40%, 0, 0);
transform: translate3d(-40%, 0, 0);
}
.js .off-canvas--left > .canvas__secondary {
margin-left: -60%;
}
}
.js [class*="slide-canvas--"] {
-webkit-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
-o-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
/* Positioning */
position: fixed;
z-index: 110;
/* Display & Box Model */
overflow: auto;
overflow-x: hidden;
}
.js [class*="slide-canvas--"].is-revealed {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.js .slide-canvas--left,
.js .slide-canvas--right {
/* Positioning */
top: 0;
bottom: 0;
/* Display & Box Model */
width: 80%;
}
@media all and (min-width: 48em) {
.js .slide-canvas--left,
.js .slide-canvas--right {
width: 33%;
}
}
@media all and (min-width: 62em) {
.js .slide-canvas--left,
.js .slide-canvas--right {
width: 25%;
}
}
@media all and (min-width: 77.5em) {
.js .slide-canvas--left,
.js .slide-canvas--right {
width: 20%;
}
}
.js .slide-canvas--left {
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
/* Positioning */
left: 0;
}
.js .slide-canvas--right {
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
/* Positioning */
right: 0;
}
.js .slide-canvas--top,
.js .slide-canvas--bottom {
/* Positioning */
left: 0;
right: 0;
/* Display & Box Model */
height: 90%;
}
@media all and (min-width: 48em) {
.js .slide-canvas--top,
.js .slide-canvas--bottom {
height: 33%;
}
}
@media all and (min-width: 62em) {
.js .slide-canvas--top,
.js .slide-canvas--bottom {
height: 25%;
}
}
@media all and (min-width: 77.5em) {
.js .slide-canvas--top,
.js .slide-canvas--bottom {
height: 20%;
}
}
.js .slide-canvas--top {
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
-o-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
/* Positioning */
top: 0;
}
.js .slide-canvas--bottom {
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
/* Positioning */
bottom: 0;
}
.overflow-list {
overflow: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.overflow-list__item {
display: inline-block;
white-space: normal;
vertical-align: top;
position: relative;
}
@media all and (min-width: 48em) {
.overflow-list--until-medium {
overflow: visible;
white-space: normal;
}
}
@media all and (min-width: 62em) {
.overflow-list--until-large {
overflow: visible;
white-space: normal;
}
}
@media all and (min-width: 77.5em) {
.overflow-list--until-x-large {
overflow: visible;
white-space: normal;
}
}
.responsive-videos-wrapper {
position: relative;
}
.responsive-videos-wrapper:before {
content: '';
padding-top: calc(56.25%);
display: block;
}
.responsive-videos-wrapper iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
/*
Tables
*/
/*
Default Tables
Simple, clean default styles. Just mark it up like a normal table.
Undoes table to more of a definition list on smaller viewports.
See: http://codepen.io/aarongustafson/pen/ucJGv
````tables
#
First Name
Last Name
Language
1
Some
One
English
2
Joe
Sixpack
English
3
Stu
Dent
Code
````
*/
table {
width: 100%;
max-width: 100%;
}
th,
td {
padding: 0.625rem 0.5625rem;
text-align: left;
}
th {
padding-top: 0.625rem;
border-bottom: .0625em solid #d7d6d1;
}
table tr + tr td {
border-top: .0625em solid#d7d6d1;
}
table th + th,
table td + td {
border-left: .0625em solid#d7d6d1;
}
@media all and (max-width: 47.9375em) {
}
@media all and (min-width: 48em) {
th,
td {
padding: 0.625rem 1.125rem;
}
}
/*
Panel
Used to provide messaging to the user, whether it be direct or through calls to
action. The panel typically indicates a visual separation and implied
sub-grouping of its content.
```panels
This is a feedback panel with no heading.
````
*/
.panel,
[class*="panel-"],
[class*="-panel"] {
margin-top: 1.25em;
padding: 1.25rem;
background-color: #f2f1f1;
}
.panel > :first-child,
[class*="panel-"] > :first-child,
[class*="-panel"] > :first-child {
margin-top: 0;
}
.panel h1,
[class*="panel-"] h1,
[class*="-panel"] h1,
.panel h2,
[class*="panel-"] h2,
[class*="-panel"] h2,
.panel h3,
[class*="panel-"] h3,
[class*="-panel"] h3,
.panel h4,
[class*="panel-"] h4,
[class*="-panel"] h4,
.panel h5,
[class*="panel-"] h5,
[class*="-panel"] h5,
.panel h6,
[class*="panel-"] h6,
[class*="-panel"] h6 {
color: inherit;
}
[class*="panel--thin"] {
padding: 0.625rem;
}
/*
Alert Panel
This variation of the standard `.panel` is used specifically for delivering
direct messages to the user, whether they be informative, complimentary,
or preventative.
````info-alert-panels
This is an alert panel with no heading.
````
*/
/*
````error-alert-panels
This is an alert panel with no heading.
````
*/
/*
````success-alert-panels
This is an alert panel with no heading.
````
*/
[class*="alert-panel"] {
color: #fff;
}
.alert-panel {
background: #13496d;
}
.alert-panel--error {
background: #DD0A04;
}
.alert-panel--success {
background: #0E7D2C;
}
/*
WYSIWYG
Though we keep our styles as flexible and modular as possible, there may be
times, as when using a WYSIWYG editor, when some styles need to be baked in.
Here, we specify a `.wysiwyg` class that wraps around that content, and
hardcode some of those styles
[WYSIWYG Content]
*/
.wysiwyg h1 {
margin-top: 0;
font-size: 42px;
font-size: 2.625rem;
line-height: 0.71428571;
font-size: 3rem;
line-height: 50px;
}
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
margin-top: 1.5em;
}
@media all and (min-width: 48em) {
.wrapper--large {
width: 100%;
}
}
.brand-icon {
max-width: 75px;
}
.two-pane {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: stretch;
position: relative;
}
@media all and (max-width: 61.9375em) {
.two-pane {
flex-direction: column;
}
}
.two-pane--negative-bottom-spacing {
margin-bottom: -41px;
}
@media all and (max-width: 61.9375em) {
.two-pane__col {
width: 100% !important;
}
}
.two-pane__col--big {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-end;
width: 60%;
padding: 3.125rem 0;
position: relative;
background-image: url('/resources/images/campus--cropped.jpg');
background-size: cover;
}
.two-pane__col--big > * {
position: relative;
z-index: 10;
}
.two-pane__col--big:before {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(241, 232, 211, 0.9);
}
@media all and (max-width: 61.9375em) {
.two-pane__col--big {
padding-top: 0;
}
.two-pane__col--big .accordion__header {
transform: translateY(-1.25rem);
}
}
.two-pane__col--small {
width: 40%;
}
.accordion {
width: 100%;
max-width: 700px;
padding: 0 2.5rem;
list-style: none;
}
@media all and (max-width: 61.9375em) {
.accordion {
max-width: none;
margin: 0;
padding: 0;
}
}
.accordion__header {
text-align: center;
}
@media all and (max-width: 61.9375em) {
.accordion__header {
padding: 0 1rem;
}
.accordion__header .strikethrough {
display: none;
}
}
.accordion__body {
padding: 0 1rem;
}
@media all and (max-width: 61.9375em) {
.accordion__body {
padding: 0;
}
}
.accordion__title {
margin-top: 0;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.625rem;
color: #29333A;
}
.accordion__wysiwyg {
text-align: left;
margin-bottom: 30px;
}
.accordion__subtitle {
margin-top: 0;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 0.875rem;
text-transform: uppercase;
color: #274B64;
}
.accordion-list {
margin-top: 0;
padding-left: 0;
list-style: none;
}
.accordion-list__item {
padding: 1rem 0;
}
@media all and (max-width: 61.9375em) {
.accordion-list__item {
padding: 1rem;
}
}
.accordion-list__item-header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.accordion-list__item-title {
margin-top: 0;
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.25rem;
}
.accordion-list__item-header-icon {
width: 20px;
}
.accordion-list__item-content {
font-family: "Proxima Nova Light", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1rem;
}
.accordion-list__item-actions {
margin: 1rem auto 0;
}
.accordion-list__item-actions .button {
text-align: left;
}
@media all and (max-width: 61.9375em) {
.accordion-list__item-actions .button {
color: #fff;
background-color: #274B64;
padding: 1rem;
}
}
.accordion-list__item-actions .button:hover {
text-align: left;
}
.accordion-list__item-action {
margin: 0 2rem .5rem 0;
}
.accordion-list__item-action:last-of-type {
margin-bottom: 0;
}
.strikethrough {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.strikethrough:before,
.strikethrough:after {
content: "";
flex: 1 0 auto;
display: block;
height: 1px;
background-color: #a29f99;
}
.strikethrough__content {
padding: 0 1rem;
line-height: 1;
}
.bg--purple-diagonal {
background-image: url(/resources/images/line.png);
background-repeat: repeat;
}
.bg--blue-diagonal {
background-image: url(/resources/images/line--blue.png);
background-repeat: repeat;
}
.global-search {
width: 0px;
}
.global-search span {
margin: 0 1rem;
padding: .5rem 4rem 0 .25rem;
border-bottom: 1px gray solid;
}
.overflow-hide {
overflow: hidden;
}
.overflow-show {
overflow: visible;
}
.swipe-in {
animation: swipe-in 0.5s forwards;
}
.swipe-out {
animation: swipe-out 0.5s forwards;
}
@keyframes swipe-in {
0% {
width: 0px;
}
100% {
width: 150px;
}
}
@keyframes swipe-out {
0% {
width: 150px;
}
100% {
width: 0px;
}
}
.filter-helper-text {
padding: 0 1rem;
}
.wrapper--xl {
width: 100%;
max-width: 1150px;
margin-left: auto;
margin-right: auto;
}
.shadow {
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
}
.see-all {
color: #177da4;
text-transform: none;
margin-left: .2em;
}
.see-all:after {
border: .3125em solid transparent;
border-left-color: #177da4;
content: "";
width: 0;
height: 0;
margin: 0;
padding: 0;
display: block;
display: inline-block;
margin-left: .2em;
}
.registration-form fieldset:not(:last-child) {
margin-bottom: 1.25rem;
}
.registration-form.news-notes {
margin-bottom: 1.25rem;
}
.price-level-options .membership-option > * {
display: inline-block;
margin: 3px;
vertical-align: top;
}
.membership-option {
display: block;
margin-bottom: 0.875rem;
font-size: 1rem;
}
.membership-option h2 {
margin-top: 0;
}
.membership-option .membership-option__price {
margin-right: 0.5rem;
margin-bottom: 0;
padding-right: 0.5rem;
border-right: 1px #656a6e solid;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.125rem;
width: 5em;
}
.price-level-options .membership-option {
display: inline-flex;
align-items: flex-start;
margin-right: -10%;
}
.membership-option .membership-options > * {
margin: 0;
display: inline-block;
}
@media all and (max-width: 61.9375em) {
.membership-option .membership-options > * {
display: block;
}
}
.membership-option .membership-option__type {
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.125rem;
}
.membership-option .membership-option__em {
display: block;
font-size: .85em;
}
.membership-option__type + .membership-option__info {
margin-top: 0;
}
.membership-option__info + .membership-option__em {
margin-top: 0;
}
.additional-membership-forms-wrapper {
display: block;
}
.inline-input > * {
display: inline-block;
}
.radio-style {
-webkit-appearance: radio;
-mos-appearance: radio;
appearance: radio;
}
.credit-card-list {
list-style: none;
padding-left: 0;
}
.credit-card-list li {
display: inline-block;
width: 3.75rem;
height: 2.5rem;
background-repeat: no-repeat;
background-position: center;
}
.credit-card-visa {
background-image: url("/resources/images/visa_64.png");
}
.credit-card-mc {
background-image: url("/resources/images/mastercard_64.png");
}
.credit-card-disc {
background-image: url("/resources/images/discover_64.png");
}
.credit-card-amex {
background-image: url("/resources/images/amex_64.png");
}
.search-result {
text-align: center;
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
}
@media all and (min-width: 30em) {
.search-result {
text-align: left;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
}
}
.search-result:not(:last-child) {
border-bottom: 1px gray solid;
}
@media all and (min-width: 30em) {
.search-result figure {
flex: 0 0 auto;
width: 25%;
}
.search-result figure + .event-details {
padding-left: 1.25rem;
}
}
@media all and (min-width: 30em) {
.search-result .event-details {
flex: 0 0 auto;
width: 75%;
}
}
.search-result .event-details h3 {
margin-top: 0;
}
.search-result .event-details .button {
display: inline-block;
}
ul.event-specs {
padding-left: 0 !important;
}
p.event-details {
margin-top: 0;
}
span[style="color: #f5f2ec;"] {
color: #29333A !important;
}
.search {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
@media all and (min-width: 48em) {
.search {
flex: 1 0 auto;
}
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
.search {
order: 2;
max-width: 400px;
padding-top: 0.625rem;
}
}
.search .submit {
margin-left: 1rem;
background-color: transparent;
border: 0;
position: relative;
padding: .25em 0;
color: #656a6e;
float: right;
font-size: 1rem;
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
.main-header__buttonWrapper {
order: 1;
text-align: right;
}
}
@media all and (min-width: 62em) {
.main-header__buttonWrapper {
flex: 1 0 auto;
}
}
.mobile-nav .main-header__buttonWrapper {
display: flex;
flex-direction: column;
margin-top: 40px;
}
.mobile-nav .main-header__buttonWrapper .button--icon {
font-size: 1.125rem;
justify-content: center;
}
.mobile-nav .main-header__buttonWrapper .button--icon:last-child {
color: #177DA4 !important;
margin-top: 0.625rem;
}
@media all and (min-width: 48em) {
.mobile-nav .main-header__buttonWrapper {
display: none;
}
}
.main-header__modal-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
}
.main-header__modal-wrapper:not(.is-revealed) {
display: none;
}
.main-header__modal-bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
}
.main-header__modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
}
@media all and (max-width: 61.9375em) {
.main-header__modal {
width: 85%;
max-width: 824px;
}
}
.main-header__btn-close {
cursor: pointer;
font-size: 1.875rem;
background-color: #fff;
position: absolute;
right: 10px;
top: 10px;
border-radius: 50%;
width: 35px;
height: 35px;
padding: 1px 0 0 3px;
}
.text-hide {
font: 0/0 a;
text-shadow: none;
color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0);
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.text-hide.is-hidden {
display: none;
}
.unordered-list li a em.primer-text {
font-size: 1.25rem;
}
.unordered-list li em.primer-text {
line-height: 0.0625rem;
}
.unordered-list li em.primer-text a {
font-size: 1.25rem;
line-height: 1;
}
.desc .event-title {
margin-top: 0;
}
.desc .event-title a {
font-size: inherit;
}
article.desc-wrapper {
margin-top: 1.25rem;
}
@media all and (min-width: 48em) {
article.desc-wrapper {
margin-top: 2.5rem;
}
}
article.desc-wrapper.no-image .desc {
margin-left: 25%;
}
@media all and (min-width: 48em) {
article.desc-wrapper.no-image .desc {
margin-left: calc(33.33333333%);
}
}
@media all and (min-width: 62em) {
article.desc-wrapper.no-image .desc {
margin-left: 20%;
}
}
.desc-wrapper .desc-figure {
margin-top: 0;
}
.desc-wrapper .desc-figure img {
width: 100%;
height: auto;
}
.form-section + .form-section {
margin-top: 1.25rem;
}
.main-header {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 20;
background-color: #EDEAE3;
}
@media all and (min-width: 48em) {
.main-header {
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
}
}
.main-header > .wrapper:first-child {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 1.25rem 0;
}
.main-header .nav-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
@media all and (max-width: 47.9375em) {
.main-header .nav-wrap {
display: none;
}
}
.main-header-logo-group {
display: flex;
align-items: center;
}
.logo {
display: block;
width: 300px;
height: 59px;
margin-right: 20px;
}
@media all and (max-width: 47.9375em) {
.logo {
margin-right: 2rem;
}
}
@media all and (min-width: 48em) {
.logo {
flex: 0 0 auto;
width: 250px;
}
}
@media all and (min-width: 62em) {
.logo {
width: 250px;
}
}
.logo img {
display: block;
width: 100%;
height: auto;
}
.logo-75 {
display: none;
width: 65px;
height: 60px;
}
@media all and (min-width: 48em) {
.logo-75 {
display: block;
}
}
.banner-link {
padding: .5rem .5rem .5rem .5rem;
background-color: #274B64;
color: #fff;
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
line-height: 1rem;
}
.banner-link:hover {
color: #fff;
background-color: #356789;
}
.main-header__functions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
@media all and (max-width: 47.9375em) {
.main-header__functions {
display: none;
}
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
.main-header__functions {
max-width: 500px;
}
}
@media all and (min-width: 48em) {
.main-header__functions {
flex-wrap: wrap;
justify-content: flex-end;
padding-left: 2rem;
}
}
@media all and (min-width: 62em) {
.main-header__functions {
flex-wrap: nowrap;
}
}
.main-header__functions img {
margin-right: 1rem;
}
.mobile-menu {
display: none;
position: relative;
z-index: 50;
}
.mobile-menu svg {
width: 40px;
height: 33px;
}
@media all and (max-width: 47.9375em) {
.mobile-menu {
display: block;
}
}
.brand-header {
text-align: center;
}
.brand-title {
margin-top: 0;
color: #29333a;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", Arial, sans-serif;
font-size: 1.625rem;
}
#globalSearchButton svg {
width: 2.25rem;
height: 2.25rem;
margin-right: 1rem;
border-right: 1px #d7d6d1 solid;
padding-right: 1rem;
position: relative;
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
#globalSearchButton svg {
margin-right: 0;
border-right: 0;
}
}
.instituteNavTrigger {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.9375rem;
background: #F5F2EC;
color: #177DA4;
width: 100%;
border: none;
outline: none;
}
.instituteNavTrigger:hover,
.instituteNavTrigger:focus {
color: #115974;
}
.instituteNavTrigger.is-active {
top: 0;
background: #177DA4;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
color: #fff;
z-index: 11;
}
.instituteNavTrigger.is-active:hover,
.instituteNavTrigger.is-active:focus,
.instituteNavTrigger.is-active:active {
color: #fff;
}
.instituteNavTrigger.is-active svg {
transform: rotate(180deg);
}
.instituteNavTrigger svg {
font-size: 24px;
color: inherit;
transform: rotate(0);
transition: transform 100ms ease;
}
@media all and (min-width: 48em) {
.instituteNavTrigger {
display: none;
}
}
.instituteNavTrigger__text {
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
letter-spacing: 0.05714286em;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
text-transform: uppercase;
}
.globalHeader__notification {
background-color: #F8E749;
}
.globalHeader__notification,
.globalHeader__notification a {
color: #29333a;
font-family: "Proxima Nova Bold";
}
.globalHeader__notification a:hover {
color: #000000;
}
.presentational__is-hidden {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.globalHeader__close-button {
font-size: 32px;
font-weight: bold;
line-height: 0.5;
margin-top: 5px;
float: right;
}
.globalHeader__notification.is-hidden {
display: none;
}
.global-nav {
width: 100%;
background-color: #f5f2ec;
}
@media all and (max-width: 47.9375em) {
.global-nav > .wrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
height: 100%;
}
}
.globalNav__list {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 0;
list-style: none;
}
.globalNav__list-item {
flex-grow: 2;
text-align: center;
}
.globalNav__link {
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
letter-spacing: 0.05714286em;
display: block;
color: #177DA4;
font-family: "Proxima Nova Extrabold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
text-decoration: none;
text-transform: uppercase;
}
.globalNav__link:hover {
color: #115974;
text-decoration: none;
}
.globalNav__link.is-current {
color: #fff !important;
background-color: #177DA4;
}
.globalNav__link-text {
display: block;
padding: 10px 0;
}
@media all and (min-width: 48em) {
.globalNav__link-text {
padding-right: 1.125rem;
padding-left: 1.125rem;
display: inline-block;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}
.globalNav__link:not(.is-current):hover .globalNav__link-text {
border-bottom-color: #115974;
}
}
.institute-nav__wrapper {
width: 92%;
margin-left: auto;
margin-right: auto;
display: none;
}
@media all and (min-width: 77.5em) {
.institute-nav__wrapper {
width: 80%;
max-width: 71.875rem;
}
}
@media all and (min-width: 77.5em) {
.institute-nav__wrapper {
width: 80%;
max-width: 71.875rem;
}
}
@media all and (max-width: 47.9375em) {
.institute-nav.is-active .institute-nav__wrapper {
width: 100%;
display: block;
height: auto;
}
}
@media all and (min-width: 48em) {
.institute-nav__wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
}
}
.law-enforcement-administration .institute-nav__item,
.law-enforcement-administration .institute-nav__item--stacked {
background: #274B64;
}
.energy-law .institute-nav__item,
.energy-law .institute-nav__item--stacked {
background: #E49546;
}
.international-and-comparative-law .institute-nav__item,
.international-and-comparative-law .institute-nav__item--stacked {
background: #217053;
}
.transnational-arbitration .institute-nav__item,
.transnational-arbitration .institute-nav__item--stacked {
background: #74B0BD;
}
.law-and-technology .institute-nav__item,
.law-and-technology .institute-nav__item--stacked {
background: #B44252;
}
.criminal-justice .institute-nav__item,
.criminal-justice .institute-nav__item--stacked {
background: #9DB351;
}
.other-programs .institute-nav__item,
.other-programs .institute-nav__item--stacked {
background: #963D68;
}
@media all and (min-width: 48em) {
.law-enforcement-administration .institute-nav__item:hover,
.law-enforcement-administration .institute-nav__item--stacked:hover,
.law-enforcement-administration .institute-nav__item:focus,
.law-enforcement-administration .institute-nav__item--stacked:focus {
background: #1D3B4F;
}
.energy-law .institute-nav__item:hover,
.energy-law .institute-nav__item--stacked:hover,
.energy-law .institute-nav__item:focus,
.energy-law .institute-nav__item--stacked:focus {
background: #B6712C;
}
.international-and-comparative-law .institute-nav__item:hover,
.international-and-comparative-law .institute-nav__item--stacked:hover,
.international-and-comparative-law .institute-nav__item:focus,
.international-and-comparative-law .institute-nav__item--stacked:focus {
background: #1B5D45;
}
.transnational-arbitration .institute-nav__item:hover,
.transnational-arbitration .institute-nav__item--stacked:hover,
.transnational-arbitration .institute-nav__item:focus,
.transnational-arbitration .institute-nav__item--stacked:focus {
background: #5894A1;
}
.law-and-technology .institute-nav__item:hover,
.law-and-technology .institute-nav__item--stacked:hover,
.law-and-technology .institute-nav__item:focus,
.law-and-technology .institute-nav__item--stacked:focus {
background: #9B3544;
}
.criminal-justice .institute-nav__item:hover,
.criminal-justice .institute-nav__item--stacked:hover,
.criminal-justice .institute-nav__item:focus,
.criminal-justice .institute-nav__item--stacked:focus {
background: #7D942E;
}
.other-programs .institute-nav__item:hover,
.other-programs .institute-nav__item--stacked:hover,
.other-programs .institute-nav__item:focus,
.other-programs .institute-nav__item--stacked:focus {
background: #6F2648;
}
}
.institute-nav__item-name {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.01125em;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
@media all and (min-width: 48em) {
.institute-nav__item-name {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
letter-spacing: 0.01111111em;
}
}
.institute-nav__item-text {
margin-top: 0;
}
@media all and (min-width: 48em) {
.institute-nav__item--stacked {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
}
}
.institute-nav__item--stacked h3 {
margin-top: 0;
}
@media all and (min-width: 62em) {
.institute-nav__item--stacked-footer {
flex-flow: row nowrap;
}
}
.institute-sub-nav-wrapper {
padding: 1.875rem 1.25rem;
}
.institute-sub-nav {
display: none;
margin-top: 0;
padding-left: 0;
list-style: none;
flex-flow: row wrap;
justify-content: space-around;
}
.institute-sub-nav.is-active {
display: flex;
}
.institute-sub-nav--header .institute-nav__item-title,
.institute-sub-nav--header .institute-nav__item-name {
color: inherit;
}
.institute-nav__item-title {
display: none;
}
@media all and (min-width: 48em) {
.institute-nav__item-title {
font-size: 10px;
font-size: 0.625rem;
line-height: 1;
letter-spacing: -0.01em;
display: block;
margin-bottom: 15px;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
text-transform: uppercase;
}
}
@media all and (max-width: 47.9375em) {
.mobile-nav {
display: none;
position: fixed;
z-index: 30;
top: 0;
left: 0;
height: 100%;
padding: 5rem 0;
border: 0;
background-color: #274B64;
}
.mobile-nav ul {
flex-direction: column;
}
.mobile-nav a {
font-size: 1.5rem;
color: #fff !important;
}
.main-content:after {
content: "";
position: fixed;
z-index: 10;
top: 0;
left: 0;
right: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.75);
}
.institute-nav {
position: relative;
flex-direction: column;
z-index: 0 !important;
}
.burger-icon {
fill: #274B64;
}
.burger-icon-transition svg {
fill: #fff;
}
}
.programs-nav {
margin-top: 2rem;
}
.instituteSubNav__drawer {
display: none;
}
@media all and (min-width: 48em) {
.instituteSubNav__drawer {
display: block;
}
}
.institute-subnav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
width: 100%;
padding: 1.875rem 1.25rem;
background-color: #f5f2ec;
border-top: 0.625rem solid;
}
@media all and (max-width: 61.9375em) {
.institute-subnav {
flex-direction: column;
}
}
.left-hand-nav__list-item .is-current {
background-color: #656a6e;
color: #fff;
}
.left-hand-nav__list-item .is-current:before {
border-left-color: #656a6e;
}
.institute-subnav.international-and-comparative-law {
color: #217053;
}
.institute-subnav.international-and-comparative-law .left-hand-nav__list-item .is-current {
background-color: #217053;
color: #fff;
}
.institute-subnav.international-and-comparative-law .left-hand-nav__list-item .is-current:before {
border-left-color: #217053;
}
.institute-subnav.law-enforcement-administration {
color: #274a63;
}
.institute-subnav.law-enforcement-administration .left-hand-nav__list-item .is-current {
background-color: #274a63;
color: #fff;
}
.institute-subnav.law-enforcement-administration .left-hand-nav__list-item .is-current:before {
border-left-color: #274a63;
}
.institute-subnav.energy-law {
color: #E49546;
}
.institute-subnav.energy-law .left-hand-nav__list-item .is-current {
background-color: #E49546;
color: #fff;
}
.institute-subnav.energy-law .left-hand-nav__list-item .is-current:before {
border-left-color: #E49546;
}
.institute-subnav.transnational-arbitration {
color: #74B0BD;
}
.institute-subnav.transnational-arbitration .left-hand-nav__list-item .is-current {
background-color: #74B0BD;
color: #fff;
}
.institute-subnav.transnational-arbitration .left-hand-nav__list-item .is-current:before {
border-left-color: #74B0BD;
}
.institute-subnav.law-and-technology {
color: #B44252;
}
.institute-subnav.law-and-technology .left-hand-nav__list-item .is-current {
background-color: #B44252;
color: #fff;
}
.institute-subnav.law-and-technology .left-hand-nav__list-item .is-current:before {
border-left-color: #B44252;
}
.institute-subnav.criminal-justice {
color: #9DB351;
}
.institute-subnav.criminal-justice .left-hand-nav__list-item .is-current {
background-color: #9DB351;
color: #fff;
}
.institute-subnav.criminal-justice .left-hand-nav__list-item .is-current:before {
border-left-color: #9DB351;
}
.institute-subnav.other-programs {
color: #963D68;
}
.institute-subnav.other-programs .left-hand-nav__list-item .is-current {
background-color: #963D68;
color: #fff;
}
.institute-subnav.other-programs .left-hand-nav__list-item .is-current:before {
border-left-color: #963D68;
}
.institute-subnav__header {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
margin-right: 3.75rem;
color: inherit;
}
@media all and (max-width: 61.9375em) {
.institute-subnav__header {
max-width: none;
margin-bottom: 1.875rem;
padding: 0;
}
}
.institute-subnav__header .social-icons a {
width: 1.875rem;
height: 1.875rem;
}
.law-enforcement-administration .institute-subnav__header .social-icons a {
background: #274B64;
}
.energy-law .institute-subnav__header .social-icons a {
background: #E49546;
}
.international-and-comparative-law .institute-subnav__header .social-icons a {
background: #217053;
}
.transnational-arbitration .institute-subnav__header .social-icons a {
background: #74B0BD;
}
.law-and-technology .institute-subnav__header .social-icons a {
background: #B44252;
}
.criminal-justice .institute-subnav__header .social-icons a {
background: #9DB351;
}
.other-programs .institute-subnav__header .social-icons a {
background: #963D68;
}
.law-enforcement-administration .institute-subnav__header .social-icons a:hover {
background: #1D3B4F;
}
.energy-law .institute-subnav__header .social-icons a:hover {
background: #B6712C;
}
.international-and-comparative-law .institute-subnav__header .social-icons a:hover {
background: #1B5D45;
}
.transnational-arbitration .institute-subnav__header .social-icons a:hover {
background: #5894A1;
}
.law-and-technology .institute-subnav__header .social-icons a:hover {
background: #9B3544;
}
.criminal-justice .institute-subnav__header .social-icons a:hover {
background: #7D942E;
}
.other-programs .institute-subnav__header .social-icons a:hover {
background: #6F2648;
}
.institute-subnav__header-link {
width: 100%;
padding-top: 1rem;
border-top: 1px #D6D1C7 solid;
}
.institute-subnav__header-link a {
color: inherit;
text-decoration: none;
text-transform: uppercase;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 0.75rem;
}
.institute-subnav__body {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
flex: 1 1 auto;
width: 100%;
}
.institute-subnav__body > ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
}
@media (max-width: 30em) {
.institute-subnav__body > ul {
flex-direction: column;
}
}
.institute-subnav__col {
flex: 1 1 33.3333%;
margin-right: 3.75rem;
}
.institute-subnav__col--large {
flex: 1 1 66.6666%;
}
.institute-subnav__col--large .institute-subnav__list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.institute-subnav__col--large .institute-subnav__list li {
flex: 1 0 50%;
}
.institute-subnav__list {
list-style: none;
padding-left: 0;
color: #282828;
}
.institute-subnav__list li {
padding-right: 0.875rem;
}
.institute-subnav__list li:not(:last-child) {
margin-bottom: 1rem;
}
.institute-subnav__list a {
text-decoration: none;
text-transform: capitalize;
font-size: 0.875rem;
color: #282828;
}
.institute-subnav__section-title {
margin-top: 0;
padding-bottom: 0.625rem;
border-bottom: 1px #D6D1C7 solid;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 0.625rem;
text-transform: uppercase;
color: #656a6e;
}
.institute-sub-nav__col {
margin-bottom: 1.875rem;
padding: 0 5px;
}
.institute-sub-nav__col :not(:last-child) {
padding-right: 3rem;
}
@media all and (min-width: 48em) {
.institute-sub-nav__col {
margin-top: 0;
width: 25%;
}
.institute-sub-nav[data-cols="3"] .institute-sub-nav__col {
width: 33%;
}
}
.institute-sub-nav__col-list {
margin: 0;
padding: 0;
list-style: none;
}
.institute-sub-nav__col-list li {
margin-top: 0.9375rem;
line-height: 1;
}
.institute-sub-nav__col-list li:first-of-type {
margin-top: 0;
}
.institute-sub-nav__col-link {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
color: #29333A;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
@media all and (min-width: 48em) {
.institute-nav__item {
height: 100%;
}
}
.instituteSubNav {
flex: 1 1 16.6667%;
}
@media all and (max-width: 47.9375em) {
.instituteSubNav__parent {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.instituteSubNav__parent-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #fff;
}
.instituteSubNav__parent-link:focus,
.instituteSubNav__parent-link:hover {
color: #fff !important;
text-decoration: none;
}
.institute-nav__item .instituteSubNav__parent-link {
padding: 1.5625rem 0.9375rem;
}
@media all and (min-width: 48em) {
.institute-nav__item .instituteSubNav__parent-link {
padding: 2.5rem 1.125rem 0 1.125rem;
}
}
@media all and (min-width: 48em) {
.institute-nav__item--stacked .instituteSubNav__parent-link {
padding: 1.25rem;
}
}
.instituteSubNav__parent-link > img {
max-width: 320px;
}
.instituteSubNav__dropdown {
display: none;
}
@media all and (max-width: 47.9375em) {
.instituteSubNav__dropdown.is-revealed {
display: block;
}
}
.instituteSubNav__dropdown--passive {
display: block;
width: 25%;
text-align: right;
border: none;
background: transparent;
padding-right: 0.375rem;
}
.instituteSubNav__dropdown--passive svg {
color: #fff;
transform: rotate(0);
transition: transform 100ms ease;
}
@media all and (min-width: 48em) {
.instituteSubNav__dropdown--passive {
display: none;
}
}
.instituteSubNav__dropdown-reveal {
width: auto;
height: auto;
margin: 0;
line-height: normal;
text-align: center;
text-decoration: none;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
position: relative;
-webkit-appearance: none;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
outline: 0;
overflow: visible;
cursor: pointer;
vertical-align: middle;
display: inline-block;
display: block;
width: 25%;
text-align: right;
border: none;
background: transparent;
padding-right: 0.375rem;
}
a.instituteSubNav__dropdown-reveal {
text-decoration: none;
}
a.instituteSubNav__dropdown-reveal:hover {
text-decoration: none;
}
a.instituteSubNav__dropdown-reveal:hover,
a.instituteSubNav__dropdown-reveal:active,
a.instituteSubNav__dropdown-reveal:focus {
color: #fff;
}
.instituteSubNav__dropdown-reveal svg {
color: #fff;
transform: rotate(0);
transition: transform 100ms ease;
}
.instituteSubNav__dropdown-reveal.is-revealed svg {
transform: rotate(180deg);
}
@media all and (min-width: 48em) {
.instituteSubNav__dropdown-reveal {
display: none;
}
}
.instituteSubNav__dropdown-list {
padding-left: 0;
list-style: none outside none;
margin-top: 0;
}
.instituteSubNav__dropdown-item {
border-width: 1px 0;
border-style: solid;
}
.law-enforcement-administration .instituteSubNav__dropdown-item {
border-color: #274B64;
}
.energy-law .instituteSubNav__dropdown-item {
border-color: #E49546;
}
.international-and-comparative-law .instituteSubNav__dropdown-item {
border-color: #217053;
}
.transnational-arbitration .instituteSubNav__dropdown-item {
border-color: #74B0BD;
}
.law-and-technology .instituteSubNav__dropdown-item {
border-color: #B44252;
}
.criminal-justice .instituteSubNav__dropdown-item {
border-color: #9DB351;
}
.other-programs .instituteSubNav__dropdown-item {
border-color: #963D68;
}
.law-enforcement-administration .instituteSubNav__dropdown-item {
background: #1D3B4F;
}
.energy-law .instituteSubNav__dropdown-item {
background: #B6712C;
}
.international-and-comparative-law .instituteSubNav__dropdown-item {
background: #1B5D45;
}
.transnational-arbitration .instituteSubNav__dropdown-item {
background: #5894A1;
}
.law-and-technology .instituteSubNav__dropdown-item {
background: #9B3544;
}
.criminal-justice .instituteSubNav__dropdown-item {
background: #7D942E;
}
.other-programs .instituteSubNav__dropdown-item {
background: #6F2648;
}
.instituteSubNav__dropdown-link {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.71428571;
letter-spacing: 0.01142857em;
display: block;
padding: 0.625rem 0.9375rem;
color: #fff;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
text-decoration: none;
}
.instituteSubNav__dropdown-link:hover,
.instituteSubNav__dropdown-link:focus,
.instituteSubNav__dropdown-link:active {
color: #fff !important;
text-decoration: underline;
}
.sidebar__heading {
margin-top: 0;
margin-bottom: .5rem;
color: #29333A;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.25rem;
}
@media all and (max-width: 47.9375em) {
.sidebar__heading {
display: flex;
align-items: center;
justify-content: space-between;
}
}
@media all and (min-width: 48em) {
.sidebar__trigger {
display: none;
}
}
.sidebar__heading-link {
color: inherit;
text-decoration: none;
text-transform: uppercase;
}
.sidebar__list {
margin-top: 0;
padding-left: 0;
list-style: none;
color: #29333A;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1rem;
}
@media all and (max-width: 47.9375em) {
.sidebar__list {
display: none;
}
.sidebar__list.is-revealed {
display: block;
}
}
.sidebar__list li {
padding: .5rem 0;
}
.sidebar__list li ul {
margin: 0 auto;
padding-left: 1rem;
list-style: none;
}
.sidebar__list li ul li {
padding-bottom: 0;
}
.sidebar__list a {
text-decoration: none;
color: inherit;
}
.back-to-top {
display: block;
margin: 0 auto;
text-align: center;
text-decoration: none;
color: #274B64;
}
.back-to-top img {
vertical-align: middle;
max-width: 1.625rem;
}
.back-to-top span {
vertical-align: middle;
}
.sidebarNav__parent-link:hover,
.sidebarNav__parent-link:focus {
color: #115974;
}
@media all and (max-width: 47.9375em) {
.sidebarNav__parent-title {
width: 1px;
height: 1px;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
padding: 0;
border-bottom: none;
}
.sidebarNav__parent-title.focusable:active,
.sidebarNav__parent-title.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .sidebarNav__parent-title a,
body:hover .sidebarNav__parent-title input,
body:hover .sidebarNav__parent-title button {
display: none;
}
}
.sidebarNav__parent-link > .sidebarNav__parent-title {
color: #29333A;
}
.sidebarNav__dropdown-trigger {
color: #fff;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
display: flex;
width: 100%;
margin: -0.75rem 0;
padding: 1em 1em 26px;
border: none;
border-radius: 0;
background-color: #29333A;
justify-content: space-between;
}
.sidebarNav__dropdown-trigger svg {
transform: rotate(0);
transition: 100ms ease;
}
.sidebarNav__dropdown-trigger.is-revealed svg {
transform: rotate(180deg);
}
@media all and (min-width: 48em) {
.sidebarNav__dropdown-trigger {
display: none;
}
}
.sidebarNav__dropdown-trigger:focus {
outline: none;
}
.sidebarNav__container {
padding-top: 1em;
margin-top: 0;
}
@media all and (min-width: 48em) {
.sidebarNav__container {
margin-top: 0;
padding-top: 0;
}
}
.sidebarNav__list-link,
.sidebarNav__sublist-link {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
color: #29333A;
display: block;
padding: 0.625rem 1.875rem;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
position: relative;
}
.sidebarNav__list-link:after,
.sidebarNav__sublist-link:after {
content: '';
display: none;
position: absolute;
top: 0;
left: 0;
width: 0.625rem;
height: 100%;
background: #115974;
}
.sidebarNav__list-link.is-current,
.sidebarNav__sublist-link.is-current {
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.sidebarNav__list-link.is-current:after,
.sidebarNav__sublist-link.is-current:after {
display: block;
}
.sidebarNav__sublist {
margin-left: 1.75rem;
border-left: 0.125rem solid #29333A;
}
.sidebarNav__sublist-link {
padding: 0.625rem 0.9375rem;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.sidebarNav__actions {
margin-top: 0.625rem;
}
.marquee > * {
position: relative;
z-index: 10;
}
.marquee--bg {
background-image: url('/resources/images/hero-image.jpg');
background-size: cover;
position: relative;
}
.marquee--bg:before {
content: "";
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
@media all and (min-width: 30em) {
.marquee--bg:before {
background: linear-gradient(90deg, #edeae3 40%, rgba(243, 241, 237, 0.7) 65%, rgba(255, 255, 255, 0) 100%);
}
}
@media all and (max-width: 47.9375em) {
.marquee--bg:before {
background: linear-gradient(to top, #edeae3 0%, #eae8e4 50%, #eae8e4 70%, rgba(234, 232, 228, 0.75) 75%, rgba(233, 232, 228, 0.25) 90%, rgba(229, 229, 229, 0) 95%);
}
}
.marquee__area {
padding: 10rem 0 5rem;
}
@media all and (min-width: 48em) {
.marquee__area {
padding: 5rem;
}
}
.marquee__content {
max-width: 600px;
}
.marquee__content-title {
font-size: 64px;
font-size: 4rem;
line-height: 1;
letter-spacing: -0.03125em;
margin-top: 0;
font-family: "Proxima Nova Extrabold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
color: #274B64;
}
.marquee__content-tagline {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.20833333;
letter-spacing: 0.00833333em;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
color: #29333A;
}
.marquee__actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin: 5rem -1rem 0 -1rem;
border-top: 1px gray solid;
}
@media all and (max-width: 47.9375em) {
.marquee__actions {
margin: 5rem 0 0 0;
border-top: 0;
}
}
@media (max-width: 30em) {
.marquee__actions {
flex-direction: column;
justify-content: flex-start;
}
}
.marquee-action {
padding: 1rem;
text-decoration: none;
text-transform: uppercase;
}
.marquee-action:focus:after,
.marquee-action:active:after,
.marquee-action:hover:after {
left: 1em;
right: 1em;
}
@media all and (max-width: 47.9375em) {
.marquee-action {
width: 40%;
background-color: #177DA4;
color: #fff;
}
.marquee-action:focus,
.marquee-action:active,
.marquee-action:hover {
color: #fff;
background-color: #115974;
text-decoration: none;
}
}
@media (max-width: 30em) {
.marquee-action {
width: 100%;
}
.marquee-action:after {
content: " ";
position: absolute;
}
.marquee-action:first-child {
margin-right: 0;
margin-bottom: 1rem;
}
}
.basic-interior {
padding: 2rem 0;
}
.basic-interior .great-heading {
font-size: 42px;
font-size: 2.625rem;
line-height: 0.71428571;
font-size: 3rem;
line-height: 50px;
}
.basic-interior .great-heading--1 {
line-height: 45px;
margin-top: 0;
}
.basic-interior .great-sub-heading {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.25;
line-height: 2.8125rem;
font-size: 2.375rem;
}
.basic-interior .regular-heading {
font-size: 32px;
font-size: 2rem;
line-height: 0.625;
font-size: 1.625rem;
}
.basic-interior .small-heading {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
font-size: 1.25rem;
}
.basic-interior .mini-heading {
font-size: 24px;
font-size: 1.5rem;
line-height: 0.83333333;
}
.basic-interior .micro-heading {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.66666667;
font-size: 0.875rem;
}
.basic-interior h1 {
margin-top: 0px;
margin-bottom: 1.25rem;
}
.basic-interior h2 {
margin-top: 2.5rem;
margin-bottom: 1.25rem;
border-bottom: 1px #D6D1C7 solid;
padding-bottom: 0.3125rem;
}
.basic-interior h2.no-border {
border: none;
}
.basic-interior h2 a {
font-size: inherit;
}
.basic-interior h3 {
margin-bottom: 1.25rem;
}
.basic-interior h3 a {
font-size: inherit;
}
.basic-interior h4 {
margin-top: 0;
}
.basic-interior h4 a {
font-size: inherit;
}
.basic-interior .form-title,
.basic-interior .heading,
.basic-interior .alt-heading {
margin-top: 0;
margin-bottom: 1.25rem;
color: #274B64;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.25;
line-height: 2.8125rem;
font-size: 2.375rem;
text-transform: uppercase;
border-bottom: none;
}
.basic-interior .alt-heading {
margin-bottom: 0;
}
.basic-interior.fourohfour {
padding: 4em 0;
}
@media all and (max-width: 47.9375em) {
.basic-interior-inner .basic-interior-sidebar-left {
display: none;
}
.basic-interior-inner .basic-interior-sidebar-right {
display: block;
}
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
.basic-interior-inner .basic-interior-sidebar-left {
display: none;
}
.basic-interior-inner .basic-interior-sidebar-right {
display: block;
}
}
@media all and (min-width: 62em) {
.basic-interior-inner .basic-interior-sidebar-right {
display: none;
}
}
@media all and (min-width: 62em) {
.basic-interior__body {
padding-left: 2.5em;
}
}
.basic-interior__body > .media-object {
margin-top: 0 !important;
margin-bottom: 1.25rem;
}
.basic-interior__body p {
margin-top: 0;
margin-bottom: 1.25rem;
color: #29333A;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1rem;
}
.basic-interior__body p.minion-text {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.66666667;
font-size: 0.875rem;
line-height: 1.125rem;
}
.basic-interior__body ul {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1rem;
padding-left: 0;
padding-left: 2.5em;
}
.basic-interior__body .slider-header__title {
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.625rem;
}
@media all and (max-width: 61.9375em) {
}
.basic-interior__sidebar {
margin-bottom: 1rem;
padding: 0.75rem 0;
border-top: 0.75rem solid;
border-color: #29333A;
background-color: #f5f2ec;
}
@media all and (min-width: 48em) {
.basic-interior__sidebar {
padding: 0 0 1.25rem 0;
}
}
@media all and (min-width: 62em) {
.basic-interior__sidebar.affix {
position: fixed;
top: 20px;
width: 242px;
}
}
div.media-object .desc {
font-size: 1rem;
}
div.media-object .desc p {
margin-top: 0;
margin-bottom: 1em;
}
div.media-object .desc .median-text {
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1rem;
}
.media-object--noflex {
display: block;
}
.membership-callout {
height: auto;
padding: 1.5rem 0 1.5rem 5.625rem;
border-top: .3125em solid #c0baad;
background: #edeae3 url('/resources/images/membership-callout-bg.jpg') no-repeat 0.625em center;
text-align: left;
}
.js .sponsorship-op {
padding: 1.25em 3.75em 1.25em 1.25em;
position: relative;
}
.js .sponsorship-op .reveal-target {
max-height: 0;
position: relative;
overflow: hidden;
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}
.js .sponsorship-op .reveal-target.is-current {
max-height: 8000px;
}
.js .sponsorship-op .reveal-target.is-current,
.js .sponsorship-op .reveal-target.is-visited {
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}
.js .sponsorship-op .trigger {
position: absolute;
right: 1.25em;
top: 1.25em;
}
.js .sponsorship-op .trigger.circular {
border: none;
outline: none;
}
.js .sponsorship-op .trigger.circular:after {
content: none;
}
.js .sponsorship-op .trigger.circular .icon {
top: 4px;
}
.js .sponsorship-op .trigger.circular.collapse .icon {
top: 2px;
}
.button.plain {
padding: 0;
background: 0;
border: 0;
text-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
.trigger {
width: 1em;
height: 1em;
margin: 0;
padding: .2777777777777778em .2777777777777778em .5555555555555556em .5555555555555556em;
position: absolute;
top: 0;
right: 0;
}
.trigger.button.plain {
padding: .2777777777777778em .2777777777777778em .5555555555555556em .5555555555555556em;
}
.trigger:after {
border: .25em solid transparent;
position: absolute;
content: "";
width: 0;
height: 0;
margin: 0;
padding: 0;
display: block;
}
.trigger .icon {
font-size: .55em;
line-height: 1;
position: absolute;
}
÷ .lte7 .trigger.expand .icon {
bottom: 0;
left: 0;
}
.trigger:active.expand:after {
top: .2777777777777778em;
right: .2777777777777778em;
}
.trigger:active.expand .icon {
bottom: 1em;
left: 1em;
}
.lte7 .trigger:active.expand .icon {
bottom: 0;
left: 0;
}
.trigger:active.collapse:after {
bottom: .5555555555555556em;
left: .5555555555555556em;
}
.trigger:active.collapse .icon {
top: .5em;
right: .5em;
}
.trigger.collapse:after {
bottom: .5555555555555556em;
left: .5555555555555556em;
}
.trigger.collapse .icon {
top: .5em;
right: .5em;
}
.trigger.circular {
width: 1.6666666666666667em;
height: 1.6666666666666667em;
padding: 0;
color: #c5c4bc;
background-color: #29333a;
top: .5555555555555556em;
right: .5555555555555556em;
-webkit-border-radius: 1000em;
-moz-border-radius: 1000em;
-o-border-radius: 1000em;
border-radius: 1000em;
}
.trigger.circular .icon {
font-size: 18px;
-webkit-text-size-adjust: none;
}
.trigger.circular.button.plain {
padding: 0;
}
.trigger.circular:hover,
.trigger.circular:focus {
color: #fff;
}
.trigger.circular.expand:after {
border-top-color: #c5c4bc;
border-right-color: #c5c4bc;
top: .5em;
right: .5em;
}
.trigger.circular.expand .icon {
bottom: 1px;
left: 2px;
}
.trigger.circular.collapse:after {
border-color: transparent;
border-left-color: #c5c4bc;
border-bottom-color: #c5c4bc;
bottom: .5em;
left: .5em;
}
.trigger.circular.expand .icon {
color: #fff;
top: 1px;
left: 0;
width: 100%;
height: 100%;
line-height: 1;
font-size: 22px;
}
.trigger.circular.collapse .icon {
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 1;
font-size: 22px;
color: #fff;
}
.plain.circular.trigger.button:after {
content: none;
}
.w-2of5 {
width: 40%;
}
.w-3of5 {
width: 60%;
}
.no-generatedcontent .trigger.circular.expand .icon {
bottom: 35%;
left: 38%;
}
.no-generatedcontent .trigger.circular.collapse .icon {
top: 35%;
right: 38%;
}
.tabs .nav {
position: relative;
border-bottom: .3125em solid #c0baad;
}
.tabs ul.nav {
padding-left: 0;
}
.tabs .nav a {
padding: 0 .5625em;
color: #c5c4bc;
border-left: .0625em solid #c0baad;
}
.tabs .nav a:hover,
.tabs .nav a:focus {
color: #177da4;
}
.tabs .nav li:first-child a {
padding-left: 0;
border-left: none;
}
.tabs .nav .is-current a {
color: #177da4;
}
.tabs .nav .is-current a:after {
border: .625em solid transparent;
border-top-color: #c0baad;
position: absolute;
bottom: -1.875em;
left: 50%;
content: "";
width: 0;
height: 0;
margin: 0;
padding: 0;
display: block;
margin-left: -0.625em;
}
.tabs .nav.forceful .is-current a:after {
bottom: -1.5625em;
}
.tabs .nav.big {
width: 100%;
display: table;
margin-top: 2.5em;
}
.tabs .nav.big li {
display: table-cell;
}
.no-display-table .tabs .nav.big li {
float: left;
}
.tabs .nav.big li:first-child a {
padding-left: 1.125em;
}
.tabs .nav.big li {
background: #f5f2ec;
}
.tabs .nav.big a {
padding: .9375em 1.125em;
display: block;
text-transform: uppercase;
background: #f5f2ec;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", Arial, sans-serif;
}
.tabs .nav.big .is-current {
position: relative;
}
.tabs .nav.big .is-current,
.tabs .nav.big .is-current a {
background-color: #edeae3;
}
.tabs .nav.big .is-current a:after {
margin-left: 0;
left: 1.125em;
bottom: -1.5625em;
}
.generatedcontent .tabs .nav a {
border-left: none;
}
.generatedcontent .tabs .nav a:before {
content: "";
width: 1px;
height: 11px;
display: block;
background: #c0baad;
position: absolute;
left: 0;
top: 1px;
}
.generatedcontent .tabs .nav.forceful a:before {
top: 4px;
}
.generatedcontent .tabs .nav li:first-child a:before {
display: none;
}
.generatedcontent .tabs .nav.big li:first-child {
border-left: none;
}
.generatedcontent .tabs .nav.big li {
border-left: 1px solid #c0baad;
}
.generatedcontent .tabs .nav.big a:before {
display: none;
}
.interior .body-content .tabs .nav a {
color: #c5c4bc;
}
.interior .body-content .tabs .nav a:hover,
.interior .body-content .tabs .nav a:focus,
.interior .body-content .tabs .nav a.is-current {
color: #177da4;
}
.interior .body-content .tabs .nav .is-current a {
color: #177da4;
}
.event-list .event-image {
vertical-align: top;
margin-top: 0px;
margin-right: 10px;
display: inline-block;
}
.event-list .event-image + .event-content {
display: inline-block;
margin-top: 0px;
}
.event-list .event + .event {
margin-top: 3.75rem;
}
.program-asides {
margin-top: 2.5rem;
}
.ptl strong.heading {
color: #29333A;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.events-calendar__header {
padding-top: 3.75rem;
padding-bottom: 1.25rem;
border-bottom: 1px #8C9398 solid;
}
.events-filter {
margin-bottom: 2.5rem;
}
.events-filter--homepage {
margin: 3.125rem auto 0;
}
.event-card-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
}
.event-card-list .card {
width: 24%;
margin-right: 1%;
margin-bottom: 1%;
}
.event-card-list .card .card__subtitle {
font-size: 1rem;
}
@media all and (max-width: 61.9375em) {
.event-card-list {
flex-direction: column;
}
.event-card-list .card {
width: 100%;
margin-right: 0;
margin-bottom: 0.625rem;
}
}
.event__location-label {
font-size: 1.125rem;
text-transform: uppercase;
}
.filter-months {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
padding-left: 0;
list-style: none;
}
.filter-months li {
flex: 0 1 33.3333%;
text-align: center;
}
.filter-timeline__buttons {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-items: flex-start;
margin-top: 1.25rem;
}
.filter-timeline__buttons button {
border: 0;
color: #274B64;
}
.posters {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
}
.posters > * {
flex: 0 1 50%;
margin-bottom: 2.5rem;
}
.posters > * > * {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
}
.poster h3.title {
background-image: none !important;
margin-top: 0;
margin-bottom: 1.25rem;
color: #177da4;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.25rem;
}
.poster .event-details a.button.bullet {
display: inline-block;
border-radius: .1875em;
}
.poster .event-details a.button.bullet:after {
display: none;
}
.event-highlights {
margin-top: 1.25rem;
border-bottom: 1px #D6D1C7 solid;
}
.event-highlights__header {
text-align: center;
position: relative;
}
.event-highlights__header:after {
content: "";
width: 100%;
height: 1px;
background: #D6D1C7;
position: absolute;
bottom: 1.25rem;
left: 0;
right: 0;
}
.event-highlights__title {
display: inline-block;
position: relative;
z-index: 10;
padding: 0 0.5rem;
text-align: center;
font-family: "Proxima Nova Light", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.625rem;
color: #b9c1c6;
background-color: #fff;
}
.event-highlights__list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
list-style: none;
margin: 0.875rem auto 1.25rem;
padding-left: 0;
}
.event-highlights__list li {
padding: 0.625rem;
flex: 1 1 33.3333%;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.25rem;
}
.event-highlights__list li p {
margin-top: 0;
}
.event-nav {
padding-left: 0;
padding-right: 0;
}
.event-nav .title {
margin-top: 1rem;
padding: 0.1875rem 1.25rem 0.25rem 1.25rem;
}
.event-nav ul {
margin-top: 0;
list-style: none;
}
.event-nav ul li {
padding: 0.1875rem 0;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1rem;
}
.event-nav ul li a {
color: inherit;
text-decoration: none;
display: block;
padding: 0.1875rem 1.25rem 0.25rem 1.25rem;
}
.event-description h2 {
margin-top: 0;
border: 0;
}
.callout.quote {
border: none;
padding: 0;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-style: italic;
text-align: left;
margin: 3.75rem 0;
}
.callout.quote p {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.33333333;
margin: 0;
padding: 0;
color: #29333A;
position: relative;
}
.law-enforcement-administration .callout.quote,
.law-enforcement-administration .callout.quote p {
color: #1D3B4F;
}
.energy-law .callout.quote {
color: #B6712C;
}
.international-and-comparative-law .callout.quote {
color: #1B5D45;
}
.transnational-arbitration .callout.quote {
color: #5894A1;
}
.law-and-technology .callout.quote {
color: #9B3544;
}
.criminal-justice .callout.quote {
color: #7D942E;
}
.other-programs .callout.quote {
color: #6F2648;
}
.callout {
text-align: center;
border-top: .3125em solid #e4e4e1;
border-bottom: .3125em solid #e4e4e1;
padding: 1.25em .4166666666666667em;
border-top-width: .20833333333333334em;
border-bottom-width: .20833333333333334em;
font-size: 24px;
font-size: 1.5rem;
line-height: 1.0416666666666667;
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
margin-top: 1.875em;
}
.callout p {
margin-bottom: 0;
}
.callout a:not(.button) {
font-size: 1.5rem;
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-style: normal;
color: #177DA4;
text-decoration: none;
}
.callout a:not(.button):hover,
.callout a:not(.button):focus {
color: #115974;
}
.callout .cite {
font-size: 1rem;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
color: #656a6e;
}
.callout.callout--small p {
margin-top: 0;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1rem;
text-align: left;
color: #29333A;
line-height: 1.4;
}
.callout.callout--small a {
padding-left: 0.5rem;
font-size: 1rem;
}
#share-event,
#event-info {
display: none;
}
.event-grid {
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin: -1rem -0.5rem;
}
@media all and (min-width: 48em) {
.event-grid {
margin-bottom: 5.625rem;
}
}
.event-col {
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
width: 100%;
}
@media all and (min-width: 48em) {
.event-col {
width: 33%;
}
}
.event-card {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
flex: 1 1 20%;
margin: 1rem 0.5rem;
}
.event-card .card__body {
flex-grow: 1;
}
.event-card .card__actions {
display: block;
padding: 0 1.25rem 1.875rem;
width: 100%;
}
@media all and (min-width: 48em) {
.event-card .card__actions {
padding: 0 3.4375rem 1.875rem;
}
}
.event-card .card__actions .button,
.event-card .card__actions .button__secondary {
display: block;
}
.event-card .card__actions .button__secondary {
margin-top: 0.5rem;
}
.event__image {
width: 100%;
height: auto;
}
.noEvents {
margin-top: 1.25rem;
}
.news-item .news-title {
margin-top: 0;
}
.news-title a {
font-size: inherit;
}
.card-slider.owl-carousel {
width: 95%;
margin: 4rem auto;
}
.noEvents + .card-slider.owl-carousel {
margin-top: 2em;
}
.marquee--no-hero {
margin-bottom: 2.5rem;
}
.marquee--no-hero .slider-header-wrapper {
margin-top: 3.75rem;
}
.events-filter--row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
@media all and (max-width: 47.9375em) {
.events-filter--row {
flex-direction: column;
}
.events-filter--row .select {
width: 100%;
max-width: 240px;
}
.events-filter--row .filter-helper-text {
margin: .5rem 0;
}
}
.slider-header {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
background-color: #fff;
}
.slider-header__padding {
width: 95%;
border-bottom: 1px #D6D1C7 solid;
text-align: center;
}
.slider-header__icon {
transform: translateY(-50%);
max-width: 75px;
}
.slider-header__title {
margin-top: 0;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.625rem;
line-height: 1;
color: #29333A;
}
.slider-header__title-link {
color: #29333A;
}
.slider-header__link {
display: inline-block;
margin-top: 0;
padding: 0 1rem;
background-color: #fff;
color: #274B64;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 0.875rem;
text-transform: uppercase;
transform: translateY(55%);
}
.slider {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
margin-top: 4rem;
}
.slider .card {
margin: 0 1rem;
}
.owl-carousel {
width: 92%;
margin: 4rem auto 0;
}
.owl-stage-outer {
border-left: 1px #e9e6df solid;
border-right: 1px #e9e6df solid;
}
.owl-stage {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
}
.owl-item {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
}
.owl-item .card {
height: 100%;
min-height: 16.875rem;
margin: 0;
}
.owl-nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
transform: translateY(-150px);
}
.owl-nav img {
width: 40px;
height: 40px;
}
@media all and (max-width: 47.9375em) {
.owl-nav img {
width: 8vw;
height: 8vw;
}
}
.owl-prev {
position: absolute;
left: -40px;
}
@media all and (max-width: 47.9375em) {
.owl-prev {
left: -7.5vw;
}
}
.owl-next {
position: absolute;
right: -40px;
}
@media all and (max-width: 47.9375em) {
.owl-next {
right: -7.5vw;
}
}
.owl-next.disabled,
.owl-prev.disabled {
opacity: 50%;
cursor: not-allowed;
}
.slide--400 {
width: 275px;
}
@media all and (min-width: 48em) {
.slide--400 {
width: 400px;
}
}
.slide--230 {
width: 230px;
}
.card {
position: relative;
background-color: #f5f2ec;
border-top: 10px solid;
overflow: hidden;
font-size: 1rem;
}
.card.cardHeader {
overflow: initial;
}
.card.law-enforcement-administration {
border-top-color: #274B64;
}
.card.energy-law {
border-top-color: #E49546;
}
.card.international-and-comparative-law {
border-top-color: #217053;
}
.card.transnational-arbitration {
border-top-color: #74B0BD;
}
.card.law-and-technology {
border-top-color: #B44252;
}
.card.criminal-justice {
border-top-color: #9DB351;
}
.card.other-programs {
border-top-color: #963D68;
}
.card:hover {
background-color: #EDEAE3;
}
.card.no-hover:hover {
background-color: #f5f2ec;
}
.card.overflow-visible {
overflow: visible;
}
.card .card__actions [class*="button"]:hover,
.card .card__actions [class*="button"]:focus {
color: #fff !important;
}
.card__header {
padding: 3.125rem 1.875rem 0;
}
.card__header .card__row {
border-bottom: 1px #d6d1c7 solid;
padding-bottom: 1.25rem;
}
@media all and (max-width: 47.9375em) {
.card__header {
padding-bottom: 1rem;
}
}
.card__body {
margin: 1.25rem 1.875rem 0;
border-top: 1px solid #D6D1C7;
padding: 1.25rem 0 1.875rem;
}
.card__watermark {
display: none;
}
@media all and (min-width: 48em) {
.card__watermark {
font-size: 10px;
font-size: 0.625rem;
line-height: 1;
letter-spacing: 0.062em;
position: absolute;
top: 0;
left: 0;
display: inline-block;
padding: 0.5rem 0.9375rem 0.5rem 1.875rem;
color: #fff;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
text-transform: uppercase;
}
.law-enforcement-administration .card__watermark {
background: #1D3B4F;
}
.energy-law .card__watermark {
background: #B6712C;
}
.international-and-comparative-law .card__watermark {
background: #1B5D45;
}
.transnational-arbitration .card__watermark {
background: #5894A1;
}
.law-and-technology .card__watermark {
background: #9B3544;
}
.criminal-justice .card__watermark {
background: #7D942E;
}
.other-programs .card__watermark {
background: #6F2648;
}
.card__watermark .card--events-calendar {
top: calc(100% - 50px);
}
}
.card__copy {
margin-top: 0;
}
.card__links,
.card__links:hover {
display: block;
text-decoration: none;
color: inherit;
}
.card__year {
color: #656a6e;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.125rem;
margin-top: 0;
}
.card__dates {
font-size: 18px;
font-size: 1.125rem;
line-height: 1;
margin-top: 0;
color: #29333A;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.law-enforcement-administration .card__title {
color: #274B64;
}
.energy-law .card__title {
color: #E49546;
}
.international-and-comparative-law .card__title {
color: #217053;
}
.transnational-arbitration .card__title {
color: #74B0BD;
}
.law-and-technology .card__title {
color: #B44252;
}
.criminal-justice .card__title {
color: #9DB351;
}
.other-programs .card__title {
color: #963D68;
}
.law-enforcement-administration .card__title:hover,
.law-enforcement-administration .card__title:focus {
color: #1D3B4F;
}
.energy-law .card__title:hover,
.energy-law .card__title:focus {
color: #B6712C;
}
.international-and-comparative-law .card__title:hover,
.international-and-comparative-law .card__title:focus {
color: #1B5D45;
}
.transnational-arbitration .card__title:hover,
.transnational-arbitration .card__title:focus {
color: #5894A1;
}
.law-and-technology .card__title:hover,
.law-and-technology .card__title:focus {
color: #9B3544;
}
.criminal-justice .card__title:hover,
.criminal-justice .card__title:focus {
color: #7D942E;
}
.other-programs .card__title:hover,
.other-programs .card__title:focus {
color: #6F2648;
}
.cardHeader .card__title {
font-family: "Proxima Nova Extrabold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.card__subtitle {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3;
}
.law-enforcement-administration .card__subtitle {
color: #274B64;
}
.energy-law .card__subtitle {
color: #E49546;
}
.international-and-comparative-law .card__subtitle {
color: #217053;
}
.transnational-arbitration .card__subtitle {
color: #74B0BD;
}
.law-and-technology .card__subtitle {
color: #B44252;
}
.criminal-justice .card__subtitle {
color: #9DB351;
}
.other-programs .card__subtitle {
color: #963D68;
}
.card__subtitle--spaced {
margin-top: 20px;
}
.card__footer {
font-size: 12px;
font-size: 0.75rem;
line-height: 2;
margin-top: 1.25rem;
color: #29333A;
text-transform: uppercase;
}
.card__actions {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: stretch;
}
@media all and (max-width: 47.9375em) {
.card__actions {
flex-wrap: wrap;
}
}
.card__actions button,
.card__actions .button {
flex: 1 0 25%;
text-align: center;
}
@media all and (max-width: 61.9375em) {
.card__actions button,
.card__actions .button {
flex: 1 1 50%;
}
}
@media all and (max-width: 61.9375em) {
.card__actions.card__row {
align-items: stretch !important;
}
}
.card__action-bar > .button {
display: flex;
align-items: center;
justify-content: center;
}
@media all and (min-width: 48em) {
.card__action-bar > .button {
padding: 0;
}
.card__action-bar > .button:hover {
padding: 0;
}
}
@media all and (min-width: 62em) {
.card__action-bar > .button {
flex: 1 0 auto;
min-width: 190px;
}
}
@media all and (min-width: 48em) {
.card__action-bar {
height: 3.125rem;
}
}
.card--feature {
max-width: none;
margin-top: 2.5rem;
}
.card--feature .card__header {
color: #29333A;
}
@media all and (max-width: 61.9375em) {
.card--feature .card__header .card__row {
padding-bottom: 1rem;
}
}
.card--feature .card__title-lead {
font-size: 1.625rem;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.card--feature .card__title {
margin-bottom: 0;
padding-top: 0;
font-size: 3rem;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.card--feature.card--single-event .card__title {
padding-top: 1.25rem;
}
.card__row {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.card__row .card__col {
flex: 1 0 25%;
}
@media all and (min-width: 48em) {
.card__row .card__col {
padding-left: 1rem;
}
.card__row .card__col:first-child {
flex: 1 0 50%;
padding-left: 0;
}
}
@media all and (max-width: 47.9375em) {
.card__row {
flex-direction: column;
align-items: flex-start !important;
}
}
.card__city {
font-size: 0.875rem;
text-transform: uppercase;
color: #29333A;
}
.card__address {
font-size: 0.875rem;
color: #29333A;
}
.f-align--end {
align-items: flex-end;
}
.f-align--center {
align-items: center;
}
.inst-el {
position: absolute;
bottom: 7rem;
right: -4.5rem;
transform: rotate(90deg);
text-align: right;
font-size: 3.75rem;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
line-height: .8;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.03);
}
.card--list {
max-width: 230px;
}
.card--list .card__header {
padding: 2rem 2rem 0;
}
.card--list .card__title {
margin-bottom: 0;
padding: 0 0 1rem;
color: #29333A;
font-family: "Proxima Nova Light", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
border-bottom: 1px #e6e4df solid;
}
.card--list .card__body {
padding: 0 2rem 2rem;
}
.card--list ul {
list-style: none;
padding: 0;
}
.card--list ul li:not(:last-child) {
margin-bottom: 1rem;
}
@media all and (max-width: 61.9375em) {
.card__subtitle {
font-size: 1.05rem;
}
}
.card-error--spaced {
margin-top: 40px;
}
.save-the-date,
.share-an-event {
fill: #fff;
}
.cardHeader {
position: relative;
}
.cardHeader__flex {
padding: 3.125rem 0.9375rem 0;
}
@media all and (min-width: 48em) {
.cardHeader__flex {
display: flex;
justify-content: space-between;
margin: 0 -1.125rem;
padding: 5rem 1.875rem 0;
}
.cardHeader__flex .cardHeader__headings {
flex: 0 0 auto;
width: 40%;
}
.cardHeader__flex .cardHeader__meta,
.cardHeader__flex .cardHeader__address {
flex: 0 0 auto;
width: 30%;
}
}
.cardHeader__flex .cardHeader__meta .callout.quote,
.cardHeader__flex .cardHeader__address .callout.quote {
margin-bottom: 0;
}
@media all and (min-width: 48em) {
.cardHeader__flex.recorded-program {
flex-wrap: wrap;
}
.cardHeader__flex.recorded-program .cardHeader__headings,
.cardHeader__flex.recorded-program .cardHeader__meta {
flex: 0 0 auto;
width: 50%;
}
.cardHeader__flex.recorded-program .cardHeader__address {
flex: 0 0 auto;
width: 100%;
}
}
@media all and (min-width: 48em) {
.cardHeader__flex-item {
padding: 0 1.125rem;
}
}
.cardHeader__actions {
margin-top: 0.9375rem;
}
.cardHeader__actions .share-event-button.is-current {
color: #fff !important;
}
@media all and (min-width: 48em) {
.cardHeader__actions {
margin-top: 3.75rem;
}
}
@media all and (min-width: 48em) {
.cardHeader__actions-flex {
display: flex;
justify-content: space-between;
}
}
@media all and (min-width: 48em) {
.cardHeader__actions-flex-item {
flex: 1 1 auto;
margin: 0;
}
}
.cardHeader__actions-link {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.21428571;
letter-spacing: 0.04285714em;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1.25rem;
color: #fff;
text-transform: uppercase;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.law-enforcement-administration .cardHeader__actions-link {
background: #274B64;
}
.energy-law .cardHeader__actions-link {
background: #E49546;
}
.international-and-comparative-law .cardHeader__actions-link {
background: #217053;
}
.transnational-arbitration .cardHeader__actions-link {
background: #74B0BD;
}
.law-and-technology .cardHeader__actions-link {
background: #B44252;
}
.criminal-justice .cardHeader__actions-link {
background: #9DB351;
}
.other-programs .cardHeader__actions-link {
background: #963D68;
}
.cardHeader__actions-link:focus,
.cardHeader__actions-link:hover,
.cardHeader__actions-link:active,
.cardHeader__actions-link.is-current {
color: #fff !important;
}
.law-enforcement-administration .cardHeader__actions-link:focus,
.law-enforcement-administration .cardHeader__actions-link:hover,
.law-enforcement-administration .cardHeader__actions-link:active,
.law-enforcement-administration .cardHeader__actions-link.is-current {
background: #1D3B4F;
}
.energy-law .cardHeader__actions-link:focus,
.energy-law .cardHeader__actions-link:hover,
.energy-law .cardHeader__actions-link:active,
.energy-law .cardHeader__actions-link.is-current {
background: #B6712C;
}
.international-and-comparative-law .cardHeader__actions-link:focus,
.international-and-comparative-law .cardHeader__actions-link:hover,
.international-and-comparative-law .cardHeader__actions-link:active,
.international-and-comparative-law .cardHeader__actions-link.is-current {
background: #1B5D45;
}
.transnational-arbitration .cardHeader__actions-link:focus,
.transnational-arbitration .cardHeader__actions-link:hover,
.transnational-arbitration .cardHeader__actions-link:active,
.transnational-arbitration .cardHeader__actions-link.is-current {
background: #5894A1;
}
.law-and-technology .cardHeader__actions-link:focus,
.law-and-technology .cardHeader__actions-link:hover,
.law-and-technology .cardHeader__actions-link:active,
.law-and-technology .cardHeader__actions-link.is-current {
background: #9B3544;
}
.criminal-justice .cardHeader__actions-link:focus,
.criminal-justice .cardHeader__actions-link:hover,
.criminal-justice .cardHeader__actions-link:active,
.criminal-justice .cardHeader__actions-link.is-current {
background: #7D942E;
}
.other-programs .cardHeader__actions-link:focus,
.other-programs .cardHeader__actions-link:hover,
.other-programs .cardHeader__actions-link:active,
.other-programs .cardHeader__actions-link.is-current {
background: #6F2648;
}
.cardHeader__actions-link svg {
font-size: 1rem;
margin-right: 0.4375rem;
}
/*
QA Refresh 2020
---
Base
*/
.button-base,
.btn,
.button,
.button__primary,
.button--primary,
.bullet,
input[type="submit"],
input[type="submit"].button__secondary,
.button__secondary {
width: auto;
height: auto;
margin: 0;
line-height: normal;
text-align: center;
text-decoration: none;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
position: relative;
-webkit-appearance: none;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
outline: 0;
overflow: visible;
cursor: pointer;
vertical-align: middle;
display: inline-block;
}
a.button-base,
a.btn,
a.button,
a.button__primary,
a.button--primary,
a.bullet,
ainput[type="submit"],
ainput[type="submit"].button__secondary,
a.button__secondary {
text-decoration: none;
}
a.button-base:hover,
a.btn:hover,
a.button:hover,
a.button__primary:hover,
a.button--primary:hover,
a.bullet:hover,
ainput[type="submit"]:hover,
ainput[type="submit"].button__secondary:hover,
a.button__secondary:hover {
text-decoration: none;
}
a.button-base:hover,
a.button-base:active,
a.button-base:focus,
a.btn:hover,
a.btn:active,
a.btn:focus,
a.button:hover,
a.button:active,
a.button:focus,
a.button__primary:hover,
a.button__primary:active,
a.button__primary:focus,
a.button--primary:hover,
a.button--primary:active,
a.button--primary:focus,
a.bullet:hover,
a.bullet:active,
a.bullet:focus,
ainput[type="submit"]:hover,
ainput[type="submit"]:active,
ainput[type="submit"]:focus,
ainput[type="submit"].button__secondary:hover,
ainput[type="submit"].button__secondary:active,
ainput[type="submit"].button__secondary:focus,
a.button__secondary:hover,
a.button__secondary:active,
a.button__secondary:focus {
color: #fff;
}
/* Primary */
.btn,
.button,
.button__primary,
.button--primary,
.bullet,
input[type="submit"] {
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
letter-spacing: 0.04285714em;
background: #177DA4;
color: #fff;
padding: 19px 1.125rem;
outline: 3px solid transparent;
border: 2px solid #177DA4;
text-transform: uppercase;
}
@media all and (min-width: 48em) {
.btn,
.button,
.button__primary,
.button--primary,
.bullet,
input[type="submit"] {
min-width: 170px;
}
}
.btn:hover,
.button:hover,
.button__primary:hover,
.button--primary:hover,
.bullet:hover,
input[type="submit"]:hover,
.btn:active,
.button:active,
.button__primary:active,
.button--primary:active,
.bullet:active,
input[type="submit"]:active {
background: #115974;
border-color: #115974;
color: #fff;
}
.btn:focus,
.button:focus,
.button__primary:focus,
.button--primary:focus,
.bullet:focus,
input[type="submit"]:focus {
outline-color: #177DA4;
border-color: #fff;
}
.button__primary--dark {
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
letter-spacing: 0.04285714em;
background: #fff;
color: #177DA4;
padding: 19px 1.125rem;
outline: 3px solid transparent;
border: 2px solid #fff;
text-transform: uppercase;
}
@media all and (min-width: 48em) {
.button__primary--dark {
min-width: 170px;
}
}
.button__primary--dark:hover,
.button__primary--dark:active {
background: transparent;
border-color: transparent;
color: #fff;
}
.button__primary--dark:focus {
outline-color: #fff;
border-color: #fff;
}
.button__primary--dark:hover {
border-color: #fff;
}
.button__primary--dark:focus {
outline-color: #fff;
border-color: transparent;
color: #177DA4;
}
.button__primary--dark:active {
border-color: #29333A;
background: #29333A;
color: #fff;
}
/* Secondary */
input[type="submit"].button__secondary,
.button__secondary {
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
letter-spacing: 0.04285714em;
background: #fff;
color: #177DA4;
padding: 19px 1.125rem;
outline: 3px solid transparent;
border: 2px solid #177DA4;
text-transform: uppercase;
}
@media all and (min-width: 48em) {
input[type="submit"].button__secondary,
.button__secondary {
min-width: 170px;
}
}
input[type="submit"].button__secondary:hover,
.button__secondary:hover,
input[type="submit"].button__secondary:active,
.button__secondary:active {
background: #115974;
border-color: #115974;
color: #fff;
}
input[type="submit"].button__secondary:focus,
.button__secondary:focus {
outline-color: #fff;
border-color: #fff;
}
.button__secondary--dark {
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
letter-spacing: 0.04285714em;
background: transparent;
color: #fff;
padding: 19px 1.125rem;
outline: 3px solid transparent;
border: 2px solid #fff;
text-transform: uppercase;
}
@media all and (min-width: 48em) {
.button__secondary--dark {
min-width: 170px;
}
}
.button__secondary--dark:hover,
.button__secondary--dark:active {
background: #fff;
border-color: #fff;
color: #177DA4;
}
.button__secondary--dark:focus {
outline-color: transparent;
border-color: #fff;
}
.button__secondary--dark:focus {
background: transparent;
outline-color: #fff;
border-color: transparent;
color: #fff;
}
.button__secondary--dark:active {
border-color: #29333A;
background: #29333A;
color: #fff;
}
/* Small */
.button--small {
padding: 8.5px 1.125rem !important;
}
@media all and (min-width: 48em) {
.button--small {
min-width: 130px;
}
}
/* Button w/ icon */
.button--icon {
display: inline-flex;
align-items: center;
}
.button--icon svg {
font-size: 16px;
margin-left: 7px;
}
.color-bg {
padding: 1rem;
border-radius: 2px;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
.color-bg .sg-example__render-caption {
color: #fff;
}
.color-bg--blue {
background-color: #274B64;
}
.color-bg--white {
background-color: #fff;
}
.color-bg--white .sg-example__render-caption {
color: inherit;
}
.color-bg--red {
background-color: #B44252;
}
input[type="submit"].button--outline,
input[type="submit"].button--outline:hover,
.button--outline,
.button--outline:hover {
background-color: transparent;
border: 2px solid;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
color: #fff;
}
input[type="submit"].button--outline:hover,
.button--outline:hover {
background: rgba(255, 255, 255, 0.2);
}
.button--outline-white,
.button--outline-white:hover {
color: #fff;
}
.button--outline-blue,
.button--outline-blue:hover {
color: #274B64;
}
.button--success,
.button--success:hover {
background-color: #9DB351;
}
.button--success:active,
.button--success:hover:active,
.button--success.is-active,
.button--success:hover.is-active {
background: #7D942E;
}
.button--warning,
.button--warning:hover {
background-color: #B44252;
}
.button--warning:active,
.button--warning:hover:active,
.button--warning.is-active,
.button--warning:hover.is-active {
background-color: #9B3544;
}
.button--text,
.button--text:hover,
.button--text:active {
padding: 0;
background: transparent;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.button--text-blue {
color: #274B64;
}
.button__icon {
width: 16px;
vertical-align: text-bottom;
}
.button--block {
display: block;
}
.bullet.fixed-width {
width: 140px;
padding: 0.875rem;
}
.bullet.fixed-width:hover {
padding: 0.875rem !important;
}
.bullet.color-white {
color: #fff !important;
}
.bullet.top-spaced {
margin-top: 20px;
}
.button--inline-block {
display: inline-block;
}
.text-orange,
h4.text-orange {
color: #E49546;
}
.button ~ .event-contact {
margin-top: 1.25rem;
}
.canon-text {
font-size: 4rem;
}
.paragon-text,
.wysiwyg h2,
.wysiwyg .paragon-text {
font-size: 3rem;
}
.primer-text,
.wysiwyg h3,
.wysiwyg .primer-text {
font-size: 2.375rem;
}
.tertia-text {
font-size: 1.625rem;
}
.normal-text,
.wysiwyg h4,
.wysiwyg .normal-text {
font-size: 1.25rem;
}
.petite-text,
.wysiwyg h5,
.wysiwyg .petite-text {
font-size: 1rem;
}
.minion-text,
.wysiwyg h6,
.wysiwyg .minion-text {
font-size: 0.875rem;
}
.nonpareil-text {
font-size: 0.75rem;
}
.highlight {
margin: 0 auto;
padding: 1rem 0 2rem;
border-top: 1px #b9c1c6 solid;
border-bottom: 1px #b9c1c6 solid;
}
.highlight__title {
margin: 0 auto;
padding: 0 1rem;
max-width: 220px;
background: #fff;
color: #b9c1c6;
font-size: 1.625rem;
font-family: "Proxima Nova Light", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
text-align: center;
line-height: 1;
transform: translateY(-1.75rem);
}
.highlight__body {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
margin-top: 0;
font-size: 1.25rem;
color: #29333A;
list-style: none;
padding-left: 0;
}
@media all and (max-width: 47.9375em) {
.highlight__body {
flex-direction: column;
}
}
.highlight__body > * {
flex: 0 1 25%;
}
@media all and (max-width: 47.9375em) {
.highlight__body > *:not(:last-child) {
margin-bottom: 1rem;
}
}
.color-block {
height: 100%;
margin: 0 auto;
padding: 3.4375rem 2.8125rem;
border: 0;
color: #fff;
text-align: left;
}
.color-block--small {
margin-bottom: 1rem;
padding: 1.875rem;
}
.color-block--small .color-block__info {
margin: 0;
padding: 0;
border: 0;
}
.color-block--small .color-block__title {
margin-bottom: 1.875rem;
}
.color-block--small .color-block__title.color-block__title--icon {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
margin-bottom: 0;
}
.color-block--small .color-block__title.color-block__title--icon span {
padding-left: 0.625rem;
}
.color-block--small .button {
display: block;
text-align: center;
}
.color-block__info {
max-width: 300px;
}
@media all and (max-width: 61.9375em) {
.color-block__info {
max-width: none;
}
}
.color-block__values {
margin-bottom: 2.5rem;
padding-bottom: 2.5rem;
border-bottom: 1px rgba(255, 255, 255, 0.2) solid;
}
.color-block__title {
margin: 0 auto .5rem;
font-size: 1.625rem;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
line-height: 1.2;
text-decoration: none;
color: #fff;
}
.color-block__title svg {
fill: #fff;
width: 1.625rem;
height: 100%;
}
.color-block__title:hover,
.color-block__title:focus {
color: #fff;
}
.color-block__subtitle {
color: #fff;
}
.color-block__list {
margin: 0 auto 1rem;
padding-left: 0;
list-style: none;
font-size: 1.125rem;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.color-block__list li {
line-height: 1.625rem;
}
.color-block__mission {
max-width: 300px;
}
.colorblock__quote {
display: block;
margin: 0;
padding: 0;
max-width: 300px;
}
.colorblock__quote > p {
font-size: 1.25rem;
font-family: "Proxima Nova Light", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-style: italic;
}
@media all and (max-width: 61.9375em) {
.colorblock__quote {
max-width: none;
}
}
.colorblock__quote-cite {
display: block;
padding: 1rem 1rem 0;
}
.colorblock__quote-source {
font-size: 0.875rem;
text-transform: uppercase;
position: relative;
}
.colorblock__quote-source:before {
content: "—";
position: absolute;
left: -1rem;
}
.colorblock__quote-source-name {
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.colorblock__quote-source-position {
text-transform: none;
font-size: 16px;
font-size: 1rem;
}
.colorblock__quote-source-location {
text-transform: none;
font-size: 16px;
font-size: 1rem;
}
.colorblock__quote-source-credentials {
margin-top: 0;
}
.color-block--watermark {
position: relative;
}
.color-block--watermark:before {
content: " ";
position: absolute;
background: url("/resources/images/quote-watermark.png") no-repeat top center;
background-size: cover;
width: 315px;
height: 235px;
opacity: 0.1;
top: 50px;
left: -70px;
}
.newsfeed {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
padding-bottom: 3.125rem;
padding-top: 3.125rem;
}
.newsfeed-home {
padding-top: 0;
}
.newsfeed .owl-carousel {
margin-top: 0;
}
.newsfeed .owl-nav {
position: absolute;
top: 3.125rem;
left: 0;
right: 0;
transform: none;
}
.newsfeed-filter {
width: 25%;
flex: 0 0 auto;
margin-right: 1.25rem;
}
@media all and (max-width: 61.9375em) {
.newsfeed-filter {
margin-right: 0;
}
}
.newsfeed-filter__header {
margin-bottom: .5rem;
}
.newsfeed-filter__header img {
margin-bottom: 1rem;
}
.newsfeed-articles {
width: 70%;
flex: 1 0 auto;
}
.article-slider {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
.article-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0;
list-style: none;
position: relative;
}
.article-list__item {
display: block;
width: 100%;
}
.article-list__item span {
display: block;
}
.article-list__item-link {
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
display: block;
text-decoration: none;
margin-top: 0;
margin-bottom: .5rem;
color: #177DA4;
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.article-list__item-link:hover {
color: #115974;
}
.article-list__item-age {
color: #656a6e;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 0.75rem;
}
.select-placeholder {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
max-width: 200px;
margin: 0 auto;
border-bottom: 1px #274B64 solid;
}
.select-placeholder span {
flex: 1 0 auto;
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1rem;
line-height: 1;
text-align: center;
color: #274B64;
}
.select-placeholder img {
max-width: 30px;
}
@media all and (max-width: 61.9375em) {
.newsfeed.is-inactive {
flex-direction: column;
}
.newsfeed.is-inactive .newsfeed-filter {
width: 100%;
margin-bottom: 5rem;
}
.newsfeed.is-inactive .newsfeed-articles {
width: 100%;
max-width: 500px;
}
.newsfeed.is-inactive .article-list__item {
margin-bottom: 2rem;
}
.newsfeed.is-inactive .article-list__item-link {
margin-bottom: 0;
font-size: 1.25rem;
}
.newsfeed.is-inactive .owl-carousel {
display: block;
}
}
.newsfeed-filter__container {
position: relative;
}
.newsfeed-filter__select {
margin: 0 auto;
padding-bottom: .5rem;
border: none;
border-radius: 0;
background: none;
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
text-align-last: center;
color: #177da4;
border-bottom: 1px #177da4 solid;
max-width: 500px;
width: 100%;
}
.newsfeed-articles--hidden {
display: none;
}
.main-footer {
position: relative;
padding: 3.125rem 0 1.25rem;
background-color: #29333A;
color: #fff;
}
.main-footer .footer-nav {
width: 100%;
margin-bottom: 1.875rem;
border-top: 1px #fff solid;
border-bottom: 1px #fff solid;
background-color: inherit;
}
@media all and (max-width: 47.9375em) {
.main-footer .footer-nav {
display: block;
}
}
.main-footer .footer-nav ul {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 0;
list-style: none;
}
@media (max-width: 620px) {
.main-footer .footer-nav ul {
flex-wrap: wrap;
}
}
.main-footer .footer-nav ul li {
flex: 1 1 auto;
white-space: nowrap;
text-align: center;
}
@media (max-width: 620px) {
.main-footer .footer-nav ul li {
text-align: center;
}
}
.main-footer .footer-nav ul li a.is-current {
color: #fff !important;
background-color: #274B64;
}
.main-footer .footer-nav ul a,
.main-footer .footer-nav ul a:visited {
display: block;
padding: 1rem .5rem;
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
text-transform: uppercase;
color: inherit;
}
.main-footer .footer-nav ul a:hover,
.main-footer .footer-nav ul a:visited:hover {
color: #cccccc;
}
.main-footer .institute-nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
box-shadow: none;
}
.main-footer .institute-nav a {
flex: 1 1 16.6667%;
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1rem;
text-decoration: none;
color: #8C9398;
}
@media all and (min-width: 62em) {
.main-footer .institute-nav a {
padding-right: 3rem;
}
}
.main-footer .institute-nav a:hover {
color: #c2c6c8;
text-decoration: underline;
}
@media all and (max-width: 47.9375em) {
.main-footer .institute-nav {
flex-wrap: wrap;
}
.main-footer .institute-nav a,
.main-footer .institute-nav .institute-nav__item--stacked {
padding: 0;
flex: 0 0 auto;
margin-bottom: 1.25rem;
width: 46%;
}
.main-footer .institute-nav .institute-nav__item--stacked a {
margin-bottom: 0;
}
}
.main-footer .copyright {
margin-top: 2.5rem;
font-size: 0.625rem;
margin-bottom: 1.25rem;
}
@media all and (max-width: 47.9375em) {
.main-footer .copyright {
margin-top: 1.25rem;
}
}
.footer-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.25rem;
}
@media all and (max-width: 47.9375em) {
.footer-row {
flex-wrap: wrap;
align-items: stretch;
}
}
@media (max-width: 620px) {
.footer-row {
flex-direction: column;
}
}
.footer-row__col {
flex: 1 1 25%;
padding: 0 1rem;
}
@media all and (max-width: 47.9375em) {
.footer-row__col {
flex: 0 1 40%;
padding: 0 0 0.625rem;
}
}
.footer-row__col.social {
padding: 0;
}
.footer-row__col:first-child {
padding-left: 0;
}
.footer-row__col:last-child {
padding-right: 0;
flex: 1 1 10%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: flex-start;
display: block;
}
@media all and (max-width: 47.9375em) {
.footer-row__col:last-child {
flex: 0 1 40%;
}
}
.main-footer__title {
margin-top: 0;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1.125rem;
}
.main-footer__address {
font-size: 1rem;
line-height: inherit;
color: #fff;
}
.main-footer__address p {
margin-top: 0;
}
.main-footer__address:hover,
.main-footer__address:focus {
color: #fff;
text-decoration: underline;
}
.main-footer__phone {
color: #fff;
line-height: inherit;
}
.main-footer__phone:hover,
.main-footer__phone:focus {
color: #fff;
text-decoration: underline;
}
.contact-info {
margin-top: 0;
padding-left: 0;
list-style: none;
}
.contact-info a {
text-decoration: none;
color: #fff;
}
.contact-key {
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.social-icons {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
margin-top: 0;
padding-left: 0;
list-style: none;
}
.social-icons li {
padding-right: 1.25rem;
}
.social-icons li:last-child {
padding-right: 0;
}
.social-icons a {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
}
.social-icons a.facebook {
background-color: #1877f2;
}
.social-icons a.facebook:hover {
background-color: #0b5fcc;
}
.social-icons a.twitter {
background-color: #36a9e1;
}
.social-icons a.twitter:hover {
background-color: #1e8fc6;
}
.social-icons a.linkedin {
background-color: #007bb6;
}
.social-icons a.linkedin:hover {
background-color: #005983;
}
.social-icons a.instagram {
background-color: #ff0076;
}
.social-icons a.instagram:hover {
background-color: #cc005e;
}
.social-icons a.youtube {
background-color: #282828;
}
.social-icons a.youtube:hover {
background-color: #0e0e0e;
}
.social-icons svg {
width: 60%;
fill: #fff;
color: #fff;
}
@media all and (max-width: 47.9375em) {
.social-icons {
justify-content: flex-start;
}
}
.main-footer__accent {
position: absolute;
right: 0;
height: 50px;
bottom: 0;
left: 0;
background: url("/resources/images/accent.png") no-repeat top center;
background-size: cover;
}
@media all and (min-width: 48em) {
.main-footer__accent {
height: 60px;
}
}
.advisory-board {
padding-left: 0;
}
.advisory-board .regular-heading {
line-height: 1.1;
}
.advisory-board p {
margin-top: 0.75rem;
}
.heading {
font-weight: normal;
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", Arial, sans-serif;
text-transform: uppercase;
}
.no-flexbox {
display: block;
}
.flex-column {
flex-direction: column;
}
.side-nav--spaced {
margin-top: 1.5625em;
margin-bottom: .625em;
}
.full-width {
width: 100% !important;
max-width: 100% !important;
}
/* Styles from the old web-site */
.vertical-nav {
margin: 0;
padding: 0;
list-style: none outside none;
}
.vertical-nav li {
border-bottom: 1px solid #d7d6d1;
}
.vertical-nav li a {
color: #3d9ddc;
display: block;
padding-top: .625em;
padding-bottom: .625em;
}
.vertical-nav li a:hover {
color: #f79433;
}
.basic-interior h2.no-bottom-margin {
margin-bottom: 0;
}
.programs-nav .title {
margin: 0;
color: #29333a;
}
.width-auto {
width: auto;
}
.other-designation.conditional,
.in-memoriam-designation.conditional,
.other-amount.conditional {
display: none;
}
.other-designation.conditional.is-showing,
.in-memoriam-designation.conditional.is-showing,
.other-amount.conditional.is-showing {
display: inline-block;
}
.share-page {
float: right;
position: relative;
z-index: 90;
font-size: 14px;
font-size: .875rem;
line-height: 1.0714285714285714;
}
.share-page .share {
margin: -0.35714286em 0 0 0.35714286em;
padding: .35714285714285715em .35714285714285715em .35714285714285715em 2.142857142857143em;
color: #656a6e;
background: #e4e4e1 url(../images/share-icon.png) no-repeat 0.35714286em 0.21428571em;
display: inline-block;
}
.lte7 .share-page .share {
display: inline;
zoom: 1;
}
.share-page .share:hover,
.share-page .share:focus,
.share-page .share.is-current {
color: #29333a;
background-image: url(../images/share-icon-hover.png);
}
.share-event {
position: relative;
z-index: 85;
}
.share-panel {
margin: .625em 0 0;
padding: 0 .9375em;
display: none;
position: absolute;
top: 100%;
right: 0;
background-color: #F5F2EC;
z-index: 95;
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
}
.share-panel.is-current {
display: block;
}
.share-event .share-panel {
margin-top: 0;
}
.share-event .share-panel:before {
right: auto;
left: 35px;
}
.share-buttons {
margin-top: 0;
display: none;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", Arial, sans-serif;
}
.share-buttons.is-current {
display: block;
}
.share-buttons li:first-child .button {
margin-top: 0;
}
.share-buttons .button {
text-align: left;
}
.share-buttons .button:focus,
.share-buttons .button:hover,
.share-buttons .button:active,
.share-buttons .button.is-current {
color: #fff;
}
.share-by-email {
display: none;
}
.share-by-email.is-current {
display: block;
}
#share-event.is-displayed {
display: block;
position: relative;
}
.share-event-button-item {
margin: 41px 0;
}
.icon--buttons-icon {
width: 20px;
height: 20px;
}
.eventShare__panel {
z-index: 1;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
}
.eventShare__trigger {
position: relative;
z-index: 2;
}
.eventShare__trigger.is-current:before {
content: "";
display: block;
border: .625em solid transparent;
border-bottom-color: #F5F2EC;
position: absolute;
bottom: 0;
left: 50%;
transform: translateY(10px) translateX(-50%);
width: 0;
height: 0;
margin: 0;
padding: 0;
}
.eventShare__list {
display: flex;
align-items: center;
margin: 0 -0.3125rem;
}
.eventShare__list-item {
padding: 0.9375rem 0.3125rem;
}
.eventShare__link {
margin-top: 0;
width: 2.8125rem;
height: 2.8125rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: #177DA4;
color: #fff !important;
}
.eventShare__link:hover,
.eventShare__link:focus,
.eventShare__link:active {
background: #115974;
color: #fff !important;
}
.eventShare__link svg {
width: 1.875rem;
height: 1.875rem;
fill: #fff;
}
.eventShare__button {
min-width: auto !important;
width: 100% !important;
}
.affix,
.affix-top {
position: relative;
width: 242px;
}
.back-to-top {
display: none;
background: #fff;
position: absolute;
bottom: -50px;
left: 0;
right: 0;
}
@media all and (min-width: 62em) {
.back-to-top {
display: block;
}
}
.back-to-top--list {
position: initial;
}
@media all and (min-width: 62em) {
.event-nav.affix {
position: fixed;
top: 0;
width: 242px;
margin-top: 25px;
}
}
.static-holder {
min-height: 1px;
}
a.event-nav--link.is-current {
color: #fff;
text-transform: uppercase;
background-color: #e49546;
background-color: #656a6e;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
a.event-nav--link.is-current:after {
border: .9375em solid transparent;
border-left-color: #e49546;
border-left-color: #656a6e;
position: absolute;
left: 100%;
content: "";
width: 0;
height: 0;
margin: 0;
padding: 0;
display: block;
margin-top: -1.6em;
}
.sponsor-list {
list-style: none;
padding-left: 0;
}
.sponsor-list li {
width: 100%;
text-align: center;
margin: 1em 0!important;
}
.page-pagination {
padding-left: 0;
}
.page-pagination li {
display: inline;
list-style: none outside none;
}
.page-pagination a {
display: inline-block;
}
.page-pagination {
color: #c5c4bc;
font-style: italic;
text-align: center;
font-size: 14px;
font-size: .875rem;
line-height: 1.0714285714285714;
}
.page-pagination li:before {
content: "/";
}
.page-pagination li.prev:before,
.page-pagination li.prev + li:before,
.page-pagination li.next:before,
.page-pagination li:first-child:before {
content: "";
}
.page-pagination a {
color: #74b0bd;
}
.page-pagination a:hover,
.page-pagination a:focus,
.page-pagination a.is-current {
color: #177da4;
}
.page-pagination .prev a,
.page-pagination .next a {
width: 11px;
height: 21px;
text-indent: -9999em;
background: transparent url(/resources/images/pagination-nav.png) no-repeat;
vertical-align: middle;
display: inline-block;
}
.lte7 .page-pagination .prev a,
.lte7 .page-pagination .next a {
display: inline;
zoom: 1;
}
.page-pagination .prev a:hover,
.page-pagination .next a:hover,
.page-pagination .prev a:focus,
.page-pagination .next a:focus,
.page-pagination .prev a.is-current,
.page-pagination .next a.is-current {
opacity: .65;
filter: alpha(opacity=65);
}
.page-pagination .prev a {
background-position: left top;
}
.page-pagination .next a {
background-position: right top;
}
li.next {
margin-left: 6px;
}
li.prev {
margin-right: 6px;
}
/*Form submission confirmation */
.form-submission-container h1,
.form-submission-container h2,
.form-submission-container h3 {
color: #29333A;
}
.form-submission-container h1 {
font-size: 42px;
font-size: 2.625rem;
line-height: .9523809523809523;
position: relative;
margin-bottom: -0.23809524em;
padding-bottom: .8333333333333334em;
}
.form-submission-container h1:after {
content: "";
width: 1.5476190476190477em;
height: .11904761904761904em;
margin: 0;
padding: 0;
display: block;
position: absolute;
bottom: 0;
left: 0;
background: #E49546;
}
.form-submission-container h2 {
margin-top: 1.25em;
font-size: 32px;
font-size: 2rem;
line-height: .9375;
}
.form-submission-container h3 {
margin-top: 1.6666666666666667em;
font-size: 24px;
font-size: 1.5rem;
line-height: 1.0416666666666667;
}
.form-submission-container .unstyled {
padding-left: 0;
list-style: none outside none;
}
.form-submission-container .confirmation-list {
overflow: hidden;
}
.form-submission-container .confirmation-list .label {
margin-right: .1875em;
clear: both;
float: left;
font-family: "Proxima Nova Semibold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", Arial, sans-serif;
display: inline-block;
}
.form-submission-container .confirmation-list .value {
margin-left: 0;
float: left;
display: block;
}
.form-submission-container .nav {
padding-left: 0;
}
.form-submission-container .nav li {
display: inline;
list-style: none outside none;
}
.order-form-submission-container {
margin-bottom: 40px;
}
.order-form-submission-container .nav {
list-style-type: none;
}
.order-form-submission-container .nav li {
margin-top: 1em;
}
.event.media-object:not(:first-child) {
margin-top: 30px;
}
/* Helpers for the form styling */
.input-left-container {
float: left;
width: 35px;
}
.input-right-container {
float: left;
width: 90%;
}
.additional-membership-forms {
display: none;
}
.landing-pad .additional-membership-forms {
display: block;
margin-bottom: 50px;
padding: 0 0 50px 0;
border-bottom: 1px solid #c0baad;
}
.form-section--spaced {
margin-top: 40px;
}
.bubble.input-alert.error {
background-color: #B44252;
}
.bubble.input-alert {
padding: .3125em .625em;
color: #fff;
font-size: 16px;
font-size: 1rem;
line-height: 1.5625;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
display: inline-block;
}
.bubble {
margin: 0;
padding: .625em;
background-color: #fff;
position: relative;
-webkit-border-radius: .1875em;
-moz-border-radius: .1875em;
-o-border-radius: .1875em;
border-radius: .1875em;
-webkit-box-shadow: 0 0 0.4375em rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 0.4375em rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 0 0.4375em rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0.4375em rgba(0, 0, 0, 0.5);
-webkit-transition: opacity .15s linear;
-moz-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.bubble:after {
position: absolute;
border: .3125em solid transparent;
content: "";
width: 0;
height: 0;
margin: 0;
padding: 0;
display: block;
}
.bubble.input-alert:after {
left: .625em;
margin-left: 0;
top: -0.625em;
border-bottom-color: #fff;
}
.bubble.input-alert.error:after {
border-bottom-color: #B44252;
}
.error input,
.error textarea {
border-color: #B44252;
}
.left-hand-nav {
position: relative;
margin-bottom: 1rem;
padding: 0.75rem 0;
border-top: 10px solid;
background-color: #f5f2ec;
border-color: #29333A;
}
.left-hand-nav.law-enforcement-administration {
border-color: #274B64;
}
.left-hand-nav.energy-law {
border-color: #E49546;
}
.left-hand-nav.international-and-comparative-law {
border-color: #217053;
}
.left-hand-nav.transnational-arbitration {
border-color: #74B0BD;
}
.left-hand-nav.law-and-technology {
border-color: #B44252;
}
.left-hand-nav.criminal-justice {
border-color: #9DB351;
}
.left-hand-nav.other-programs {
border-color: #963D68;
}
@media all and (min-width: 48em) {
.left-hand-nav {
padding: 1.25rem 0;
}
}
.left-hand-nav__container,
.sidebarNav__container {
padding-top: 2em;
}
@media all and (max-width: 47.9375em) {
.left-hand-nav__container,
.sidebarNav__container {
display: none;
}
.left-hand-nav__container.is-revealed,
.sidebarNav__container.is-revealed {
display: block;
}
}
@media all and (min-width: 48em) {
.left-hand-nav__container,
.sidebarNav__container {
padding-top: 0;
}
}
.leftHandNav__title,
.sidebarNav__parent-title {
margin: 0 1.875rem 1.25rem;
border-bottom: 1px solid #D6D1C7;
padding: 1.875rem 0 1.25rem;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
@media all and (max-width: 47.9375em) {
.leftHandNav__title,
.sidebarNav__parent-title {
margin: 0 1.875rem;
border-bottom: none;
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.leftHandNav__title.focusable:active,
.leftHandNav__title.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .leftHandNav__title a,
body:hover .leftHandNav__title input,
body:hover .leftHandNav__title button {
display: none;
}
}
.leftHandNav__title-link > .leftHandNav__title {
color: #29333A;
}
.sidebarNav__list {
list-style: none;
}
@media all and (min-width: 48em) {
.sidebarNav__list--no-title {
padding: 1.25rem 0;
}
}
.leftHandNav__list-link {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
display: block;
padding: 0.625rem 1.875rem;
}
.law-enforcement-administration .leftHandNav__list-link {
color: #274B64;
}
.energy-law .leftHandNav__list-link {
color: #E49546;
}
.international-and-comparative-law .leftHandNav__list-link {
color: #217053;
}
.transnational-arbitration .leftHandNav__list-link {
color: #74B0BD;
}
.law-and-technology .leftHandNav__list-link {
color: #B44252;
}
.criminal-justice .leftHandNav__list-link {
color: #9DB351;
}
.other-programs .leftHandNav__list-link {
color: #963D68;
}
.leftHandNav__list-link.is-current {
background-color: transparent;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.law-enforcement-administration .leftHandNav__list-link.is-current:focus,
.law-enforcement-administration .leftHandNav__list-link.is-current:hover {
color: #1D3B4F;
}
.energy-law .leftHandNav__list-link.is-current:focus,
.energy-law .leftHandNav__list-link.is-current:hover {
color: #B6712C;
}
.international-and-comparative-law .leftHandNav__list-link.is-current:focus,
.international-and-comparative-law .leftHandNav__list-link.is-current:hover {
color: #1B5D45;
}
.transnational-arbitration .leftHandNav__list-link.is-current:focus,
.transnational-arbitration .leftHandNav__list-link.is-current:hover {
color: #5894A1;
}
.law-and-technology .leftHandNav__list-link.is-current:focus,
.law-and-technology .leftHandNav__list-link.is-current:hover {
color: #9B3544;
}
.criminal-justice .leftHandNav__list-link.is-current:focus,
.criminal-justice .leftHandNav__list-link.is-current:hover {
color: #7D942E;
}
.other-programs .leftHandNav__list-link.is-current:focus,
.other-programs .leftHandNav__list-link.is-current:hover {
color: #6F2648;
}
@media all and (max-width: 47.9375em) {
.leftHandNav__list-link {
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
}
@media all and (max-width: 47.9375em) {
.leftHandNav__dropdown-flex,
.sidebarNav__dropdown-flex {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.leftHandNav__trigger {
color: #fff;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
display: flex;
width: 100%;
padding: 1em 1em 26px;
border: none;
background-color: transparent;
justify-content: space-between;
margin: -0.75rem 0;
}
.law-enforcement-administration .leftHandNav__trigger {
background: #274B64;
}
.energy-law .leftHandNav__trigger {
background: #E49546;
}
.international-and-comparative-law .leftHandNav__trigger {
background: #217053;
}
.transnational-arbitration .leftHandNav__trigger {
background: #74B0BD;
}
.law-and-technology .leftHandNav__trigger {
background: #B44252;
}
.criminal-justice .leftHandNav__trigger {
background: #9DB351;
}
.other-programs .leftHandNav__trigger {
background: #963D68;
}
.leftHandNav__trigger svg {
transform: rotate(0);
transition: 100ms ease;
}
.leftHandNav__trigger.is-revealed svg {
transform: rotate(180deg);
}
@media all and (min-width: 48em) {
.leftHandNav__trigger {
display: none;
}
}
.leftHandNav__trigger:focus {
outline: none;
}
.breadcrumbs {
margin-bottom: 20px;
}
.breadcrumbs__list {
overflow: hidden;
}
.breadcrumbs__list li {
position: relative;
float: left;
margin-right: 5px;
}
.breadcrumbs__list li:before {
content: "/";
color: #29333A;
margin-right: 5px;
}
.breadcrumbs__list li:first-child:before {
content: "";
margin-right: 0;
}
/**
* Cail Photo Galleries
*/
.cail-photo-gallery {
display: none;
position: relative;
}
.cail-photo-gallery .slider-viewport {
max-height: 425px;
overflow: hidden;
background: #333;
}
.cail-photo-gallery .slider-direction-nav {
list-style: none;
height: 0;
padding: 0;
}
.cail-photo-gallery .slider-direction-nav .slider-prev,
.cail-photo-gallery .slider-direction-nav .slider-next {
position: absolute;
top: 50%;
left: 0;
width: 65px;
height: 100px;
margin-top: -65px;
background: #000;
opacity: 0.5;
text-indent: -9999em;
overflow: hidden;
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.cail-photo-gallery:hover .slider-direction-nav .slider-prev,
.cail-photo-gallery:hover .slider-direction-nav .slider-next {
opacity: 0.5;
}
.cail-photo-gallery .slider-direction-nav .slider-prev:before,
.cail-photo-gallery .slider-direction-nav .slider-next:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 22px;
width: 30px;
height: 30px;
margin-top: -15px;
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cail-photo-gallery .slider-direction-nav .slider-next:before {
left: 8px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
.cail-photo-gallery .slider-direction-nav .slider-next {
left: auto;
right: 0;
}
.cail-photo-gallery .slide {
position: relative;
}
.cail-photo-gallery .flex-caption {
position: absolute;
top: 359px;
width: 100%;
color: #fff;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
}
.form-section .cail-photo-gallery .flex-caption {
top: auto;
bottom: 0;
}
.cail-photo-gallery img {
width: 100%;
}
.cail-photo-gallery.active {
display: block;
margin: 20px 0 0 0;
}
.cail-photo-gallery .slider-control-nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.cail-photo-gallery .slider-control-nav li {
display: inline-block;
margin: 0 5px;
}
.cail-photo-gallery .slider-control-nav li a {
overflow: hidden;
display: block;
height: 10px;
cursor: pointer;
}
.cail-photo-gallery .slider-control-nav li a:before {
display: block;
content: "";
width: 8px;
height: 8px;
border-radius: 16px;
background: #74b0bd;
border: solid 1px #fff;
}
.cail-photo-gallery .slider-control-nav li a.slider-active:before {
background: #fff;
border: solid 1px #74b8bd;
}
@media only screen and (max-width: 767px) {
.cail-photo-gallery .slider-direction-nav .slider-prev,
.cail-photo-gallery .slider-direction-nav .slider-next,
.cail-photo-gallery:hover .slider-direction-nav .slider-prev,
.cail-photo-gallery:hover .slider-direction-nav .slider-next {
opacity: 0;
}
}
@media only screen and (max-width: 320px) {
.cail-photo-gallery .slider-viewport {
max-height: 325px;
}
}
.programs {
background: #f5f2ec;
padding: 80px 0 40px;
}
.programs .slider-header {
background: #f5f2ec;
}
.programs .slider-header__link {
background: #f5f2ec;
}
.program-list-container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
padding-top: 20px;
position: relative;
}
@media all and (max-width: 61.9375em) {
.program-list-container {
padding-top: 0;
margin-top: 40px;
}
}
@media all and (min-width: 62em) {
.program-list-container {
flex-direction: row;
}
}
.program-list-container li {
padding: 0.625rem 0;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 1rem;
text-transform: uppercase;
}
.program-list-container li a {
display: block;
color: inherit;
text-decoration: none;
text-align: center;
}
@media all and (min-width: 62em) {
.program-list-container li a {
text-align: left;
}
}
.program-list-container li a:hover {
opacity: 0.6;
}
.program-list-container .card__watermark {
top: calc(100% + 40px);
}
@media all and (max-width: 61.9375em) {
.program-list {
margin-top: 0;
}
}
@media all and (min-width: 62em) {
.program-list {
max-width: 33%;
padding: 0 5%;
}
}
.institute-banner {
width: 100%;
position: relative;
overflow: hidden;
}
.institute-banner-image {
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
width: 100%;
height: 200px;
}
@media all and (min-width: 62em) {
.institute-banner-image {
height: 0;
padding-top: 17.85714286%;
}
}
.law-enforcement-administration .institute-banner-image {
background-image: url('/resources/images/banner-images/law-enforcment-administration.png');
}
.energy-law .institute-banner-image {
background-image: url('/resources/images/banner-images/energy-law.png');
}
.international-and-comparative-law .institute-banner-image {
background-image: url('/resources/images/banner-images/international-law.png');
}
.transnational-arbitration .institute-banner-image {
background-image: url('/resources/images/banner-images/transnational-arbitration.png');
}
.law-and-technology .institute-banner-image {
background-image: url('/resources/images/banner-images/law-and-technology.png');
}
.criminal-justice .institute-banner-image {
background-image: url('/resources/images/banner-images/criminal-justice.png');
}
.other-programs .institute-banner-image {
background-image: url('/resources/images/banner-images/other-programs.png');
}
.institute-banner {
width: 100%;
position: relative;
overflow: hidden;
}
.institute-banner-image {
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
width: 100%;
height: 200px;
}
@media all and (min-width: 62em) {
.institute-banner-image {
height: 0;
padding-top: 17.85714286%;
}
}
.law-enforcement-administration .institute-banner-image {
background-image: url('/resources/images/banner-images/law-enforcment-administration.png');
}
.energy-law .institute-banner-image {
background-image: url('/resources/images/banner-images/energy-law.png');
}
.international-and-comparative-law .institute-banner-image {
background-image: url('/resources/images/banner-images/international-law.png');
}
.transnational-arbitration .institute-banner-image {
background-image: url('/resources/images/banner-images/transnational-arbitration.png');
}
.law-and-technology .institute-banner-image {
background-image: url('/resources/images/banner-images/law-and-technology.png');
}
.criminal-justice .institute-banner-image {
background-image: url('/resources/images/banner-images/criminal-justice.png');
}
.other-programs .institute-banner-image {
background-image: url('/resources/images/banner-images/other-programs.png');
}
.content-container {
background: #f5f2ec;
padding: 30px 20px;
}
.basic-interior h1.basic-interior__title {
text-transform: uppercase;
font-size: 42px;
color: #29333A;
}
/* Helpers for the publication page styling */
.media-object--publications {
width: 100%;
max-width: 100% !important;
align-items: flex-start;
}
.object--publications {
width: 23%;
margin: 0 !important;
}
.desc--publications {
width: 77%;
}
.media-object--research-reports {
width: 100%;
border-bottom: none;
}
.list--research-reports {
padding-left: 16px;
width: 100%;
}
#donation-billing-information.form-section {
margin-bottom: 50px;
}
#donation-billing-information .row {
margin-left: -1.125em;
margin-right: -1.125em;
}
#donation-billing-information .input-label {
display: block;
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
}
#donation-billing-information .three {
width: 13.3125em;
}
#donation-billing-information .six {
width: 28.875em;
}
#donation-billing-information .columns {
min-height: 1px;
margin-left: 1.125em;
margin-right: 1.125em;
display: inline;
float: left;
}
#donation-billing-information input.three,
#donation-billing-information textarea.three {
width: 12.6875em;
}
#donation-billing-information input.four,
#donation-billing-information textarea.four {
width: 17.875em;
}
#donation-payment-information .float-left {
float: left;
}
#donation-payment-information .input-xxxs {
width: 3em;
}
.donation-methods {
text-align: center;
}
.donation-methods h4.tertia-text.alt-heading {
font-size: 32px;
font-size: 2rem;
line-height: 0.625;
font-size: 1.625rem;
}
/* #### Educational Page #### */
.calendar .page-title {
color: #29333a;
margin-top: 0;
font-size: 32px;
font-size: 2rem;
line-height: .9375;
}
.calendar-icon {
background-image: url(/resources/images/sprite-leaders.png);
background-repeat: no-repeat;
background-position: 0 -350px;
}
.title-bullet {
padding: .15625em 0 .15625em 1.5625em;
}
.title-calendar-icon {
padding: 7px 0 10px 48px;
}
.posters .columns {
position: relative;
margin-top: 2.1875em;
}
.oe-list-entry {
padding-bottom: 2em;
border-bottom: 1px solid #C0BAAD;
}
.oe-list-entry.oe-list-entry--flexbox-disabled-link > a {
display: block;
text-align: center;
}
.oe-event-details {
display: block;
}
@media all and (min-width: 62em) {
.oe-event-details {
display: flex;
margin-left: 233px;
}
}
@media all and (min-width: 62em) {
.oe-list-entry img {
float: left;
margin-right: 1.25em;
}
}
.interior .body-content .oe-title {
color: #E49546;
font-size: 28px;
font-size: 1.66rem;
font-weight: bold;
}
.interior .body-content .alt-heading {
text-transform: none;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.arbitrator-page {
/*.arbitrator-list .trigger {
position:absolute;
top:auto;
right:100%;
}*/
}
.arbitrator-page ul.arbitrator-list {
padding: 0;
}
.arbitrator-page ul.arbitrator-list li + li {
border-top: 1px solid #969EA3;
padding-top: 1.25rem;
}
.arbitrator-page ul.arbitrator-list li + li:before {
top: calc(.25em + 1.25rem);
}
.arbitrator-page li {
padding: 0 0 0 .625em;
position: relative;
list-style: none;
}
.arbitrator-page li:before {
content: "";
width: .1875em;
height: .75em;
margin: 0;
padding: 0;
display: block;
position: absolute;
left: 0;
top: .25em;
background: #74b0bd;
}
.arbitrator-page .arbitrator-link {
display: block;
position: relative;
}
.arbitrator-page .heading {
font-size: 16px;
color: #29333A;
font-weight: 700;
line-height: 25px;
}
.arbitrator-page .arbitrator-additional-info li {
padding: 0 0 0 .875em;
position: relative;
}
.arbitrator-page .arbitrator-additional-info ul li:before {
content: "";
width: .375em;
height: .375em;
top: .5em;
-webkit-border-radius: 1000em;
-moz-border-radius: 1000em;
-o-border-radius: 1000em;
border-radius: 1000em;
}
.arbitrator-page .arbitrator-additional-info li:before {
content: "";
width: .1875em;
height: .75em;
margin: 0;
padding: 0;
display: block;
position: absolute;
left: 0;
top: .25em;
background: #74b0bd;
}
.arbitrator-page .arbitrator-list .trigger,
.arbitrator-page .institute-header.orange .trigger {
color: #e49546;
}
.arbitrator-page .button {
width: auto;
height: auto;
margin: 0;
line-height: normal;
text-align: center;
text-decoration: none;
position: relative;
-webkit-appearance: none;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
outline: 0;
overflow: visible;
cursor: pointer;
vertical-align: middle;
padding: .5555555555555556em .5em;
border: 0;
color: #fff;
text-shadow: none;
margin-top: 1.25em;
font-family: "Proxima Nova Bold", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", Arial, sans-serif;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3888888888888888;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
background: none;
}
.arbitrator-page .trigger {
width: 1em;
height: 1em;
margin: 0;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.arbitrator-page .trigger:after {
border: .25em solid transparent;
position: absolute;
content: "";
width: 0;
height: 0;
margin: 0;
padding: 0;
display: block;
}
.arbitrator-page .trigger .icon {
font-size: 24px;
line-height: 1;
position: relative !important;
inset: auto !important;
}
.arbitrator-page .trigger.circular {
width: 1.6666666666666667em;
height: 1.6666666666666667em;
padding: 0;
color: #c5c4bc;
background-color: #29333a;
top: .5555555555555556em;
right: .5555555555555556em;
-webkit-border-radius: 1000em;
-moz-border-radius: 1000em;
-o-border-radius: 1000em;
border-radius: 1000em;
}
.arbitrator-page .trigger.circular:after {
border-width: .16666666666666666em;
}
.arbitrator-page .trigger.circular .icon {
font-size: .4444444444444444em;
-webkit-text-size-adjust: none;
}
.arbitrator-page .trigger.circular.button.plain {
padding: 0;
}
.arbitrator-page .trigger.circular:hover,
.arbitrator-page .trigger.circular:focus {
color: #fff;
}
.arbitrator-page .trigger.circular.expand:after {
border-top-color: #c5c4bc;
border-right-color: #c5c4bc;
top: .5em;
right: .5em;
}
.arbitrator-page .trigger.circular.expand .icon {
bottom: 1em;
left: 1.125em;
}
.arbitrator-page .trigger.circular.expand:hover:after,
.arbitrator-page .trigger.circular.expand:focus:after {
border-top-color: #fff;
border-right-color: #fff;
}
.arbitrator-page .trigger.circular.collapse:after {
border-color: transparent;
border-left-color: #c5c4bc;
border-bottom-color: #c5c4bc;
bottom: .5em;
left: .5em;
}
.arbitrator-page .trigger.circular.collapse .icon {
top: 1.125em;
right: 1.125em;
}
.arbitrator-page .trigger.circular.collapse:hover:after,
.arbitrator-page .trigger.circular.collapse:focus:after {
border-left-color: #fff;
border-bottom-color: #fff;
}
.arbitrator-page .arbitrator-list button:after,
.arbitrator-page .institute-header.orange .collapse:after {
border-bottom-color: #e49546;
border-left-color: #e49546;
}
.arbitrator-page .no-generatedcontent .trigger.circular.expand .icon {
bottom: 35%;
left: 38%;
}
.arbitrator-page .no-generatedcontent .trigger.circular.collapse .icon {
top: 35%;
right: 38%;
}
.arbitrator-page .icon {
display: inline-block;
vertical-align: middle;
font-size: .85em;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-rendering: optimizeLegibility;
white-space: nowrap;
-webkit-font-feature-settings: "liga", "dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-moz-font-feature-settings: "liga", "dlig";
-ms-font-feature-settings: "liga", "dlig";
-o-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";
font-family: "Symbolset";
}
.arbitrator-page .text-hide {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.arbitrator-page .arbitrator-additional-info {
display: none;
}
.arbitrator-page .arbitrator-additional-info.is-showing {
display: block;
}
.arbitrator-page .trigger.button:after {
content: none;
}
@media all and (min-width: 30em) {
.news-item .object {
min-width: 150px;
}
}
/**
* Responsive Breakpoints
*/
/**
* Base
*/
body {
color: #29333A;
font-family: "Proxima Nova Regular", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.programs-events-continuing-ed {
display: none;
}
/**
* Base & Small Only
*/
/**
* Small
*/
/**
* Medium Only
*/
/**
* Medium
*/
/**
* Large
*/
/**
* Extra Large
*/
/**
* Print
*/
@media print {
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
}
html {
font: 12pt/1.5em Georgia, "Times New Roman", Times, serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
line-height: 1.1em;
margin-bottom: 0.5em;
margin-top: 1em;
page-break-after: avoid;
orphans: 3;
widows: 3;
}
li h1,
li h2,
li h3,
li h4,
li h5,
li h6 {
margin-top: 0;
}
h1 {
font-size: 24pt;
}
h2 {
font-size: 21pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 16pt;
}
h5 {
font-size: 14pt;
}
h6 {
font-size: 12pt;
}
blockquote,
p,
ul,
ol,
dl,
figure,
img {
margin-bottom: 1em;
}
figure img {
margin-bottom: 0;
}
ul,
ol,
dd {
margin-left: 3em;
}
pre,
blockquote {
border-left: 0.5em solid #999;
padding-left: 1.5em;
page-break-inside: avoid;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
figcaption {
text-transform: uppercase;
font-size: 10pt;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
form,
video,
nav {
display: none !important;
}
@page {
margin: 2cm;
}
}
/**
* Prototype Styles
* REMOVE WHEN BEGINNING PRODUCTION
*/
/*# sourceMappingURL=motif.css.map */