/**
* Motif v4.0.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.
*/
:root {
--brand-1: #231F20;
--brand-2: #C60223;
--brand-3: #F1EFF0;
--brand-4: #E3E0E1;
--brand-6: #505050;
--secondary-1: #028475;
--secondary-2: #014E4B;
--secondary-3: #7E138D;
--secondary-4: #43093F;
--secondary-5: #4B81D6;
--secondary-6: #0157DD;
--secondary-7: #E8B877;
--secondary-8: #B7540C;
--secondary-9: #9B004E;
--secondary-10: #600524;
--secondary-11: #036899;
--secondary-12: #022884;
--brandbar-height: 0;
--alert-height: 0;
}
.ticketdfw {
--brand-1: #3F4C55;
--brand-2: #DB6B35;
--brand-3: #FF9A19;
--secondary-1: var(--brand-2);
--secondary-2: var(--brand-1);
--secondary-3: var(--brand-2);
--secondary-4: var(--brand-1);
--secondary-5: var(--brand-2);
--secondary-6: var(--brand-1);
--secondary-7: var(--brand-2);
--secondary-8: var(--brand-1);
--secondary-9: var(--brand-2);
--secondary-10: var(--brand-1);
--secondary-11: var(--brand-2);
--secondary-12: var(--brand-1);
}
:root,
[data-theme="free"],
[data-theme="default"] {
--theme-primary: var(--brand-2);
--theme-secondary: var(--brand-1);
}
[data-theme="speakers"] {
--theme-primary: var(--secondary-1);
--theme-secondary: var(--secondary-2);
}
[data-theme="music"] {
--theme-primary: var(--secondary-3);
--theme-secondary: var(--secondary-4);
}
[data-theme="family"] {
--theme-primary: var(--secondary-5);
--theme-secondary: var(--secondary-6);
}
[data-theme="dance"] {
--theme-primary: var(--secondary-7);
--theme-secondary: var(--secondary-8);
}
[data-theme="comedy"] {
--theme-primary: var(--secondary-9);
--theme-secondary: var(--secondary-10);
}
[data-theme="broadway"],
[data-theme="broadway-theatre"] {
--theme-primary: var(--secondary-11);
--theme-secondary: var(--secondary-12);
}
[data-theme="ticketdfw"] {
--theme-primary: var(--brand-2);
--theme-secondary: var(--brand-1);
}
[data-theme="immersive"] {
--theme-primary: var(--brand-6);
--theme-secondary: var(--brand-1);
}
/*
@param array: Comma-separated key value pairs representing the name of the class and the CSS value (i.e. 'red' #FF0000, 'black' #000000)
@param i: Index in the array (defaults to 1)
@param property: Name of the CSS property (i.e. background, color)
*/
/*
Dynamic Responsive Image
*/
.m-images__image-as-bg {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center;
position: absolute;
top: 0;
left: 0;
}
.no-objectfit .m-images__image-as-bg {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.background__curtain-black {
background: #231F20 !important;
}
.background__att-red {
background: #C60223 !important;
}
.background__warm-gray {
background: #F1EFF0 !important;
}
.background__warm-dark-gray {
background: #E3E0E1 !important;
}
.background__dark-gray {
background: #505050 !important;
}
.background__white {
background: #fff !important;
}
.background__upstage-envy {
background: #028475 !important;
}
.background__gregarious-green {
background: #014E4B !important;
}
.background__ballet-purple {
background: #7E138D !important;
}
.background__rhythmic-purple {
background: #43093F !important;
}
.background__mist-blue {
background: #4B81D6 !important;
}
.background__bright-blue {
background: #0157DD !important;
}
.background__yellow-glow {
background: #E8B877 !important;
}
.background__foil-orange {
background: #B7540C !important;
}
.background__murrey {
background: #9B004E !important;
}
.background__drama {
background: #600524 !important;
}
.background__aria-blue {
background: #036899 !important;
}
.background__tragedy {
background: #022884 !important;
}
/*
The above loops generate the following classes:
.background__curtain-black
.background__att-red
.background__warm-gray
.background__warm-dark-gray
.background__dark-gray
.background__white
.background__upstage-envy
.background__gregarious-green
.background__ballet-purple
.background__rhythmic-purple
.background__mist-blue
.background__bright-blue
.background__yellow-glow
.background__foil-orange
.background__murrey
.background__drama
.background__aria-blue
.background__tragedy
.background__alert-low
.background__alert-med
*/
.background__overlay {
position: relative;
}
.background__overlay::before {
background: rgba(0, 0, 0, 0.5);
content: '';
position: absolute;
height: 100%;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.background__overlay--after {
position: relative;
}
.background__overlay--after::after {
background: rgba(0, 0, 0, 0.5);
content: '';
position: absolute;
height: 100%;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.background__alert-neutral {
background: #9F9F9F;
}
.background__alert-low {
background: #0157DD;
}
.background__alert-medium {
background: #DDBB01;
}
.background__alert-neutral .wysiwyg,
.background__alert-low .wysiwyg,
.background__alert-medium .wysiwyg {
padding-right: 40px;
flex: 1;
}
.color__curtain-black {
color: #231F20 !important;
}
.color__att-red {
color: #C60223 !important;
}
.color__warm-gray {
color: #F1EFF0 !important;
}
.color__warm-dark-gray {
color: #E3E0E1 !important;
}
.color__dark-gray {
color: #505050 !important;
}
.color__white {
color: #fff !important;
}
.color__upstage-envy {
color: #028475 !important;
}
.color__gregarious-green {
color: #014E4B !important;
}
.color__ballet-purple {
color: #7E138D !important;
}
.color__rhythmic-purple {
color: #43093F !important;
}
.color__mist-blue {
color: #4B81D6 !important;
}
.color__bright-blue {
color: #0157DD !important;
}
.color__yellow-glow {
color: #E8B877 !important;
}
.color__foil-orange {
color: #B7540C !important;
}
.color__murrey {
color: #9B004E !important;
}
.color__drama {
color: #600524 !important;
}
.color__aria-blue {
color: #036899 !important;
}
.color__tragedy {
color: #022884 !important;
}
/*
The above loops generate the following classes:
.color__curtain-black
.color__att-red
.color__warm-gray
.color__warm-dark-gray
.color__dark-gray
.color__white
.color__upstage-envy
.color__gregarious-green
.color__ballet-purple
.color__rhythmic-purple
.color__mist-blue
.color__bright-blue
.color__yellow-glow
.color__foil-orange
.color__murrey
.color__drama
.color__aria-blue
.color__tragedy
*/
/*
Forms
*/
form {
margin: 0;
}
fieldset {
border: none;
margin: 0;
padding: 0;
}
legend {
width: 100%;
border: 0;
padding: 0;
display: block;
white-space: normal;
}
/*
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,
select,
textarea {
font-size: 100%;
margin: 0;
display: block;
}
input,
textarea {
width: 100%;
font-size: 1em;
padding: 0.3125rem 0.25rem;
outline: none;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus,
input:active,
textarea:active,
input.is-current,
textarea.is-current {
z-index: 1;
}
input {
line-height: normal;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
display: inline-block;
cursor: pointer;
}
input[disabled] {
cursor: default;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input:is([type="checkbox"], [type="radio"]) {
margin: 3px;
padding: 0;
box-sizing: border-box;
position: relative;
vertical-align: top;
width: auto;
}
input:is([type="checkbox"], [type="radio"]).elements__psuedo {
inset: 0;
position: absolute;
width: 100%;
height: 100%;
margin: auto;
opacity: 0;
}
input[type="email"] {
border-radius: 0;
}
input[type="search"] {
-webkit-appearance: none;
border-radius: 0;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
height: 5rem;
}
select {
width: auto;
max-width: 100%;
font-size: 0.8125em;
}
/*
Input Label Elements
Child form elements of the `.elements__input-label` class are given a little bit of
spacing to separate them from the label text. (See also `.elements__input-label` in the
form `type.less` file.)
````input-label-elements
Text Field
Textarea
Select
Placeholder text
````
*/
.elements__input-label input,
.elements__input-label textarea,
.elements__input-label select {
margin-top: 0.625em;
margin-bottom: 0.625em;
}
/*
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
*/
.elements__input--eighth {
width: 12.5%;
}
.elements__input--quarter {
width: 25%;
}
.elements__input--half {
width: 50%;
}
.elements__input--xxxs {
max-width: 30px;
}
.elements__input--xxs {
max-width: 50px;
}
.elements__input--xs {
max-width: 100px;
}
.elements__input--s {
max-width: 175px;
}
.elements__input--m {
max-width: 250px;
}
.elements__input--l {
max-width: 350px;
}
/*
Form Modules
````attached-label-before
$
````
````attached-label-after
.com
````
````attached-label-before-and-after
www.
.com
````
````attached-label-submit
````
*/
.elements__attached-label {
display: table;
overflow: hidden;
}
.elements__attached-label > * {
margin-top: 0;
display: table-cell;
vertical-align: middle;
}
.elements__attached-label > * > :first-child {
margin-top: 0;
}
.elements__attached-label [class*="button"] {
display: block;
width: 100%;
}
/*
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.
*/
.elements__input-label {
padding-top: 1.25em;
}
.elements__input-hint {
color: #837f81;
margin-top: 0.3125em;
}
.elements__input-desc {
margin-top: 0em;
}
/*
Fieldset
A simple class to add to fieldsets that want a little more spacing.
*/
.elements__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?
*/
.elements__checkbox-list {
margin-top: 0.625em;
}
legend + .elements__checkbox-list {
margin-top: 0em;
}
legend .elements__input-label {
padding-bottom: 0.3125em;
}
legend + .elements__input-desc {
/* Positioning */
position: relative;
top: -0.3125rem;
}
/*
Alert/Error Messages
*/
.elements__input-alert-msg {
background: #F7E5E4;
color: #C60223;
padding: 0.75rem;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
border: 1px solid #C60223;
}
/*
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
*/
.messaging__is-successful input,
.messaging__is-successful textarea,
.messaging__is-successful select {
border-color: #72bc44;
}
.messaging__is-erroneous input,
.messaging__is-erroneous textarea,
.messaging__is-erroneous select {
border-color: #D92A23;
}
/*
Form Messaging
Within labels, there are input alerts that apply to individual fields.
Text Field
This field is required.
*/
[class*="messaging__input-alert"] {
/* Display & Box Model */
display: inline-block;
/* Pretty */
color: #C60223;
}
.messaging__input-alert--warning {
color: #ec7e04;
}
.messaging__input-alert--error {
color: #D92A23;
}
.messaging__input-alert--success {
color: #72bc44;
}
/*
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/)
*/
/* Imported Fonts
==========================*/
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_qU7NSg.ttf) format('truetype');
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_m07NSg.ttf) format('truetype');
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_TknNSg.ttf) format('truetype');
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_KUnNSg.ttf) format('truetype');
}
@font-face {
font-family: 'GT America';
src: url('/fonts/GTAmerica/GT-America-Expanded-Black.woff2') format('woff2'), url('/fonts/GTAmerica/GT-America-Expanded-Black.woff') format('woff'), url('/fonts/GTAmerica/GT-America-Expanded-Black.ttf') format('truetype');
font-weight: normal;
font-display: swap;
}
/*
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).
````typographic-scale
Canon Text (38px)
Paragon Text (30px)
Primer Text (24px)
Tertia Text (18px)
Normal Text (14px)
Petite Text (12px)
````
Long Modifiers
The type sizes are given the `--long` modifier, allowing you to use
each type size with varying line heights.
I'm just a small bit of text, my `line-height`
can be tight.
I'm a long paragraph, so my `line-height`
should be longer to enhance legibility. ...
*/
.hierarchy__long-text,
.hierarchy__plus-7--long,
.hierarchy__plus-6--long,
.hierarchy__plus-5--long,
.hierarchy__plus-4--long,
.hierarchy__plus-3--long,
.hierarchy__plus-2--long,
.hierarchy__plus-1--long,
.hierarchy__base--long,
.hierarchy__minus-1--long,
.hierarchy__minus-2--long,
.hierarchy__minus-3--long {
line-height: 1.5;
}
.hierarchy__plus-7,
.hierarchy__plus-7--long {
font-size: 36px;
font-size: 2.25rem;
line-height: 1.5;
}
.hierarchy__plus-6,
.hierarchy__plus-6--long {
font-size: 36px;
font-size: 2.25rem;
line-height: 1.5;
}
.hierarchy__plus-5,
.hierarchy__plus-5--long {
font-size: 32px;
font-size: 2rem;
line-height: 1.5;
}
.hierarchy__plus-4,
.hierarchy__plus-4--long {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.5;
}
.hierarchy__plus-3,
.hierarchy__plus-3--long {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.5;
}
.hierarchy__plus-2,
.hierarchy__plus-2--long {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.54545455;
}
.hierarchy__plus-1,
.hierarchy__plus-1--long {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.55555556;
}
.hierarchy__base,
.hierarchy__base--long {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
.hierarchy__minus-1,
.hierarchy__minus-1--long {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.57142857;
}
.hierarchy__minus-2,
.hierarchy__minus-2--long {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
}
.hierarchy__minus-3,
.hierarchy__minus-3--long {
font-size: 10px;
font-size: 0.625rem;
line-height: 1.6;
}
/*
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
````
*/
.styles__h1,
.styles__h2,
.styles__h3,
.styles__h4,
.styles__h5,
.styles__h6 {
margin-top: 0;
margin-bottom: 0;
color: #231F20;
font-weight: 800;
}
.styles__h1.styles__gt-america,
.styles__h2.styles__gt-america,
.styles__h3.styles__gt-america,
.styles__h4.styles__gt-america,
.styles__h5.styles__gt-america,
.styles__h6.styles__gt-america {
font-weight: 900;
}
.styles__h1 {
font-size: 32px;
font-size: 2rem;
line-height: 1.25;
letter-spacing: normal;
}
.styles__h1.styles__gt-america {
font-size: 32px;
font-size: 2rem;
line-height: 1.1875;
letter-spacing: 0.1rem;
}
@media all and (min-width: 48em) {
.styles__h1 {
font-size: 44px;
font-size: 2.75rem;
line-height: 1.27272727;
letter-spacing: normal;
}
.styles__h1.styles__gt-america {
font-size: 44px;
font-size: 2.75rem;
line-height: 1.13636364;
letter-spacing: 0.1375rem;
}
}
.styles__h2 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.25;
letter-spacing: -0.125rem;
}
.styles__h2.styles__gt-america {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.21428571;
letter-spacing: 0.0875rem;
}
@media all and (min-width: 48em) {
.styles__h2 {
font-size: 36px;
font-size: 2.25rem;
line-height: 1.25;
letter-spacing: normal;
}
.styles__h2.styles__gt-america {
font-size: 36px;
font-size: 2.25rem;
line-height: 1.16666667;
letter-spacing: 0.1125rem;
}
}
.styles__h3 {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: normal;
}
.styles__h3.styles__gt-america {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: 0.1375rem;
}
@media all and (min-width: 48em) {
.styles__h3 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.25;
letter-spacing: -0.00375rem;
}
.styles__h3.styles__gt-america {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.21428571;
letter-spacing: 0.0875rem;
}
}
.styles__h4 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
letter-spacing: normal;
}
.styles__h4.styles__gt-america {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
letter-spacing: normal;
}
@media all and (min-width: 48em) {
.styles__h4 {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: normal;
}
.styles__h4.styles__gt-america {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: 0.1375rem;
}
}
.styles__h5 {
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
letter-spacing: normal;
}
.styles__h5.styles__gt-america {
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
letter-spacing: normal;
}
@media all and (min-width: 48em) {
.styles__h5 {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
letter-spacing: normal;
}
.styles__h5.styles__gt-america {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
letter-spacing: normal;
}
}
.styles__h6 {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.42857143;
letter-spacing: normal;
}
.styles__h6.styles__gt-america {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.57142857;
letter-spacing: normal;
}
@media all and (min-width: 48em) {
.styles__h6 {
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
letter-spacing: normal;
}
.styles__h6.styles__gt-america {
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
letter-spacing: normal;
}
}
/*
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.
````
*/
.styles__body-text,
.elements__input-hint,
.elements__input-desc,
[class*="messaging__input-alert"] {
font-size: 16px;
font-size: 1rem;
line-height: 1.5625;
color: #231F20;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 400;
}
.styles__body-text--large {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.55555556;
}
.styles__body-text--small {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.57142857;
}
.styles__body-text--smallest {
font-size: 10px;
font-size: 0.625rem;
line-height: 1.4;
}
.styles__uppercase {
text-transform: uppercase;
}
.styles__italic {
font-style: italic;
}
.styles__normal {
font-weight: normal;
}
.styles__jakarta--regular {
font-weight: 400;
}
.styles__medium,
.styles__jakarta--medium {
font-weight: 500;
}
.styles__bold,
.styles__jakarta--bold {
font-weight: 700;
}
.styles__extra-bold,
.styles__jakarta--extra-bold {
font-weight: 800;
}
.styles__gt-america {
font-family: "GT America", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
/*
Blockquote
A basic blockquote.
````blockquote
At last we will reveal ourselves to the the Jedi. At last we will have
our revenge.
Darth Maul
````
*/
/*
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: 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: 1em;
}
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;
}
/*
HTML5 Display Definitions
Set the appropriate `display` definitions for new HTML5 elements.
The majority will be displayed `block`.
*/
*,
*:before,
*:after {
-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;
}
[x-cloak],
[hidden] {
display: none !important;
}
/*
FLEX UTILITIES
@author Enid Soto
@author Travis Self
Create a parent flex element by applying the class `.flex`, and add flex items with the class `.flex__col`. You can also use the grid system's column classes, i.e. `grid__lg-half`.
Add gutters to the columns by adding the class `.flex__gutters` to the parent flex container:
.m-flex__element()
--------------------
This mixin will set the display to flex, and also set the flex-direction and flex-wrap to their default values (row and nowrap, respectively). If you are using the standard motif column classes (i.e. grid__sm-half), you must set the gutters to true.
You can set new values with the variables `@direction` and `@wrap`, like so:
.m-flex__element(@direction: column, @wrap: wrap);
.m-flex__order(@number)
-------------------------
Use this mixin to set the order of each flex item within a parent flex element. Accepts a unitless value only.
.m-flex(@grow, @shrink, @basis)
--------------------------------
This mixin sets the shorthand `flex` property, which combines flex-grow, flex-shrink and flex-basis.
@grow: specifies how much a flex item will grow relative to the rest of the flexible items inside the same container. Accepts a unitless value only. Negative values are invalid.
@shrink: specifies how much a flex item will shrink relative to the rest of the flexible items inside the same container. Accepts a unitless value only. Negative values are invalid.
@basis: specifies the initial length of a flexible item. Accepts a length (20%, 5rem, etc) or a keyword.
Note: IE 9 and earlier do not support the flex property.
*/
.flex {
flex-direction: row;
flex-wrap: nowrap;
display: flex;
}
.flex--inline {
flex-direction: row;
flex-wrap: nowrap;
display: inline-flex;
}
.flex__full,
.flex__col {
width: 100%;
}
.flex__gutters {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.flex__gutters:before,
.flex__gutters:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.flex__gutters:after {
clear: both;
}
@media all and (min-width: 48em) and (max-width: 59.9375em) {
.flex__gutters {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
.flex__gutters:before,
.flex__gutters:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.flex__gutters:after {
clear: both;
}
}
@media all and (min-width: 60em) {
.flex__gutters {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
.flex__gutters:before,
.flex__gutters:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.flex__gutters:after {
clear: both;
}
}
.flex__gutters .flex__col {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
@media all and (min-width: 48em) and (max-width: 59.9375em) {
.flex__gutters .flex__col {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
@media all and (min-width: 60em) {
.flex__gutters .flex__col {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
/* The `flex-direction` helper classes are:
.flex__dir--row
.flex__dir--row-reverse
.flex__dir--column
.flex__dir--column-reverse
*/
.flex__dir--row {
flex-direction: row;
}
.flex__dir--row-reverse {
flex-direction: row-reverse;
}
.flex__dir--column {
flex-direction: column;
}
.flex__dir--column-reverse {
flex-direction: column-reverse;
}
/* The `flex-wrap` helper classes are:
.flex__wrp--nowrap
.flex__wrp--wrap
.flex__wrp--wrap-reverse
*/
.flex__wrp--nowrap {
flex-wrap: nowrap;
}
.flex__wrp--wrap {
flex-wrap: wrap;
}
.flex__wrp--wrap-reverse {
flex-wrap: wrap-reverse;
}
/* The `justify-content` helper classes are:
.flex__jc--flex-start
.flex__jc--flex-end
.flex__jc--center
.flex__jc--space-between
.flex__jc--space-around
.flex__jc--space-evenly
*/
.flex__jc--flex-start {
justify-content: flex-start;
}
.flex__jc--flex-end {
justify-content: flex-end;
}
.flex__jc--center {
justify-content: center;
}
.flex__jc--space-between {
justify-content: space-between;
}
.flex__jc--space-around {
justify-content: space-around;
}
.flex__jc--space-evenly {
justify-content: space-evenly;
}
/* The `align-items` helper classes are:
.flex__ai--flex-start
.flex__ai--flex-end
.flex__ai--center
.flex__ai--stretch
.flex__ai--baseline
*/
.flex__ai--flex-start {
align-items: flex-start;
}
.flex__ai--flex-end {
align-items: flex-end;
}
.flex__ai--center {
align-items: center;
}
.flex__ai--stretch {
align-items: stretch;
}
.flex__ai--baseline {
align-items: baseline;
}
/* The `align-content` helper classes are:
.flex__ac--normal
.flex__ac--flex-start
.flex__ac--flex-end
.flex__ac--center
.flex__ac--space-between
.flex__ac--space-around
.flex__ac--space-evenly
.flex__ac--stretch
NOTE: These properties ONLY take effect on multi-line flexible containers, where flex-flow is set to either wrap or wrap-reverse
*/
.flex__ac--normal {
align-content: normal;
}
.flex__ac--flex-start {
align-content: flex-start;
}
.flex__ac--flex-end {
align-content: flex-end;
}
.flex__ac--center {
align-content: center;
}
.flex__ac--space-between {
align-content: space-between;
}
.flex__ac--space-around {
align-content: space-around;
}
.flex__ac--space-evenly {
align-content: space-evenly;
}
.flex__ac--stretch {
align-content: stretch;
}
/* The `align-self` helper classes are:
.flex__as--auto
.flex__as--flex-start
.flex__as--flex-end
.flex__as--center
.flex__as--baseline
.flex__as--stretch
*/
.flex__as--auto {
align-self: auto;
}
.flex__as--flex-start {
align-self: flex-start;
}
.flex__as--flex-end {
align-self: flex-end;
}
.flex__as--center {
align-self: center;
}
.flex__as--baseline {
align-self: baseline;
}
.flex__as--stretch {
align-self: stretch;
}
.flex__js--auto {
justify-self: auto;
}
.flex__js--flex-start {
justify-self: flex-start;
}
.flex__js--flex-end {
justify-self: flex-end;
}
.flex__js--center {
justify-self: center;
}
.flex__js--baseline {
justify-self: baseline;
}
.flex__js--stretch {
justify-self: stretch;
}
@media all and (max-width: 47.9375em) {
.flex__stack--sm {
flex-direction: column;
}
.flex__stack--sm-reverse {
flex-direction: column-reverse;
}
}
@media all and (max-width: 59.9375em) {
.flex__stack--med {
flex-direction: column;
}
.flex__stack--med-reverse {
flex-direction: column-reverse;
}
}
@media all and (max-width: 77.4375em) {
.flex__stack--lg {
flex-direction: column;
}
.flex__stack--lg-reverse {
flex-direction: column-reverse;
}
}
.flex__gap--s {
gap: 0.625rem;
}
.flex__gap--m {
gap: 1.25rem;
}
.flex__gap--l {
gap: 2.5rem;
}
.flex__row--s {
row-gap: 0.625rem;
}
.flex__row--m {
row-gap: 1.25rem;
}
.flex__row--l {
row-gap: 2.5rem;
}
.flex__push--left {
margin-right: auto;
}
.flex__push--right {
margin-left: auto;
}
.flex__push--top {
margin-bottom: auto;
}
.flex__push--bottom {
margin-top: auto;
}
.flex__all {
flex: 1 1 auto;
}
.flex__grow {
flex: 1 0 auto;
}
.flex__shrink {
flex: 0 1 auto;
}
.flex__none {
flex: 0 0 auto;
}
@media all and (min-width: 48em) {
.flex__gap--column {
gap: calc(((100% + 1.5rem) / 10) * 1);
}
}
@media all and (min-width: 60em) {
.flex__gap--column {
gap: calc(((100% + 1.5rem) / 10) * 1);
}
}
.flex__gap--gutter {
gap: 1.5rem;
}
.flex__gap--normal {
gap: normal;
}
@media all and (min-width: 30em) {
.flex__col-width-sm--100 {
width: 100%;
}
.flex__col-width-sm--50 {
width: 50%;
}
.flex__col-width-sm--25 {
width: 25%;
}
}
@media all and (min-width: 48em) {
.flex__col-width-md--100 {
width: 100%;
}
.flex__col-width-md--50 {
width: 50%;
}
.flex__col-width-md--25 {
width: 25%;
}
.flex__col-width-md--33 {
width: 33%;
}
}
@media all and (min-width: 60em) {
.flex__col-width-lg--100 {
width: 100%;
}
.flex__col-width-lg--50 {
width: 50%;
}
.flex__col-width-lg--25 {
width: 25%;
}
.flex__col-width-lg--33 {
width: 33%;
}
}
/*
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**: `.grid__sm-row` (Grid, Small, Row)
- **Columns**: `.grid__sm` (Grid, Column, Small)
- **Column Width**: `.grid__sm-half` (Grid, Small, Half-Width)
However, to be slightly more succinct, you can use the condensed column syntax:
- **Columns (Condensed)**: `.grid__sm-half` (Grid, Column, Small, Half-Width)
In brief, the way the grid works is that `.grid__sm` 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 `.grid__sm-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...
- `.grid__lg-10of12
- `.grid__med-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`
*/
.grid__halves,
.grid__thirds,
.grid__quarters {
margin-left: -0.5rem;
margin-right: -0.5rem;
/* Pretty */
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.grid__halves:before,
.grid__thirds:before,
.grid__quarters:before,
.grid__halves:after,
.grid__thirds:after,
.grid__quarters:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.grid__halves:after,
.grid__thirds:after,
.grid__quarters:after {
clear: both;
}
ul.grid__halves,
ul.grid__thirds,
ul.grid__quarters {
padding-left: 0;
list-style: none outside none;
}
.grid__halves > *,
.grid__thirds > *,
.grid__quarters > * {
display: inline;
float: left;
padding-left: 0.5rem;
padding-right: 0.5rem;
/* Display & Box Model */
display: inline-block;
/* Positioning */
float: none;
/* Pretty */
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.grid__halves > * {
width: 50%;
}
.grid__thirds > * {
width: 33.33333%;
}
.grid__quarters > * {
width: 25%;
}
.opera-only :-o-prefocus,
.grid__thirds {
word-spacing: -0.43em;
}
/**
* Mobile Grid
*/
@media all and (max-width: 47.9375em) {
[class*="grid__sm-row"],
.grid__sm-quarters,
.grid__sm-thirds,
.grid__sm-halves {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
[class*="grid__sm-row"]:before,
[class*="grid__sm-row"]:after,
.grid__sm-quarters:before,
.grid__sm-quarters:after,
.grid__sm-thirds:before,
.grid__sm-thirds:after,
.grid__sm-halves:before,
.grid__sm-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="grid__sm-row"]:after,
.grid__sm-quarters:after,
.grid__sm-thirds:after,
.grid__sm-halves:after {
clear: both;
}
ul[class*="grid__sm-row"],
ul.grid__sm-quarters,
ul.grid__sm-thirds,
ul.grid__sm-halves {
padding-left: 0;
list-style: none outside none;
}
.grid__sm-row--rtl > [class*="grid__sm"] {
float: right;
}
.grid__sm-row--ltr > [class*="grid__sm"] {
float: left;
}
[class*="grid__sm"]:not([class*="grid__sm-row"]) {
display: inline;
float: left;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.grid__sm-quarter,
.grid__sm-quarters > * {
width: 25%;
}
.grid__sm-third,
.grid__sm-thirds > * {
width: 33.33333%;
}
.grid__sm-half,
.grid__sm-halves > * {
width: 50%;
}
.grid__sm-two-thirds {
width: 66.66667%;
}
.grid__sm-three-quarters {
width: 75%;
}
.grid__sm-full {
width: 100%;
}
.grid__sm-row--flex,
.grid__sm-quarters,
.grid__sm-thirds,
.grid__sm-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.grid__sm-row--flex > [class*="grid__sm"],
.grid__sm-quarters > *,
.grid__sm-thirds > *,
.grid__sm-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.grid__sm-row--flex,
.grid__sm-quarters,
.grid__sm-thirds,
.grid__sm-halves {
word-spacing: -0.43em;
}
}
/**
* Tablet Grid
*/
@media all and (min-width: 48em) and (max-width: 59.9375em) {
[class*="grid__med-row"],
.grid__med-quarters,
.grid__med-thirds,
.grid__med-halves {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
[class*="grid__med-row"]:before,
[class*="grid__med-row"]:after,
.grid__med-quarters:before,
.grid__med-quarters:after,
.grid__med-thirds:before,
.grid__med-thirds:after,
.grid__med-halves:before,
.grid__med-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="grid__med-row"]:after,
.grid__med-quarters:after,
.grid__med-thirds:after,
.grid__med-halves:after {
clear: both;
}
ul[class*="grid__med-row"],
ul.grid__med-quarters,
ul.grid__med-thirds,
ul.grid__med-halves {
padding-left: 0;
list-style: none outside none;
}
.grid__med-row--rtl > [class*="grid__med"] {
float: right;
}
.grid__med-row--ltr > [class*="grid__med"] {
float: left;
}
[class*="grid__med"]:not([class*="grid__med-row"]) {
display: inline;
float: left;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.grid__med-quarter,
[class*="grid__med-2of8"],
.grid__med-quarters > * {
width: 25%;
}
.grid__med-third,
[class*="grid__med-3of9"],
[class*="grid__med-2of6"],
.grid__med-thirds > * {
width: 33.33333%;
}
.grid__med-half,
[class*="grid__med-5of10"],
[class*="grid__med-4of8"],
[class*="grid__med-3of6"],
.grid__med-halves > * {
width: 50%;
}
.grid__med-two-thirds,
[class*="grid__med-6of9"],
[class*="grid__med-4of6"] {
width: 66.66667%;
}
.grid__med-three-quarters,
[class*="grid__med-6of8"] {
width: 75%;
}
.grid__med-full {
width: 100%;
}
[class*="grid__med-9of10"] {
width: 90%;
}
[class*="grid__med-8of10"] {
width: 80%;
}
[class*="grid__med-7of10"] {
width: 70%;
}
[class*="grid__med-6of10"] {
width: 60%;
}
[class*="grid__med-4of10"] {
width: 40%;
}
[class*="grid__med-3of10"] {
width: 30%;
}
[class*="grid__med-2of10"] {
width: 20%;
}
[class*="grid__med-1of10"] {
width: 10%;
}
[class*="grid__med-8of9"] {
width: 88.88889%;
}
[class*="grid__med-7of9"] {
width: 77.77778%;
}
[class*="grid__med-5of9"] {
width: 55.55556%;
}
[class*="grid__med-4of9"] {
width: 44.44444%;
}
[class*="grid__med-2of9"] {
width: 22.22222%;
}
[class*="grid__med-1of9"] {
width: 11.11111%;
}
[class*="grid__med-7of8"] {
width: 87.5%;
}
[class*="grid__med-5of8"] {
width: 62.5%;
}
[class*="grid__med-3of8"] {
width: 37.5%;
}
[class*="grid__med-1of8"] {
width: 12.5%;
}
[class*="grid__med-6of7"] {
width: 85.71429%;
}
[class*="grid__med-5of7"] {
width: 71.42857%;
}
[class*="grid__med-4of7"] {
width: 57.14286%;
}
[class*="grid__med-3of7"] {
width: 42.85714%;
}
[class*="grid__med-2of7"] {
width: 28.57143%;
}
[class*="grid__med-1of7"] {
width: 14.28571%;
}
[class*="grid__med-5of6"] {
width: 83.33333%;
}
[class*="grid__med-1of6"] {
width: 16.66667%;
}
[class*="grid__med-4of5"] {
width: 80%;
}
[class*="grid__med-3of5"] {
width: 60%;
}
[class*="grid__med-2of5"] {
width: 40%;
}
[class*="grid__med-1of5"] {
width: 20%;
}
.grid__med-row--flex,
.grid__med-quarters,
.grid__med-thirds,
.grid__med-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.grid__med-row--flex > [class*="grid__med"],
.grid__med-quarters > *,
.grid__med-thirds > *,
.grid__med-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.grid__med-row--flex,
.grid__med-quarters,
.grid__med-thirds,
.grid__med-halves {
word-spacing: -0.43em;
}
}
/**
* Desktop Grid
*/
/*
````desktop-grid
````
*/
@media all and (min-width: 60em) {
[class*="grid__lg-row"],
.grid__lg-quarters,
.grid__lg-thirds,
.grid__lg-halves {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
[class*="grid__lg-row"]:before,
[class*="grid__lg-row"]:after,
.grid__lg-quarters:before,
.grid__lg-quarters:after,
.grid__lg-thirds:before,
.grid__lg-thirds:after,
.grid__lg-halves:before,
.grid__lg-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="grid__lg-row"]:after,
.grid__lg-quarters:after,
.grid__lg-thirds:after,
.grid__lg-halves:after {
clear: both;
}
ul[class*="grid__lg-row"],
ul.grid__lg-quarters,
ul.grid__lg-thirds,
ul.grid__lg-halves {
padding-left: 0;
list-style: none outside none;
}
.grid__lg-row--rtl > [class*="grid__lg"] {
float: right;
}
.grid__lg-row--ltr > [class*="grid__lg"] {
float: left;
}
[class*="grid__lg"]:not([class*="grid__lg-row"]) {
display: inline;
float: left;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.grid__lg-quarter,
.grid__lg-quarter,
[class*="grid__lg-2of8"],
[class*="grid__lg-2of8"],
.grid__lg-quarters > *,
.grid__lg-quarters > * {
width: 25%;
}
.grid__lg-third,
.grid__lg-third,
[class*="grid__lg-3of9"],
[class*="grid__lg-3of9"],
[class*="grid__lg-2of6"],
[class*="grid__lg-2of6"],
.grid__lg-thirds > *,
.grid__lg-thirds > * {
width: 33.33333%;
}
.grid__lg-half,
.grid__lg-half,
[class*="grid__lg-5of10"],
[class*="grid__lg-5of10"],
[class*="grid__lg-4of8"],
[class*="grid__lg-4of8"],
[class*="grid__lg-3of6"],
[class*="grid__lg-3of6"],
.grid__lg-halves > *,
.grid__lg-halves > * {
width: 50%;
}
.grid__lg-two-thirds,
.grid__lg-two-thirds,
[class*="grid__lg-6of9"],
[class*="grid__lg-6of9"],
[class*="grid__lg-4of6"],
[class*="grid__lg-4of6"] {
width: 66.66667%;
}
.grid__lg-three-quarters,
.grid__lg-three-quarters,
[class*="grid__lg-6of8"],
[class*="grid__lg-6of8"] {
width: 75%;
}
.grid__lg-full,
.grid__lg-full {
width: 100%;
}
[class*="grid__lg-9of10"] {
width: 90%;
}
[class*="grid__lg-8of10"] {
width: 80%;
}
[class*="grid__lg-7of10"] {
width: 70%;
}
[class*="grid__lg-6of10"] {
width: 60%;
}
[class*="grid__lg-4of10"] {
width: 40%;
}
[class*="grid__lg-3of10"] {
width: 30%;
}
[class*="grid__lg-2of10"] {
width: 20%;
}
[class*="grid__lg-1of10"] {
width: 10%;
}
[class*="grid__lg-8of9"] {
width: 88.88889%;
}
[class*="grid__lg-7of9"] {
width: 77.77778%;
}
[class*="grid__lg-5of9"] {
width: 55.55556%;
}
[class*="grid__lg-4of9"] {
width: 44.44444%;
}
[class*="grid__lg-2of9"] {
width: 22.22222%;
}
[class*="grid__lg-1of9"] {
width: 11.11111%;
}
[class*="grid__lg-7of8"] {
width: 87.5%;
}
[class*="grid__lg-5of8"] {
width: 62.5%;
}
[class*="grid__lg-3of8"] {
width: 37.5%;
}
[class*="grid__lg-1of8"] {
width: 12.5%;
}
[class*="grid__lg-6of7"] {
width: 85.71429%;
}
[class*="grid__lg-5of7"] {
width: 71.42857%;
}
[class*="grid__lg-4of7"] {
width: 57.14286%;
}
[class*="grid__lg-3of7"] {
width: 42.85714%;
}
[class*="grid__lg-2of7"] {
width: 28.57143%;
}
[class*="grid__lg-1of7"] {
width: 14.28571%;
}
[class*="grid__lg-5of6"] {
width: 83.33333%;
}
[class*="grid__lg-1of6"] {
width: 16.66667%;
}
[class*="grid__lg-4of5"] {
width: 80%;
}
[class*="grid__lg-3of5"] {
width: 60%;
}
[class*="grid__lg-2of5"] {
width: 40%;
}
[class*="grid__lg-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.
````
*/
.grid__lg-row--flex,
.grid__lg-quarters,
.grid__lg-thirds,
.grid__lg-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.grid__lg-row--flex > [class*="grid__lg"],
.grid__lg-quarters > *,
.grid__lg-thirds > *,
.grid__lg-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.grid__lg-row--flex,
.grid__lg-quarters,
.grid__lg-thirds,
.grid__lg-halves {
word-spacing: -0.43em;
}
}
/*
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.
*/
.presentational__align-left {
text-align: left;
}
.presentational__align-center {
text-align: center;
}
.presentational__align-right {
text-align: right;
}
.presentational__align-sub {
vertical-align: sub;
}
.presentational__align-middle {
vertical-align: middle;
}
.presentational__align-top {
vertical-align: top;
}
/*
Floats
Next, we have classes for floating elements.
*/
.presentational__float-left {
float: left;
}
.presentational__float-center {
margin-left: auto;
margin-right: auto;
}
.presentational__float-right {
float: right;
}
.presentational__float-none {
float: none;
}
.presentational__clear {
clear: both;
}
/*
"New Line"
Turns an `inline` or `inline-block` element into a `block` one.
*/
.presentational__new-line,
.elements__input-label,
.elements__input-hint,
.elements__input-desc {
display: block;
}
.presentational__group {
/* Mixins */
}
.presentational__group:before,
.presentational__group:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.presentational__group:after {
clear: both;
}
/*
"Display None"
Sets the `display` of an element to `none`.
*/
.presentational__display-none {
display: none;
}
/*
"Display Inline-Block"
Sets the `display` of an element to `inline-block`.
*/
.presentational__display-inline-block {
display: inline-block;
}
/*
"Is Hidden"
Visually hides content in a way that leaves it accessible to screen readers.
Like more magic, makes the visible invisible.
*/
.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;
}
.presentational__is-hidden.focusable:active,
.presentational__is-hidden.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden a,
body:hover .presentational__is-hidden input,
body:hover .presentational__is-hidden button {
display: none;
}
@media all and (max-width: 47.9375em) {
.presentational__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;
}
.presentational__is-hidden-small.focusable:active,
.presentational__is-hidden-small.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden-small a,
body:hover .presentational__is-hidden-small input,
body:hover .presentational__is-hidden-small button {
display: none;
}
}
@media all and (min-width: 48em) and (max-width: 59.9375em) {
.presentational__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;
}
.presentational__is-hidden-medium.focusable:active,
.presentational__is-hidden-medium.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden-medium a,
body:hover .presentational__is-hidden-medium input,
body:hover .presentational__is-hidden-medium button {
display: none;
}
}
@media all and (min-width: 60em) {
.presentational__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;
}
.presentational__is-hidden-large.focusable:active,
.presentational__is-hidden-large.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden-large a,
body:hover .presentational__is-hidden-large input,
body:hover .presentational__is-hidden-large button {
display: none;
}
}
/*
"Isn't Hidden"
Undoes `.is-hidden`.
*/
.presentational__isnt-hidden {
/* Mixins */
width: auto;
height: auto;
margin: 0;
position: relative;
clip: auto;
}
body:hover .presentational__isnt-hidden a,
body:hover .presentational__isnt-hidden input,
body:hover .presentational__isnt-hidden button {
display: inline-block;
}
.lte7 body:hover .presentational__isnt-hidden a,
.lte7 body:hover .presentational__isnt-hidden input,
.lte7 body:hover .presentational__isnt-hidden button {
display: inline;
zoom: 1;
}
/*
"Relative Container"
Exactly what it sounds like.
*/
.presentational__relative-container,
[class*="messaging__input-alert"] {
position: relative;
}
/*
"No Scroll"
Paired with "motif.utitlies.js" to make the page non-scrollable
*/
html.presentational__no-scroll,
body.presentational__no-scroll {
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
}
.presentational__height-full {
height: 100%;
}
/*
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`, `x`, `n` = small (~`5px`), medium (~`10px`), large (~`20px`), x-large (~`40px`) none (`0`)
For example: `.spacing__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`.
*/
.spacing__ptn,
.spacing__pvn,
.spacing__pan {
padding-top: 0 !important;
}
.spacing__pts,
.spacing__pvs,
.spacing__pas {
padding-top: 0.3125rem !important;
}
.spacing__ptm,
.spacing__pvm,
.spacing__pam {
padding-top: 0.625rem !important;
}
.spacing__ptl,
.spacing__pvl,
.spacing__pal {
padding-top: 1.25rem !important;
}
.spacing__ptx,
.spacing__pvx,
.spacing__pax {
padding-top: 2.5rem !important;
}
.spacing__prn,
.spacing__phn,
.spacing__pan {
padding-right: 0 !important;
}
.spacing__prs,
.spacing__phs,
.spacing__pas {
padding-right: 0.3125rem !important;
}
.spacing__prm,
.spacing__phm,
.spacing__pam {
padding-right: 0.625rem !important;
}
.spacing__prl,
.spacing__phl,
.spacing__pal {
padding-right: 1.25rem !important;
}
.spacing__prx,
.spacing__phx,
.spacing__pax {
padding-right: 2.5rem !important;
}
.spacing__pbn,
.spacing__pvn,
.spacing__pan {
padding-bottom: 0 !important;
}
.spacing__pbs,
.spacing__pvs,
.spacing__pas {
padding-bottom: 0.3125rem !important;
}
.spacing__pbm,
.spacing__pvm,
.spacing__pam {
padding-bottom: 0.625rem !important;
}
.spacing__pbl,
.spacing__pvl,
.spacing__pal {
padding-bottom: 1.25rem !important;
}
.spacing__pbx,
.spacing__pvx,
.spacing__pax {
padding-bottom: 2.5rem !important;
}
.spacing__pln,
.spacing__phn,
.spacing__pan {
padding-left: 0 !important;
}
.spacing__pls,
.spacing__phs,
.spacing__pas {
padding-left: 0.3125rem !important;
}
.spacing__plm,
.spacing__phm,
.spacing__pam {
padding-left: 0.625rem !important;
}
.spacing__pll,
.spacing__phl,
.spacing__pal {
padding-left: 1.25rem !important;
}
.spacing__plx,
.spacing__phx,
.spacing__pax {
padding-left: 2.5rem !important;
}
.spacing__mtn,
.spacing__mvn,
.spacing__man {
margin-top: 0 !important;
}
.spacing__mts,
.spacing__mvs,
.spacing__mas {
margin-top: 0.3125rem !important;
}
.spacing__mtm,
.spacing__mvm,
.spacing__mam {
margin-top: 0.625rem !important;
}
.spacing__mtl,
.spacing__mvl,
.spacing__mal {
margin-top: 1.25rem !important;
}
.spacing__mtx,
.spacing__mvx,
.spacing__max {
margin-top: 2.5rem !important;
}
.spacing__mrn,
.spacing__mhn,
.spacing__man {
margin-right: 0 !important;
}
.spacing__mrs,
.spacing__mhs,
.spacing__mas {
margin-right: 0.3125rem !important;
}
.spacing__mrm,
.spacing__mhm,
.spacing__mam {
margin-right: 0.625rem !important;
}
.spacing__mrl,
.spacing__mhl,
.spacing__mal {
margin-right: 1.25rem !important;
}
.spacing__mrx,
.spacing__mhx,
.spacing__max {
margin-right: 2.5rem !important;
}
.spacing__mbn,
.spacing__mvn,
.spacing__man {
margin-bottom: 0 !important;
}
.spacing__mbs,
.spacing__mvs,
.spacing__mas {
margin-bottom: 0.3125rem !important;
}
.spacing__mbm,
.spacing__mvm,
.spacing__mam {
margin-bottom: 0.625rem !important;
}
.spacing__mbl,
.spacing__mvl,
.spacing__mal {
margin-bottom: 1.25rem !important;
}
.spacing__mbx,
.spacing__mvx,
.spacing__max {
margin-bottom: 2.5rem !important;
}
.spacing__mln,
.spacing__mhn,
.spacing__man {
margin-left: 0 !important;
}
.spacing__mls,
.spacing__mhs,
.spacing__mas {
margin-left: 0.3125rem !important;
}
.spacing__mlm,
.spacing__mhm,
.spacing__mam {
margin-left: 0.625rem !important;
}
.spacing__mll,
.spacing__mhl,
.spacing__mal {
margin-left: 1.25rem !important;
}
.spacing__mlx,
.spacing__mhx,
.spacing__max {
margin-left: 2.5rem !important;
}
.spacing__block {
padding: 40px 0;
}
@media all and (min-width: 48em) {
.spacing__block {
padding: 80px 0;
}
}
.spacing__block--sm {
padding: 40px 0;
}
.spacing__block--top {
padding-top: 40px;
}
@media all and (min-width: 48em) {
.spacing__block--top {
padding-top: 80px;
}
}
.spacing__block--bottom {
padding-bottom: 40px;
}
@media all and (min-width: 48em) {
.spacing__block--bottom {
padding-bottom: 80px;
}
}
.spacing__block--sm-top {
padding-top: 40px;
}
.spacing__block--sm-bottom {
padding-bottom: 40px;
}
/*
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`.
*/
.wrappers__inner,
.wrappers__wrapper,
#tnew-template {
width: 92%;
margin-left: auto;
margin-right: auto;
}
@media all and (min-width: 48em) {
.wrappers__inner,
.wrappers__wrapper,
#tnew-template {
width: 93.55%;
}
}
@media all and (min-width: 60em) {
.wrappers__inner,
.wrappers__wrapper,
#tnew-template {
max-width: 1400px;
}
}
@media all and (max-width: 47.9375em) {
.wrappers__inner--sm {
width: 92%;
margin-left: auto;
margin-right: auto;
}
}
.wrappers__wrapper-max {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.wrappers__full-bleed {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
.wrappers__offset {
padding: 0 4%;
}
@media all and (min-width: 93.53287012292891em) {
.wrappers__offset {
padding: 0 calc(((100vw - 130px) - 1400px) * 0.5);
}
}
.wrappers__offset--left {
padding-left: 4%;
}
@media all and (min-width: 93.53287012292891em) {
.wrappers__offset--left {
padding-left: calc(((100vw - 130px) - 1400px) * 0.5);
}
}
.wrappers__offset--right {
padding-right: 4%;
}
@media all and (min-width: 93.53287012292891em) {
.wrappers__offset--right {
padding-right: calc(((100vw - 130px) - 1400px) * 0.5);
}
}
.wrappers__offset-vw--left {
padding-left: 3.225vw;
}
@media all and (min-width: 93.53287012292891em) {
.wrappers__offset-vw--left {
padding-left: calc(((100vw - 130px) - 1400px) * 0.5);
}
}
.wrappers__offset-vw--right {
padding-right: 3.225vw;
}
@media all and (min-width: 93.53287012292891em) {
.wrappers__offset-vw--right {
padding-right: calc(((100vw - 130px) - 1400px) * 0.5);
}
}
.wrappers__offset-m--left {
margin-left: 4%;
}
@media all and (min-width: 93.53287012292891em) {
.wrappers__offset-m--left {
margin-left: calc(((100vw - 130px) - 1400px) * 0.5);
}
}
.wrappers__offset-m--right {
margin-right: 4%;
}
@media all and (min-width: 93.53287012292891em) {
.wrappers__offset-m--right {
margin-right: calc(((100vw - 130px) - 1400px) * 0.5);
}
}
.wrappers__break-out {
width: calc(100% + (3.4473543559593804% * 2));
position: relative;
left: -3.4473543559593804%;
}
@media all and (min-width: 93.53287012292891em) {
.wrappers__break-out {
width: calc(100% + ((100vw - 1400px)));
left: calc(((100vw - 1400px)) / -2);
}
}
/*
Interactive Elements
*/
/*
button
Default interactive button styles. This `.btn` class can be applied to ``,
``, or `Primary
Secondary (Tiny Size)
````
*/
button {
font-size: 100%;
margin: 0;
-webkit-appearance: button;
display: inline-block;
cursor: pointer;
line-height: normal;
}
button[disabled] {
cursor: default;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
.button__base,
.button__hero,
.button__primary,
.button__secondary,
.button__transparent,
.modal .modal-dialog .modal-content .modal-footer .btn-primary,
.modal .modal-dialog .modal-content .modal-footer .btn-default,
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button,
#tnew-template .tn-account-create-page .btn-primary,
#tnew-template .tn-account-update-page .btn-primary,
#tnew-template .tn-account-create-page .btn-default,
#tnew-template .tn-account-update-page .btn-default,
#tnew-template .tn-account-login-page .tn-register-button,
#tnew-template .tn-account-login-page #tn-login-form .btn-primary,
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action,
.btn-primary,
.btn-default,
.tn-cart-buttons__secondary-action {
position: relative;
box-sizing: border-box;
width: auto;
height: auto;
border: none;
text-align: center;
vertical-align: middle;
text-decoration: none;
outline: 0;
overflow: visible;
padding: 0.75rem 2.6875rem;
-webkit-appearance: none;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
margin-top: 1.25em;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
font-weight: 800;
}
.button__base:focus,
.button__hero:focus,
.button__primary:focus,
.button__secondary:focus,
.button__transparent:focus,
.modal .modal-dialog .modal-content .modal-footer .btn-primary:focus,
.modal .modal-dialog .modal-content .modal-footer .btn-default:focus,
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button:focus,
#tnew-template .tn-account-create-page .btn-primary:focus,
#tnew-template .tn-account-update-page .btn-primary:focus,
#tnew-template .tn-account-create-page .btn-default:focus,
#tnew-template .tn-account-update-page .btn-default:focus,
#tnew-template .tn-account-login-page .tn-register-button:focus,
#tnew-template .tn-account-login-page #tn-login-form .btn-primary:focus,
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action:focus,
.btn-primary:focus,
.btn-default:focus,
.tn-cart-buttons__secondary-action:focus {
outline: #0396FF solid 0.1875rem;
}
p > .button__base,
p > .button__hero,
p > .button__primary,
p > .button__secondary,
p > .button__transparent,
p > .modal .modal-dialog .modal-content .modal-footer .btn-primary,
p > .modal .modal-dialog .modal-content .modal-footer .btn-default,
p > #tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button,
p > #tnew-template .tn-account-create-page .btn-primary,
p > #tnew-template .tn-account-update-page .btn-primary,
p > #tnew-template .tn-account-create-page .btn-default,
p > #tnew-template .tn-account-update-page .btn-default,
p > #tnew-template .tn-account-login-page .tn-register-button,
p > #tnew-template .tn-account-login-page #tn-login-form .btn-primary,
p > #tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action,
p > .btn-primary,
p > .btn-default,
p > .tn-cart-buttons__secondary-action {
margin-top: 0;
}
.button__base[disabled],
.button__base.disabled,
.button__hero[disabled],
.button__hero.disabled,
.button__primary[disabled],
.button__primary.disabled,
.button__secondary[disabled],
.button__secondary.disabled,
.button__transparent[disabled],
.button__transparent.disabled,
.modal .modal-dialog .modal-content .modal-footer .btn-primary[disabled],
.modal .modal-dialog .modal-content .modal-footer .btn-primary.disabled,
.modal .modal-dialog .modal-content .modal-footer .btn-default[disabled],
.modal .modal-dialog .modal-content .modal-footer .btn-default.disabled,
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button[disabled],
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button.disabled,
#tnew-template .tn-account-create-page .btn-primary[disabled],
#tnew-template .tn-account-create-page .btn-primary.disabled,
#tnew-template .tn-account-update-page .btn-primary[disabled],
#tnew-template .tn-account-update-page .btn-primary.disabled,
#tnew-template .tn-account-create-page .btn-default[disabled],
#tnew-template .tn-account-create-page .btn-default.disabled,
#tnew-template .tn-account-update-page .btn-default[disabled],
#tnew-template .tn-account-update-page .btn-default.disabled,
#tnew-template .tn-account-login-page .tn-register-button[disabled],
#tnew-template .tn-account-login-page .tn-register-button.disabled,
#tnew-template .tn-account-login-page #tn-login-form .btn-primary[disabled],
#tnew-template .tn-account-login-page #tn-login-form .btn-primary.disabled,
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action[disabled],
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action.disabled,
.btn-primary[disabled],
.btn-primary.disabled,
.btn-default[disabled],
.btn-default.disabled,
.tn-cart-buttons__secondary-action[disabled],
.tn-cart-buttons__secondary-action.disabled {
background: #C0C0C0;
color: #707170;
pointer-events: none;
}
.button__base.links__unlink,
.button__hero.links__unlink,
.button__primary.links__unlink,
.button__secondary.links__unlink,
.button__transparent.links__unlink,
.modal .modal-dialog .modal-content .modal-footer .btn-primary.links__unlink,
.modal .modal-dialog .modal-content .modal-footer .btn-default.links__unlink,
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button.links__unlink,
#tnew-template .tn-account-create-page .btn-primary.links__unlink,
#tnew-template .tn-account-update-page .btn-primary.links__unlink,
#tnew-template .tn-account-create-page .btn-default.links__unlink,
#tnew-template .tn-account-update-page .btn-default.links__unlink,
#tnew-template .tn-account-login-page .tn-register-button.links__unlink,
#tnew-template .tn-account-login-page #tn-login-form .btn-primary.links__unlink,
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action.links__unlink,
.btn-primary.links__unlink,
.btn-default.links__unlink,
.tn-cart-buttons__secondary-action.links__unlink {
display: inline-block;
}
.button__base.links__unlink:hover,
.button__base.links__unlink:focus,
.button__hero.links__unlink:hover,
.button__hero.links__unlink:focus,
.button__primary.links__unlink:hover,
.button__primary.links__unlink:focus,
.button__secondary.links__unlink:hover,
.button__secondary.links__unlink:focus,
.button__transparent.links__unlink:hover,
.button__transparent.links__unlink:focus,
.modal .modal-dialog .modal-content .modal-footer .btn-primary.links__unlink:hover,
.modal .modal-dialog .modal-content .modal-footer .btn-primary.links__unlink:focus,
.modal .modal-dialog .modal-content .modal-footer .btn-default.links__unlink:hover,
.modal .modal-dialog .modal-content .modal-footer .btn-default.links__unlink:focus,
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button.links__unlink:hover,
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button.links__unlink:focus,
#tnew-template .tn-account-create-page .btn-primary.links__unlink:hover,
#tnew-template .tn-account-create-page .btn-primary.links__unlink:focus,
#tnew-template .tn-account-update-page .btn-primary.links__unlink:hover,
#tnew-template .tn-account-update-page .btn-primary.links__unlink:focus,
#tnew-template .tn-account-create-page .btn-default.links__unlink:hover,
#tnew-template .tn-account-create-page .btn-default.links__unlink:focus,
#tnew-template .tn-account-update-page .btn-default.links__unlink:hover,
#tnew-template .tn-account-update-page .btn-default.links__unlink:focus,
#tnew-template .tn-account-login-page .tn-register-button.links__unlink:hover,
#tnew-template .tn-account-login-page .tn-register-button.links__unlink:focus,
#tnew-template .tn-account-login-page #tn-login-form .btn-primary.links__unlink:hover,
#tnew-template .tn-account-login-page #tn-login-form .btn-primary.links__unlink:focus,
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action.links__unlink:hover,
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action.links__unlink:focus,
.btn-primary.links__unlink:hover,
.btn-primary.links__unlink:focus,
.btn-default.links__unlink:hover,
.btn-default.links__unlink:focus,
.tn-cart-buttons__secondary-action.links__unlink:hover,
.tn-cart-buttons__secondary-action.links__unlink:focus {
color: #fff;
}
.button__hero {
overflow: hidden;
transition: color 0.6s, transform 0.6s, background-color 0.6s;
padding: 1rem 2rem 1.4375rem;
background: transparent;
color: #C60223;
color: var(--brand-2);
z-index: 0;
}
.button__hero:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border-bottom: 0.4375rem solid #C60223;
border-bottom: 0.4375rem solid var(--brand-2);
background: #fff;
z-index: -1;
}
.button__hero:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 25rem;
height: 25rem;
background-color: #C60223;
background-color: var(--brand-2);
border-color: transparent;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.1);
opacity: 0;
z-index: -1;
transition: transform 0.6s, opacity 0.6s, background-color 0.6s;
}
.button__hero:hover {
color: #fff;
}
.button__hero:hover:after {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1) translate(-50%, -50%);
}
.button__primary {
background: #231F20;
color: #fff;
}
.button__primary:hover,
.button__primary:active {
background: #C60223;
background: var(--brand-2);
}
.button__primary:focus {
background: #231F20;
}
.button__secondary {
background: #fff;
color: #231F20;
}
.button__secondary:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border: 0.1875rem solid #231F20;
}
.button__secondary:hover,
.button__secondary:active {
background: #C60223;
background: var(--brand-2);
color: #fff;
}
.button__secondary:hover:after,
.button__secondary:active:after {
content: none;
}
.button__secondary:focus {
background: #fff;
color: #231F20;
}
.button__secondary[disabled]:after,
.button__secondary.disabled:after {
border: none;
}
.button--small {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.57142857;
padding: 0.625rem 1rem;
}
.button--red {
background-color: #C60223;
color: #fff;
}
.button--red:after {
border-color: #C60223;
}
.button--red:hover,
.button--red:focus {
background-color: #000;
}
.button--red:hover:after,
.button--red:focus:after {
border-color: #000;
}
.button__full-width {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.button__no-button,
.button__transparent {
background: transparent;
color: inherit;
border: 0;
}
.button__no-button:hover,
.button__no-button:focus,
.button__no-button.is-current,
.button__transparent:hover,
.button__transparent:focus,
.button__transparent.is-current {
background: transparent;
color: inherit;
}
.button__utility {
width: 45px;
height: 45px;
}
.button__transparent:hover,
.button__transparent:focus {
background-color: #F1EFF0;
}
/*
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.
*/
.links__dark {
color: #fff !important;
}
.links__dark:hover,
.links__dark:active {
color: #E3E0E1 !important;
}
.links__primary {
text-decoration-color: transparent;
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
.links__primary:focus,
.links__primary:hover {
text-decoration-color: inherit;
}
.links__primary svg {
font-size: 0.9375rem;
color: inherit;
}
/*
Unlink
Basic class to remove some link styling.
@TODO: Put in `presentational.less` file?
*/
.links__unlink {
text-decoration: none;
}
.links__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.navigation__brandbar a.links__brandbar {
color: #707170;
text-decoration-color: transparent;
text-decoration-thickness: 2px;
text-underline-offset: 5px;
transition: color 250ms ease-in-out;
}
.navigation__brandbar a.links__brandbar:hover,
.navigation__brandbar a.links__brandbar:active {
color: #E8B877;
}
.navigation__brandbar a.links__brandbar.is-active {
color: #fff;
text-decoration-color: #fff;
}
.navigation__a11ybar {
display: none;
height: 0;
overflow: hidden;
}
.navigation__a11ybar:focus-within {
height: auto;
}
.navigationSimple__container {
padding: 0.9375rem 0;
}
#navigationSimple__logo:focus {
outline: 2px solid #fff;
outline-offset: 5px;
}
.navgiationSimple__logo-img--ticketdfw {
max-height: 54px;
}
.footerSimple__container {
padding: 1.5rem 0;
}
.footerSimple__fine-print {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
}
#tnew-template .tn-header-component .tn-heading {
margin-top: 0;
margin-bottom: 0;
color: #231F20;
font-weight: 800;
font-size: 32px;
font-size: 2rem;
line-height: 1.25;
letter-spacing: normal;
}
#tnew-template .tn-header-component .tn-heading.styles__gt-america {
font-weight: 900;
font-size: 32px;
font-size: 2rem;
line-height: 1.1875;
letter-spacing: 0.1rem;
}
@media all and (min-width: 48em) {
#tnew-template .tn-header-component .tn-heading {
font-size: 44px;
font-size: 2.75rem;
line-height: 1.27272727;
letter-spacing: normal;
}
#tnew-template .tn-header-component .tn-heading.styles__gt-america {
font-size: 44px;
font-size: 2.75rem;
line-height: 1.13636364;
letter-spacing: 0.1375rem;
}
}
#tnew-template .tn-header-component .tn-heading-sub-text {
margin: 1rem 0;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.55555556;
}
@media all and (min-width: 48em) {
#tnew-template .tn-header-component .tn-heading-sub-text {
margin: 2rem 0;
}
}
#tnew-template .control-label,
.modal .modal-dialog .control-label,
#tnew-template .tn-required-field,
.modal .modal-dialog .tn-required-field {
font-size: 10px;
font-size: 0.625rem;
line-height: 1.6;
font-weight: 400;
}
#tnew-template .form-control,
.modal .modal-dialog .form-control {
height: 2.5rem;
border-radius: 0;
border: 1px solid #231F20;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
#tnew-template .checkbox label,
.modal .modal-dialog .checkbox label {
display: flex;
align-items: center;
padding-left: 2.25rem;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
#tnew-template .checkbox input,
.modal .modal-dialog .checkbox input {
position: absolute;
top: -3px;
left: 16px;
height: 24px;
width: 24px;
}
#tnew-template .checkbox input:before,
.modal .modal-dialog .checkbox input:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 24px;
width: 24px;
border: 2px solid #231F20;
}
#tnew-template .checkbox input:after,
.modal .modal-dialog .checkbox input:after {
content: '';
position: absolute;
display: none;
left: 9px;
top: 3px;
width: 7px;
height: 14px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
#tnew-template .checkbox input:checked:before,
.modal .modal-dialog .checkbox input:checked:before {
background: #C60223;
border-color: #C60223;
}
#tnew-template .checkbox input:checked:after,
.modal .modal-dialog .checkbox input:checked:after {
display: block;
}
#tnew-template .help-block,
.modal .modal-dialog .help-block {
background: #F7E5E4;
color: #C60223;
border: 1px solid #C60223;
padding: 0.75rem;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
margin-top: 0.5rem;
}
#tnew-template .help-block:empty,
.modal .modal-dialog .help-block:empty {
padding: 0;
border: 0;
}
.modal .modal-dialog {
margin-top: 15%;
}
.modal .modal-dialog .modal-content {
border-radius: 0;
padding: 2rem;
position: relative;
}
.modal .modal-dialog .modal-content .modal-header {
padding: 0;
border-bottom: 0;
margin-bottom: 1rem;
}
.modal .modal-dialog .modal-content .modal-header .modal-title {
margin-top: 0;
margin-bottom: 0;
color: #231F20;
font-weight: 800;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
letter-spacing: normal;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
padding-top: 0.75rem;
padding-right: 2.25rem;
}
.modal .modal-dialog .modal-content .modal-header .modal-title.styles__gt-america {
font-weight: 900;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
letter-spacing: normal;
}
@media all and (min-width: 48em) {
.modal .modal-dialog .modal-content .modal-header .modal-title {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: normal;
}
.modal .modal-dialog .modal-content .modal-header .modal-title.styles__gt-america {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: 0.1375rem;
}
}
.modal .modal-dialog .modal-content .modal-header .close {
border: none;
position: absolute;
top: 32px;
right: 32px;
}
.modal .modal-dialog .modal-content .modal-header .close:before,
.modal .modal-dialog .modal-content .modal-header .close:after {
height: 24px;
}
.modal .modal-dialog .modal-content .modal-body {
padding: 0;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
.modal .modal-dialog .modal-content .modal-body .checkbox,
.modal .modal-dialog .modal-content .modal-body .form-group {
margin-top: 1.5rem;
}
.modal .modal-dialog .modal-content .modal-body .tn-success-message {
margin-top: 2rem;
}
.modal .modal-dialog .modal-content .modal-body .tn-success-message .tn-modal-heading-info {
background-color: #F1EFF0;
}
.modal .modal-dialog .modal-content .modal-body .tn-success-message p {
margin-top: 0;
}
.modal .modal-dialog .modal-content .modal-footer {
border-top: 0;
padding: 0;
margin-top: 2rem;
}
.modal .modal-dialog .modal-content .modal-footer .btn {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
padding: 0.75rem 1.25rem;
border-radius: 0;
}
.modal .modal-dialog .modal-content .modal-footer .btn-primary {
background: #231F20;
color: #fff;
margin-left: 1rem;
}
.modal .modal-dialog .modal-content .modal-footer .btn-primary:hover,
.modal .modal-dialog .modal-content .modal-footer .btn-primary:active {
background: #C60223;
background: var(--brand-2);
}
.modal .modal-dialog .modal-content .modal-footer .btn-primary:focus {
background: #231F20;
}
.modal .modal-dialog .modal-content .modal-footer .btn-default {
background: #fff;
color: #231F20;
}
.modal .modal-dialog .modal-content .modal-footer .btn-default:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border: 0.1875rem solid #231F20;
}
.modal .modal-dialog .modal-content .modal-footer .btn-default:hover,
.modal .modal-dialog .modal-content .modal-footer .btn-default:active {
background: #C60223;
background: var(--brand-2);
color: #fff;
}
.modal .modal-dialog .modal-content .modal-footer .btn-default:hover:after,
.modal .modal-dialog .modal-content .modal-footer .btn-default:active:after {
content: none;
}
.modal .modal-dialog .modal-content .modal-footer .btn-default:focus {
background: #fff;
color: #231F20;
}
.modal .modal-dialog .modal-content .modal-footer .btn-default[disabled]:after,
.modal .modal-dialog .modal-content .modal-footer .btn-default.disabled:after {
border: none;
}
#tnew-template {
position: relative;
}
#tnew-template .tn-utility-nav {
flex-wrap: wrap;
justify-content: space-between;
gap: 15px;
}
#tnew-template .tn-utility-nav .btn-primary {
margin: 0;
}
#tnew-template .tn-utility-nav .tn-utility-nav-account-section__container {
flex: auto;
align-items: center;
}
#tnew-template .tn-utility-nav .tn-utility-nav-account-section__container .tn-utility-nav-account-section {
align-items: center;
gap: 15px;
}
#tnew-template .tn-utility-nav .tn-utility-nav-account-section__container .tn-utility-nav-account-section .tn-utility-nav-account-login-link {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
#tnew-template .tn-utility-nav .tn-utility-nav-account-section__container .tn-utility-nav-account-section .tn-utility-nav-account-login-link .tn-utility-nav-account-login-link__user-icon {
margin: 0;
}
#tnew-template .tn-utility-nav .tn-utility-nav-cart-controls-section {
flex: none;
align-items: center;
}
#tnew-template .tn-utility-nav .tn-utility-nav-cart-controls-section .tn-utility-nav-cart-timer {
margin: 10px 0 0;
border-width: 1px;
}
@media (min-width: 992px) {
#tnew-template .tn-utility-nav .tn-utility-nav-cart-controls-section .tn-utility-nav-cart-timer {
margin: 0 15px;
}
}
#tnew-template .tn-utility-nav .tn-utility-nav-cart-controls-section .tn-utility-nav-promo-code-section {
margin-left: 0;
}
#tnew-template .tn-utility-nav .tn-utility-nav-cart-controls-section .tn-utility-nav-promo-code-section .tn-utility-nav-inline-promo-code-form .tn-utility-nav-inline-promo-code-form__input-container {
align-items: center;
gap: 15px;
}
#tnew-template .tn-utility-nav .tn-utility-nav-cart-controls-section .tn-utility-nav-cart-link {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
#tnew-template .tn-utility-nav .tn-utility-nav-cart-controls-section .tn-utility-nav-cart-link .tn-utility-nav-cart-link__icon {
margin: 0;
}
#tnew-template .tn-utility-nav .tn-utility-nav-cart-controls-section .tn-utility-nav-cart-link .tn-utility-nav-cart-link__quantity-badge {
position: relative;
top: 0;
right: 0;
}
#tnew-template .tn-subnav-component {
flex-wrap: wrap;
position: relative;
}
#tnew-template .tn-subnav-component .tn-login-link .tn-link,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link {
font-weight: 700;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
display: flex;
}
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-text,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-text,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-text,
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-text,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-text,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-text,
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-email,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-email,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-email,
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logout-link,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logout-link,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logout-link {
border-bottom: 2px solid #C60223;
color: #C60223;
text-decoration: none;
margin-left: 0.5rem;
}
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-text,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-text,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-text,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-text,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-text,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-text,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-email,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-email,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-email,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logout-link,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logout-link,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logout-link {
border-bottom: 2px solid #BF5622;
color: #BF5622;
}
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-text:hover,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-text:hover,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-text:hover,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-text:hover,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-text:hover,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-text:hover,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-email:hover,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-email:hover,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-email:hover,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logout-link:hover,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logout-link:hover,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logout-link:hover {
color: #231F20;
border-bottom-color: #231F20;
}
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-text:focus,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-text:focus,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-text:focus,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-text:focus,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-text:focus,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-text:focus,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-email:focus,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-email:focus,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-email:focus,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logout-link:focus,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logout-link:focus,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logout-link:focus {
outline: 2px solid #0157DD;
}
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-text:hover,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-text:hover,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-text:hover,
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-text:hover,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-text:hover,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-text:hover,
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-email:hover,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-email:hover,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-email:hover,
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logout-link:hover,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logout-link:hover,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logout-link:hover {
color: #231F20;
border-bottom-color: #231F20;
cursor: pointer;
}
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-text:focus,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-text:focus,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-text:focus,
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-text:focus,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-text:focus,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-text:focus,
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logged-in-email:focus,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-email:focus,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logged-in-email:focus,
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-logout-link:focus,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logout-link:focus,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-logout-link:focus {
outline: 2px solid #0157DD;
outline-offset: 3px;
}
#tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-icon,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-icon,
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-icon {
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
background: #C60223;
color: #fff;
border-radius: 50%;
font-size: 0.75rem;
}
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-link .tn-icon,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-icon,
.ticketdfw #tnew-template .tn-subnav-component .tn-login-link .tn-logout-link .tn-icon {
background: #BF5622;
}
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-email {
display: none;
margin-left: 0;
}
@media all and (min-width: 60em) {
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link .tn-logged-in-email {
display: inline;
}
}
#tnew-template .tn-subnav-component .tn-login-link .tn-logout-link:before {
color: #231F20;
margin: 0 0.5rem 0 1rem;
}
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link:hover .tn-logged-in-text,
#tnew-template .tn-subnav-component .tn-login-link .tn-account-info-link:hover .tn-logged-in-email {
color: #231F20;
border-color: #231F20;
}
#tnew-template .tn-subnav-component .tn-logged-in {
display: flex;
}
#tnew-template .tn-subnav-component .tn-cart-link .tn-link,
#tnew-template .tn-subnav-component .tn-cart-link.tn-link {
font-weight: 700;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
position: relative;
display: inline-block;
}
#tnew-template .tn-subnav-component .tn-cart-link .tn-text {
border-bottom: 2px solid #C60223;
color: #C60223;
text-decoration: none;
margin-right: 1.5rem;
}
.ticketdfw #tnew-template .tn-subnav-component .tn-cart-link .tn-text {
border-bottom: 2px solid #BF5622;
color: #BF5622;
}
.ticketdfw #tnew-template .tn-subnav-component .tn-cart-link .tn-text:hover {
color: #231F20;
border-bottom-color: #231F20;
}
.ticketdfw #tnew-template .tn-subnav-component .tn-cart-link .tn-text:focus {
outline: 2px solid #0157DD;
}
#tnew-template .tn-subnav-component .tn-cart-link .tn-text:hover {
color: #231F20;
border-bottom-color: #231F20;
cursor: pointer;
}
#tnew-template .tn-subnav-component .tn-cart-link .tn-text:focus {
outline: 2px solid #0157DD;
outline-offset: 3px;
}
#tnew-template .tn-subnav-component .tn-cart-link .tn-icon {
color: #C60223;
font-size: 1.125rem;
}
.ticketdfw #tnew-template .tn-subnav-component .tn-cart-link .tn-icon {
color: #BF5622;
}
@media all and (min-width: 77.5em) {
#tnew-template .tn-subnav-component .tn-cart-link .tn-icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
@media all and (max-width: 59.9375em) {
#tnew-template .tn-subnav-component .tn-cart-link .tn-timer {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
#tnew-template .tn-subnav-component .tn-cart-link .tn-timer .tn-timer-description {
display: none;
}
}
@media all and (min-width: 60em) {
#tnew-template .tn-subnav-component .tn-cart-link .tn-timer {
margin-left: 1.5rem;
}
}
#tnew-template .tn-subnav-component .js-gift-card-prompt {
display: block;
width: 100%;
margin-top: 20px;
font-weight: bold;
position: relative;
}
#tnew-template .tn-subnav-component .js-gift-card-prompt:after {
content: '';
position: absolute;
background: #231F20;
height: 1px;
left: 0;
right: 0;
bottom: -20px;
}
#tnew-template .tn-subnav-component .js-gift-card-prompt:hover {
cursor: pointer;
}
@media all and (min-width: 48em) {
#tnew-template .tn-subnav-component .js-gift-card-prompt {
width: auto;
margin-left: 24px;
display: inline;
margin-top: 0;
font-weight: bold;
font-size: 0.75rem;
}
#tnew-template .tn-subnav-component .js-gift-card-prompt:after {
content: none;
}
}
#tnew-template .tn-subnav-component #tn-apply-promo {
display: flex;
}
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-code {
font-size: 10px;
font-size: 0.625rem;
line-height: 1.4;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
color: #231F20;
font-weight: 600;
border-bottom: 2px solid #231F20;
margin-top: 0;
text-align: center;
}
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-code::-moz-placeholder {
color: #231F20;
font-weight: 400;
}
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-code::placeholder {
color: #231F20;
font-weight: 400;
}
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button {
background: #231F20;
color: #fff;
margin-left: 0.875rem;
margin-top: 0;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
text-transform: capitalize;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
padding: 0.75rem 1.25rem;
}
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button:hover,
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button:active {
background: #C60223;
background: var(--brand-2);
}
#tnew-template .tn-subnav-component #tn-apply-promo .tn-subnav-promo-button:focus {
background: #231F20;
}
#tnew-template .tn-subnav-component .tn-promo-box {
margin-right: 0;
}
#tnew-template .js-gc-form {
background: white;
position: absolute;
right: 0;
left: 0;
top: 95px;
padding: 0 20px;
box-shadow: 3px 8px 17px #00000029;
max-height: 0;
transition: all 0.2s ease;
overflow: hidden;
}
@media all and (min-width: 48em) {
#tnew-template .js-gc-form {
top: 40px;
left: auto;
}
}
#tnew-template .js-gc-form.is-revealed {
max-height: 1000px;
padding: 20px;
border: 2px solid black;
z-index: 100;
}
#tnew-template .tnew-remove-promo {
background: none;
border: none;
padding: 0;
border-bottom: 2px solid #C60223;
margin-left: 10px;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: bold;
font-size: 0.75rem;
}
#tnew-template .tnew-remove-promo:hover {
border-bottom: 2px solid black;
}
.tnew-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
z-index: 1200;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
min-width: 300px;
}
.tnew-modal .modal-content {
padding: 32px;
}
.tnew-modal h1 {
font-size: 1.375rem;
font-weight: bold;
border-bottom: none;
padding-bottom: 0;
}
.tnew-modal .modal-body {
font-size: 1rem;
}
.tnew-modal .tnew-confirm-remove {
margin-right: 10px;
}
.tnew-modal .tnew-confirm-remove,
.tnew-modal .tnew-cancel-remove {
width: 100%;
}
@media all and (min-width: 48em) {
.tnew-modal .tnew-confirm-remove,
.tnew-modal .tnew-cancel-remove {
width: auto;
}
}
#tnew-template .tn-login-component h2,
#tnew-template .tn-patron-component h2,
#tnew-template .tn-address-component h2,
#tnew-template .tn-interests h2 {
font-size: 32px;
font-size: 2rem;
line-height: 1.5;
font-weight: 700;
margin-bottom: 2rem;
margin-top: 0;
}
#tnew-template .tn-account-create-page .btn-primary,
#tnew-template .tn-account-update-page .btn-primary {
background: #231F20;
color: #fff;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
border-radius: 0;
}
#tnew-template .tn-account-create-page .btn-primary:hover,
#tnew-template .tn-account-update-page .btn-primary:hover,
#tnew-template .tn-account-create-page .btn-primary:active,
#tnew-template .tn-account-update-page .btn-primary:active {
background: #C60223;
background: var(--brand-2);
}
#tnew-template .tn-account-create-page .btn-primary:focus,
#tnew-template .tn-account-update-page .btn-primary:focus {
background: #231F20;
}
#tnew-template .tn-account-create-page .btn-default,
#tnew-template .tn-account-update-page .btn-default {
background: #fff;
color: #231F20;
}
#tnew-template .tn-account-create-page .btn-default:after,
#tnew-template .tn-account-update-page .btn-default:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border: 0.1875rem solid #231F20;
}
#tnew-template .tn-account-create-page .btn-default:hover,
#tnew-template .tn-account-update-page .btn-default:hover,
#tnew-template .tn-account-create-page .btn-default:active,
#tnew-template .tn-account-update-page .btn-default:active {
background: #C60223;
background: var(--brand-2);
color: #fff;
}
#tnew-template .tn-account-create-page .btn-default:hover:after,
#tnew-template .tn-account-update-page .btn-default:hover:after,
#tnew-template .tn-account-create-page .btn-default:active:after,
#tnew-template .tn-account-update-page .btn-default:active:after {
content: none;
}
#tnew-template .tn-account-create-page .btn-default:focus,
#tnew-template .tn-account-update-page .btn-default:focus {
background: #fff;
color: #231F20;
}
#tnew-template .tn-account-create-page .btn-default[disabled]:after,
#tnew-template .tn-account-update-page .btn-default[disabled]:after,
#tnew-template .tn-account-create-page .btn-default.disabled:after,
#tnew-template .tn-account-update-page .btn-default.disabled:after {
border: none;
}
@media all and (min-width: 60em) {
#tnew-template .tn-page-layout__main-container {
padding-left: 5rem;
width: 75%;
}
}
@media all and (min-width: 48em) {
#tnew-template .tn-account-login-page {
padding: 3.875rem 0;
}
}
#tnew-template .tn-account-login-page .tn-header-component {
padding-bottom: 1.75rem;
}
@media all and (min-width: 60em) {
#tnew-template .tn-account-login-page .tn-header-component {
width: 50%;
}
}
#tnew-template .tn-account-login-page .row .col-xs-12.col-sm-6:first-of-type {
border-bottom: 1px solid #231F20;
padding-bottom: 2.5rem;
margin-bottom: 2.5rem;
}
@media all and (min-width: 48em) {
#tnew-template .tn-account-login-page .row .col-xs-12.col-sm-6:first-of-type {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
}
@media all and (min-width: 77.5em) {
#tnew-template .tn-account-login-page .row .col-xs-12.col-sm-6:first-of-type {
border-right: 1px solid #231F20;
}
}
@media all and (min-width: 60em) {
#tnew-template .tn-account-login-page .row .col-xs-12.col-sm-6:nth-child(2) {
padding-left: 2rem;
}
}
#tnew-template .tn-account-login-page .tn-create-heading {
font-size: 32px;
font-size: 2rem;
line-height: 1.5;
font-weight: 700;
margin-bottom: 1rem;
margin-top: 0;
}
#tnew-template .tn-account-login-page .tn-create-sub-heading {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
#tnew-template .tn-account-login-page .tn-register-button {
background: #fff;
color: #231F20;
display: inline-block;
padding: 1.25rem 2.5rem;
}
#tnew-template .tn-account-login-page .tn-register-button:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border: 0.1875rem solid #231F20;
}
#tnew-template .tn-account-login-page .tn-register-button:hover,
#tnew-template .tn-account-login-page .tn-register-button:active {
background: #C60223;
background: var(--brand-2);
color: #fff;
}
#tnew-template .tn-account-login-page .tn-register-button:hover:after,
#tnew-template .tn-account-login-page .tn-register-button:active:after {
content: none;
}
#tnew-template .tn-account-login-page .tn-register-button:focus {
background: #fff;
color: #231F20;
}
#tnew-template .tn-account-login-page .tn-register-button[disabled]:after,
#tnew-template .tn-account-login-page .tn-register-button.disabled:after {
border: none;
}
#tnew-template .tn-account-login-page #tn-login-form .tn-account-login-forgot-login-link {
border-bottom: 2px solid #C60223;
color: #C60223;
text-decoration: none;
font-weight: 700;
}
.ticketdfw #tnew-template .tn-account-login-page #tn-login-form .tn-account-login-forgot-login-link {
border-bottom: 2px solid #BF5622;
color: #BF5622;
}
.ticketdfw #tnew-template .tn-account-login-page #tn-login-form .tn-account-login-forgot-login-link:hover {
color: #231F20;
border-bottom-color: #231F20;
}
.ticketdfw #tnew-template .tn-account-login-page #tn-login-form .tn-account-login-forgot-login-link:focus {
outline: 2px solid #0157DD;
}
#tnew-template .tn-account-login-page #tn-login-form .tn-account-login-forgot-login-link:hover {
color: #231F20;
border-bottom-color: #231F20;
cursor: pointer;
}
#tnew-template .tn-account-login-page #tn-login-form .tn-account-login-forgot-login-link:focus {
outline: 2px solid #0157DD;
outline-offset: 3px;
}
#tnew-template .tn-account-login-page #tn-login-form .btn-primary {
background: #231F20;
color: #fff;
margin-top: 2.625rem;
padding: 1.25rem 2.5rem;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
border-radius: 0;
}
#tnew-template .tn-account-login-page #tn-login-form .btn-primary:hover,
#tnew-template .tn-account-login-page #tn-login-form .btn-primary:active {
background: #C60223;
background: var(--brand-2);
}
#tnew-template .tn-account-login-page #tn-login-form .btn-primary:focus {
background: #231F20;
}
@media all and (min-width: 77.5em) {
#tnew-template .tn-account-login-page #tn-login-form {
width: 75%;
}
}
#tnew-template #tn-account-register-form .tn-patron-component,
#tnew-template #tn-update-form .tn-patron-component,
#tnew-template #tn-account-register-form .tn-address-component,
#tnew-template #tn-update-form .tn-address-component {
margin-top: 2.5rem;
}
#tnew-template #tn-account-register-form .col-xs-12.col-sm-6,
#tnew-template #tn-update-form .col-xs-12.col-sm-6 {
width: 100%;
}
#tnew-template .tn-area-nav__list .tn-area-nav__list-item {
color: #C60223;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
.ticketdfw #tnew-template .tn-area-nav__list .tn-area-nav__list-item {
color: #BF5622;
}
#tnew-template .tn-area-nav__list .tn-area-nav__list-item a {
color: #231F20;
}
#tnew-template .tn-account-update-page .tn-page-layout__header-container,
#tnew-template .tn-account-interests-page .tn-page-layout__header-container,
#tnew-template .tn-upcoming-events-page .tn-page-layout__header-container,
#tnew-template .tn-giving-history-page .tn-page-layout__header-container {
display: none;
}
#tnew-template .tn-account-update-page .tn-upcoming-event__title,
#tnew-template .tn-account-interests-page .tn-upcoming-event__title,
#tnew-template .tn-upcoming-events-page .tn-upcoming-event__title,
#tnew-template .tn-giving-history-page .tn-upcoming-event__title {
border-bottom: 2px solid #C60223;
color: #C60223;
text-decoration: none;
}
.ticketdfw #tnew-template .tn-account-update-page .tn-upcoming-event__title,
.ticketdfw #tnew-template .tn-account-interests-page .tn-upcoming-event__title,
.ticketdfw #tnew-template .tn-upcoming-events-page .tn-upcoming-event__title,
.ticketdfw #tnew-template .tn-giving-history-page .tn-upcoming-event__title {
border-bottom: 2px solid #BF5622;
color: #BF5622;
}
.ticketdfw #tnew-template .tn-account-update-page .tn-upcoming-event__title:hover,
.ticketdfw #tnew-template .tn-account-interests-page .tn-upcoming-event__title:hover,
.ticketdfw #tnew-template .tn-upcoming-events-page .tn-upcoming-event__title:hover,
.ticketdfw #tnew-template .tn-giving-history-page .tn-upcoming-event__title:hover {
color: #231F20;
border-bottom-color: #231F20;
}
.ticketdfw #tnew-template .tn-account-update-page .tn-upcoming-event__title:focus,
.ticketdfw #tnew-template .tn-account-interests-page .tn-upcoming-event__title:focus,
.ticketdfw #tnew-template .tn-upcoming-events-page .tn-upcoming-event__title:focus,
.ticketdfw #tnew-template .tn-giving-history-page .tn-upcoming-event__title:focus {
outline: 2px solid #0157DD;
}
#tnew-template .tn-account-update-page .tn-upcoming-event__title:hover,
#tnew-template .tn-account-interests-page .tn-upcoming-event__title:hover,
#tnew-template .tn-upcoming-events-page .tn-upcoming-event__title:hover,
#tnew-template .tn-giving-history-page .tn-upcoming-event__title:hover {
color: #231F20;
border-bottom-color: #231F20;
cursor: pointer;
}
#tnew-template .tn-account-update-page .tn-upcoming-event__title:focus,
#tnew-template .tn-account-interests-page .tn-upcoming-event__title:focus,
#tnew-template .tn-upcoming-events-page .tn-upcoming-event__title:focus,
#tnew-template .tn-giving-history-page .tn-upcoming-event__title:focus {
outline: 2px solid #0157DD;
outline-offset: 3px;
}
#tnew-template .tn-account-update-page .tn-upcoming-event__list-item,
#tnew-template .tn-account-interests-page .tn-upcoming-event__list-item,
#tnew-template .tn-upcoming-events-page .tn-upcoming-event__list-item,
#tnew-template .tn-giving-history-page .tn-upcoming-event__list-item {
width: 100%;
border-bottom: 1px solid #eee;
}
#tnew-template .tn-account-update-page .tn-upcoming-event__list-item .tn-upcoming-event,
#tnew-template .tn-account-interests-page .tn-upcoming-event__list-item .tn-upcoming-event,
#tnew-template .tn-upcoming-events-page .tn-upcoming-event__list-item .tn-upcoming-event,
#tnew-template .tn-giving-history-page .tn-upcoming-event__list-item .tn-upcoming-event {
display: grid;
grid-template-columns: 1fr 25px auto;
grid-template-rows: auto;
}
@media all and (max-width: 59.9375em) {
#tnew-template .tn-account-update-page .tn-upcoming-event__list-item .tn-upcoming-event,
#tnew-template .tn-account-interests-page .tn-upcoming-event__list-item .tn-upcoming-event,
#tnew-template .tn-upcoming-events-page .tn-upcoming-event__list-item .tn-upcoming-event,
#tnew-template .tn-giving-history-page .tn-upcoming-event__list-item .tn-upcoming-event {
display: block;
}
}
#tnew-template .tn-account-update-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__details,
#tnew-template .tn-account-interests-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__details,
#tnew-template .tn-upcoming-events-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__details,
#tnew-template .tn-giving-history-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__details {
grid-row-start: 1;
grid-row-end: 2;
grid-column: 1;
}
#tnew-template .tn-account-update-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list,
#tnew-template .tn-account-interests-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list,
#tnew-template .tn-upcoming-events-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list,
#tnew-template .tn-giving-history-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list {
grid-column: 5;
text-align: right;
margin-top: 0;
}
@media all and (max-width: 59.9375em) {
#tnew-template .tn-account-update-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list .tn-upcoming-event__actions-list-item,
#tnew-template .tn-account-interests-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list .tn-upcoming-event__actions-list-item,
#tnew-template .tn-upcoming-events-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list .tn-upcoming-event__actions-list-item,
#tnew-template .tn-giving-history-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list .tn-upcoming-event__actions-list-item {
text-align: left;
margin-top: 1.5rem;
}
}
#tnew-template .tn-account-update-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list .tn-upcoming-event__actions-list-item a,
#tnew-template .tn-account-interests-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list .tn-upcoming-event__actions-list-item a,
#tnew-template .tn-upcoming-events-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list .tn-upcoming-event__actions-list-item a,
#tnew-template .tn-giving-history-page .tn-upcoming-event__list-item .tn-upcoming-event .tn-upcoming-event__actions-list .tn-upcoming-event__actions-list-item a {
margin-top: 0;
}
#tnew-template .tn-interests {
margin-bottom: 2rem;
}
#tnew-template .tn-account-create-page {
max-width: 800px;
}
#tnew-template .tn-account-logout-page {
padding-top: 4.5rem;
}
div[data-control-group-for='PatronAccountLogin.Password'] {
position: relative;
}
.tnew-pw-button {
background: none;
border: none;
position: absolute;
top: 32px;
right: 5px;
}
#tnew-template .tn-payment-page h2,
#tnew-template .tn-receipt-page h2 {
margin-top: 0;
margin-bottom: 0;
color: #231F20;
font-weight: 800;
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: normal;
margin-bottom: 0.75rem;
}
#tnew-template .tn-payment-page h2.styles__gt-america,
#tnew-template .tn-receipt-page h2.styles__gt-america {
font-weight: 900;
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: 0.1375rem;
}
@media all and (min-width: 48em) {
#tnew-template .tn-payment-page h2,
#tnew-template .tn-receipt-page h2 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.25;
letter-spacing: -0.00375rem;
}
#tnew-template .tn-payment-page h2.styles__gt-america,
#tnew-template .tn-receipt-page h2.styles__gt-america {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.21428571;
letter-spacing: 0.0875rem;
}
}
#tnew-template .tn-payment-page .tn-order-address-information-component,
#tnew-template .tn-receipt-page .tn-order-address-information-component,
#tnew-template .tn-payment-page .tn-donation-ask-component,
#tnew-template .tn-receipt-page .tn-donation-ask-component {
margin-top: 2rem;
}
@media all and (min-width: 60em) {
#tnew-template .tn-payment-page .tn-order-address-information-component,
#tnew-template .tn-receipt-page .tn-order-address-information-component,
#tnew-template .tn-payment-page .tn-donation-ask-component,
#tnew-template .tn-receipt-page .tn-donation-ask-component {
margin-top: 3.5rem;
}
}
#tnew-template .tn-payment-page .tn-receipt-component,
#tnew-template .tn-receipt-page .tn-receipt-component {
margin-top: 3.5rem;
}
@media all and (max-width: 59.9375em) {
#tnew-template .tn-payment-page .tn-receipt-component,
#tnew-template .tn-receipt-page .tn-receipt-component {
margin-top: 0;
}
#tnew-template .tn-payment-page .tn-receipt-component .tn-receipt-print,
#tnew-template .tn-receipt-page .tn-receipt-component .tn-receipt-print {
margin-bottom: 2rem;
}
}
#tnew-template .tn-payment-page .tn-patron-billing-information div,
#tnew-template .tn-receipt-page .tn-patron-billing-information div,
#tnew-template .tn-payment-page .tn-patron-shipping-information div,
#tnew-template .tn-receipt-page .tn-patron-shipping-information div,
#tnew-template .tn-payment-page .tn-receipt-component div,
#tnew-template .tn-receipt-page .tn-receipt-component div {
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 16px;
font-size: 1rem;
line-height: 1.625;
}
#tnew-template .tn-payment-page .tn-patron-billing-information div a,
#tnew-template .tn-receipt-page .tn-patron-billing-information div a,
#tnew-template .tn-payment-page .tn-patron-shipping-information div a,
#tnew-template .tn-receipt-page .tn-patron-shipping-information div a,
#tnew-template .tn-payment-page .tn-receipt-component div a,
#tnew-template .tn-receipt-page .tn-receipt-component div a {
border-bottom: 2px solid #C60223;
color: #C60223;
text-decoration: none;
font-weight: 700;
display: inline-block;
margin-top: 0.75rem;
}
.ticketdfw #tnew-template .tn-payment-page .tn-patron-billing-information div a,
.ticketdfw #tnew-template .tn-receipt-page .tn-patron-billing-information div a,
.ticketdfw #tnew-template .tn-payment-page .tn-patron-shipping-information div a,
.ticketdfw #tnew-template .tn-receipt-page .tn-patron-shipping-information div a,
.ticketdfw #tnew-template .tn-payment-page .tn-receipt-component div a,
.ticketdfw #tnew-template .tn-receipt-page .tn-receipt-component div a {
border-bottom: 2px solid #BF5622;
color: #BF5622;
}
.ticketdfw #tnew-template .tn-payment-page .tn-patron-billing-information div a:hover,
.ticketdfw #tnew-template .tn-receipt-page .tn-patron-billing-information div a:hover,
.ticketdfw #tnew-template .tn-payment-page .tn-patron-shipping-information div a:hover,
.ticketdfw #tnew-template .tn-receipt-page .tn-patron-shipping-information div a:hover,
.ticketdfw #tnew-template .tn-payment-page .tn-receipt-component div a:hover,
.ticketdfw #tnew-template .tn-receipt-page .tn-receipt-component div a:hover {
color: #231F20;
border-bottom-color: #231F20;
}
.ticketdfw #tnew-template .tn-payment-page .tn-patron-billing-information div a:focus,
.ticketdfw #tnew-template .tn-receipt-page .tn-patron-billing-information div a:focus,
.ticketdfw #tnew-template .tn-payment-page .tn-patron-shipping-information div a:focus,
.ticketdfw #tnew-template .tn-receipt-page .tn-patron-shipping-information div a:focus,
.ticketdfw #tnew-template .tn-payment-page .tn-receipt-component div a:focus,
.ticketdfw #tnew-template .tn-receipt-page .tn-receipt-component div a:focus {
outline: 2px solid #0157DD;
}
#tnew-template .tn-payment-page .tn-patron-billing-information div a:hover,
#tnew-template .tn-receipt-page .tn-patron-billing-information div a:hover,
#tnew-template .tn-payment-page .tn-patron-shipping-information div a:hover,
#tnew-template .tn-receipt-page .tn-patron-shipping-information div a:hover,
#tnew-template .tn-payment-page .tn-receipt-component div a:hover,
#tnew-template .tn-receipt-page .tn-receipt-component div a:hover {
color: #231F20;
border-bottom-color: #231F20;
cursor: pointer;
}
#tnew-template .tn-payment-page .tn-patron-billing-information div a:focus,
#tnew-template .tn-receipt-page .tn-patron-billing-information div a:focus,
#tnew-template .tn-payment-page .tn-patron-shipping-information div a:focus,
#tnew-template .tn-receipt-page .tn-patron-shipping-information div a:focus,
#tnew-template .tn-payment-page .tn-receipt-component div a:focus,
#tnew-template .tn-receipt-page .tn-receipt-component div a:focus {
outline: 2px solid #0157DD;
outline-offset: 3px;
}
@media all and (max-width: 47.9375em) {
#tnew-template .tn-payment-page .tn-patron-shipping-information .col-xs-12.col-sm-6,
#tnew-template .tn-receipt-page .tn-patron-shipping-information .col-xs-12.col-sm-6 {
margin-top: 2rem;
}
}
#tnew-template .tn-payment-page .tn-donation-ask-component .input-group-addon.tn-currency-symbol,
#tnew-template .tn-receipt-page .tn-donation-ask-component .input-group-addon.tn-currency-symbol {
background: #231F20;
color: #fff;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
border: 2px solid #231F20;
border-radius: 0;
}
#tnew-template .tn-payment-page .tn-donation-ask-component .form-control.tn-amount,
#tnew-template .tn-receipt-page .tn-donation-ask-component .form-control.tn-amount {
border-width: 2px;
}
#tnew-template .tn-payment-page .tn-cart-component,
#tnew-template .tn-receipt-page .tn-cart-component {
margin-top: 2rem;
}
#tnew-template .tn-cart-component .tn-empty-cart-message {
border: 1px solid #C0C0C0;
background-color: #F1EFF0;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
font-style: normal;
padding: 2.375rem 0;
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item {
border-color: #231F20;
padding: 2rem 0;
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-item-summary {
margin-top: 0;
}
@media all and (min-width: 48em) {
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-item-summary {
grid-template-columns: 0 auto 200px;
}
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-item-summary__property--name {
margin-bottom: 1rem;
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-line-item-name,
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-item-summary__property--price-total {
margin-top: 0;
margin-bottom: 0;
color: #231F20;
font-weight: 800;
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: normal;
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-line-item-name.styles__gt-america,
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-item-summary__property--price-total.styles__gt-america {
font-weight: 900;
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: 0.1375rem;
}
@media all and (min-width: 48em) {
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-line-item-name,
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-item-summary__property--price-total {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.25;
letter-spacing: -0.00375rem;
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-line-item-name.styles__gt-america,
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-item-summary__property--price-total.styles__gt-america {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.21428571;
letter-spacing: 0.0875rem;
}
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-item-summary__property--price-total {
margin-right: 1.375rem;
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart__btn-remove {
border: 2px solid #231F20;
border-radius: 50%;
margin-top: 15px;
width: 38px;
height: 38px;
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart__btn-remove:hover {
background: #C60223;
border-color: #fff;
}
.ticketdfw #tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart__btn-remove:hover {
background: #BF5622;
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart__btn-remove:hover .tn-cart__btn-remove-icon:before,
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart__btn-remove:hover .tn-cart__btn-remove-icon:after {
background-color: #fff;
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart__btn-remove:focus {
outline: 2px solid #0157DD;
outline-offset: 3px;
}
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-item-details__list {
margin-top: 1.375rem;
padding: 0.375rem 0.9375rem;
}
@media all and (min-width: 60em) {
#tnew-template .tn-cart-component .tn-cart__section-items .tn-cart-item .tn-cart-item-summary__property--secondary {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.55555556;
}
}
#tnew-template .tn-cart-component .tn-cart-totals {
border-top: 1px solid #231F20;
padding-top: 2rem;
padding-bottom: 0;
}
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__line-item {
padding-bottom: 1rem;
}
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__label,
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__value {
margin-top: 0;
margin-bottom: 0;
color: #231F20;
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
letter-spacing: normal;
font-weight: 700;
}
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__label.styles__gt-america,
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__value.styles__gt-america {
font-weight: 900;
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
letter-spacing: normal;
}
@media all and (min-width: 48em) {
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__label,
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__value {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
letter-spacing: normal;
}
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__label.styles__gt-america,
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__value.styles__gt-america {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
letter-spacing: normal;
}
}
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__label--total,
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__value--total {
margin-top: 0;
margin-bottom: 0;
color: #231F20;
font-weight: 800;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
letter-spacing: normal;
}
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__label--total.styles__gt-america,
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__value--total.styles__gt-america {
font-weight: 900;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
letter-spacing: normal;
}
@media all and (min-width: 48em) {
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__label--total,
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__value--total {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: normal;
}
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__label--total.styles__gt-america,
#tnew-template .tn-cart-component .tn-cart-totals .tn-cart-totals__value--total.styles__gt-america {
font-size: 22px;
font-size: 1.375rem;
line-height: 1.27272727;
letter-spacing: 0.1375rem;
}
}
#tnew-template .tn-cart-buttons {
display: block;
text-align: right;
margin-top: 2.5rem;
}
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action,
#tnew-template .tn-cart-buttons .tn-cart-buttons__secondary-action {
font-weight: 700;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
padding: 1.125rem 2.5rem;
}
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action {
margin-top: 0;
margin-bottom: 1rem;
background: #231F20;
color: #fff;
}
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action:hover,
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action:active {
background: #C60223;
background: var(--brand-2);
}
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action:focus {
background: #231F20;
}
#tnew-template .tn-cart-buttons .tn-cart-buttons__primary-action:disabled {
text-decoration: line-through;
opacity: 100;
}
#tnew-template .tn-cart-buttons .tn-cart-buttons__secondary-action {
display: inline-block;
margin-top: 0;
}
#tnew-template .tn-cart-buttons .tn-cart-buttons__item-container {
margin-bottom: 16px;
}
.tn-production-season-overview-page .glyphicon.glyphicon-chevron-right.btn.btn-primary {
display: none;
}
.tn-events-detail-page .tn-additional-events__select-view-container .input-group {
display: block;
}
.tn-events-detail-page .tn-additional-events__select-view-container .input-group #tn-additional-events-btn-submit {
width: 100%;
margin-top: 5px;
}
.tnew__inline-link {
border-bottom: 2px solid #C60223;
color: #C60223;
text-decoration: none;
}
.ticketdfw .tnew__inline-link {
border-bottom: 2px solid #BF5622;
color: #BF5622;
}
.ticketdfw .tnew__inline-link:hover {
color: #231F20;
border-bottom-color: #231F20;
}
.ticketdfw .tnew__inline-link:focus {
outline: 2px solid #0157DD;
}
.tnew__inline-link:hover {
color: #231F20;
border-bottom-color: #231F20;
cursor: pointer;
}
.tnew__inline-link:focus {
outline: 2px solid #0157DD;
outline-offset: 3px;
}
.btn-primary {
background: #231F20;
color: #fff;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
border-radius: 0;
}
.btn-primary:hover,
.btn-primary:active {
background: #C60223;
background: var(--brand-2);
}
.btn-primary:focus {
background: #231F20;
outline: 3px solid #0157DD;
outline-offset: 3px;
}
.btn-default,
.tn-cart-buttons__secondary-action {
background: #fff;
color: #231F20;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
border-radius: 0;
}
.btn-default:after,
.tn-cart-buttons__secondary-action:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border: 0.1875rem solid #231F20;
}
.btn-default:hover,
.tn-cart-buttons__secondary-action:hover,
.btn-default:active,
.tn-cart-buttons__secondary-action:active {
background: #C60223;
background: var(--brand-2);
color: #fff;
}
.btn-default:hover:after,
.tn-cart-buttons__secondary-action:hover:after,
.btn-default:active:after,
.tn-cart-buttons__secondary-action:active:after {
content: none;
}
.btn-default:focus,
.tn-cart-buttons__secondary-action:focus {
background: #fff;
color: #231F20;
}
.btn-default[disabled]:after,
.tn-cart-buttons__secondary-action[disabled]:after,
.btn-default.disabled:after,
.tn-cart-buttons__secondary-action.disabled:after {
border: none;
}
.btn-default:focus,
.tn-cart-buttons__secondary-action:focus {
outline: 3px solid #0157DD;
outline-offset: 3px;
}
#tnew-template {
min-height: calc(100vh - 128px);
padding: 1rem 0;
font-family: "Plus Jakarta Sans", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
@media all and (min-width: 48em) {
#tnew-template {
padding: 1.75rem 0;
}
}
#tnew-template main {
padding-top: 3.5rem;
}
@media all and (min-width: 48em) {
#tnew-template main {
padding: 4.5rem 0;
}
}
#tnew-template a:focus {
outline: 2px solid #0157DD;
outline-offset: 3px;
}
#tnew-template .tnew-hidden {
display: none !important;
}
.loadingSpinner__container--tnew {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: white;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes lds-ring--tnew {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loadingSpinner__spinner--tnew {
position: relative;
width: 80px;
height: 80px;
}
.loadingSpinner__spinner--tnew div {
box-sizing: border-box;
display: block;
position: absolute;
width: 50px;
height: 50px;
margin: 8px;
border: 6px solid black;
border-radius: 50%;
animation: lds-ring--tnew 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: black transparent transparent transparent;
z-index: 1;
}
.loadingSpinner__spinner--tnew div:nth-child(1) {
animation-delay: -0.45s;
}
.loadingSpinner__spinner--tnew div:nth-child(2) {
animation-delay: -0.3s;
}
.loadingSpinner__spinner--tnew div:nth-child(3) {
animation-delay: -0.15s;
}