Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Foo
- Bar
- Baz
- Foo Bar Baz
- Burger and fries
- £5.99
- Fillet steak
- £19.99
- Ice cream
- £2.99
- 1st place Bob
- 2nd place Lilly
- 3rd place Ted
Header
*
* The beauty of combining the greyboxing with inuit.css objects is that any
* prototyping can quickly be converted into/used as production code.
*
* For a more complete prototyping framework, consider Adam Whitcroft’s Proto:
* adamwhitcroft.com/proto
*
* Demo: jsfiddle.net/inuitcss/qCXfh/
*
*/
.greybox,
.graybox {
font-size: 12px;
font-size: 0.7058823529rem;
line-height: 1.75;
font-family: sans-serif;
text-align: center;
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
}
.greybox a,
.graybox a {
color: #fff;
text-decoration: underline;
}
/**
* All greyboxes will occupy 100% of their parent’s width, but to alter their
* heights we apply incrementally larger line-heights:
*/
.greybox--small,
.graybox--small {
line-height: 42px;
}
.greybox--medium,
.graybox--medium {
line-height: 84px;
}
.greybox--large,
.graybox--large {
line-height: 168px;
}
.greybox--huge,
.graybox--huge {
line-height: 336px;
}
.greybox--gigantic,
.graybox--gigantic {
line-height: 672px;
}
/**
* Style trumps; helper and brand classes
*/
/*------------------------------------*\
$WIDTHS
\*------------------------------------*/
/**
* Sizes in human readable format. These are used in conjunction with other
* objects and abstractions found in inuit.css, most commonly the grid system
* and faux flexbox.
*
* We have a mixin to generate our widths and their breakpoint-specific
* variations.
*/
/**
* Whole
*/
.one-whole {
width: 100%;
}
/**
* Halves
*/
.one-half, .six-twelfths, .five-tenths, .four-eighths, .three-sixths, .two-quarters {
width: 50%;
}
/**
* Thirds
*/
.one-third, .four-twelfths, .two-sixths {
width: 33.333%;
}
.two-thirds, .eight-twelfths, .four-sixths {
width: 66.666%;
}
/**
* Quarters
*/
.one-quarter, .three-twelfths, .two-eighths {
width: 25%;
}
.three-quarters, .nine-twelfths, .six-eighths {
width: 75%;
}
/**
* Fifths
*/
.one-fifth, .two-tenths {
width: 20%;
}
.two-fifths, .four-tenths {
width: 40%;
}
.three-fifths, .six-tenths {
width: 60%;
}
.four-fifths, .eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.one-sixth, .two-twelfths {
width: 16.666%;
}
.five-sixths, .ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.one-eighth {
width: 12.5%;
}
.three-eighths {
width: 37.5%;
}
.five-eighths {
width: 62.5%;
}
.seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.one-tenth {
width: 10%;
}
.three-tenths {
width: 30%;
}
.seven-tenths {
width: 70%;
}
.nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.one-twelfth {
width: 8.333%;
}
.five-twelfths {
width: 41.666%;
}
.seven-twelfths {
width: 58.333%;
}
.eleven-twelfths {
width: 91.666%;
}
/**
* If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
* access to these classes. You can define at which breakpoint you’d like an
* element to be a certain size, e.g.:
*
* ` ...
`
*
* This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
* horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
* at ‘mobile’ sizes.
*
* Demo: jsfiddle.net/inuitcss/WS4Ge
*
*/
@media only screen and (max-width: 480px) {
/**
* Whole
*/
.palm-one-whole {
width: 100%;
}
/**
* Halves
*/
.palm-one-half, .palm-six-twelfths, .palm-five-tenths, .palm-four-eighths, .palm-three-sixths, .palm-two-quarters {
width: 50%;
}
/**
* Thirds
*/
.palm-one-third, .palm-four-twelfths, .palm-two-sixths {
width: 33.333%;
}
.palm-two-thirds, .palm-eight-twelfths, .palm-four-sixths {
width: 66.666%;
}
/**
* Quarters
*/
.palm-one-quarter, .palm-three-twelfths, .palm-two-eighths {
width: 25%;
}
.palm-three-quarters, .palm-nine-twelfths, .palm-six-eighths {
width: 75%;
}
/**
* Fifths
*/
.palm-one-fifth, .palm-two-tenths {
width: 20%;
}
.palm-two-fifths, .palm-four-tenths {
width: 40%;
}
.palm-three-fifths, .palm-six-tenths {
width: 60%;
}
.palm-four-fifths, .palm-eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.palm-one-sixth, .palm-two-twelfths {
width: 16.666%;
}
.palm-five-sixths, .palm-ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.palm-one-eighth {
width: 12.5%;
}
.palm-three-eighths {
width: 37.5%;
}
.palm-five-eighths {
width: 62.5%;
}
.palm-seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.palm-one-tenth {
width: 10%;
}
.palm-three-tenths {
width: 30%;
}
.palm-seven-tenths {
width: 70%;
}
.palm-nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.palm-one-twelfth {
width: 8.333%;
}
.palm-five-twelfths {
width: 41.666%;
}
.palm-seven-twelfths {
width: 58.333%;
}
.palm-eleven-twelfths {
width: 91.666%;
}
}
@media only screen and (min-width: 481px) and (max-width: 1023px) {
/**
* Whole
*/
.lap-one-whole {
width: 100%;
}
/**
* Halves
*/
.lap-one-half, .lap-six-twelfths, .lap-five-tenths, .lap-four-eighths, .lap-three-sixths, .lap-two-quarters {
width: 50%;
}
/**
* Thirds
*/
.lap-one-third, .lap-four-twelfths, .lap-two-sixths {
width: 33.333%;
}
.lap-two-thirds, .lap-eight-twelfths, .lap-four-sixths {
width: 66.666%;
}
/**
* Quarters
*/
.lap-one-quarter, .lap-three-twelfths, .lap-two-eighths {
width: 25%;
}
.lap-three-quarters, .lap-nine-twelfths, .lap-six-eighths {
width: 75%;
}
/**
* Fifths
*/
.lap-one-fifth, .lap-two-tenths {
width: 20%;
}
.lap-two-fifths, .lap-four-tenths {
width: 40%;
}
.lap-three-fifths, .lap-six-tenths {
width: 60%;
}
.lap-four-fifths, .lap-eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.lap-one-sixth, .lap-two-twelfths {
width: 16.666%;
}
.lap-five-sixths, .lap-ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.lap-one-eighth {
width: 12.5%;
}
.lap-three-eighths {
width: 37.5%;
}
.lap-five-eighths {
width: 62.5%;
}
.lap-seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.lap-one-tenth {
width: 10%;
}
.lap-three-tenths {
width: 30%;
}
.lap-seven-tenths {
width: 70%;
}
.lap-nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.lap-one-twelfth {
width: 8.333%;
}
.lap-five-twelfths {
width: 41.666%;
}
.lap-seven-twelfths {
width: 58.333%;
}
.lap-eleven-twelfths {
width: 91.666%;
}
}
@media only screen and (min-width: 481px) {
/**
* Whole
*/
.lap-and-up-one-whole {
width: 100%;
}
/**
* Halves
*/
.lap-and-up-one-half, .lap-and-up-six-twelfths, .lap-and-up-five-tenths, .lap-and-up-four-eighths, .lap-and-up-three-sixths, .lap-and-up-two-quarters {
width: 50%;
}
/**
* Thirds
*/
.lap-and-up-one-third, .lap-and-up-four-twelfths, .lap-and-up-two-sixths {
width: 33.333%;
}
.lap-and-up-two-thirds, .lap-and-up-eight-twelfths, .lap-and-up-four-sixths {
width: 66.666%;
}
/**
* Quarters
*/
.lap-and-up-one-quarter, .lap-and-up-three-twelfths, .lap-and-up-two-eighths {
width: 25%;
}
.lap-and-up-three-quarters, .lap-and-up-nine-twelfths, .lap-and-up-six-eighths {
width: 75%;
}
/**
* Fifths
*/
.lap-and-up-one-fifth, .lap-and-up-two-tenths {
width: 20%;
}
.lap-and-up-two-fifths, .lap-and-up-four-tenths {
width: 40%;
}
.lap-and-up-three-fifths, .lap-and-up-six-tenths {
width: 60%;
}
.lap-and-up-four-fifths, .lap-and-up-eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.lap-and-up-one-sixth, .lap-and-up-two-twelfths {
width: 16.666%;
}
.lap-and-up-five-sixths, .lap-and-up-ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.lap-and-up-one-eighth {
width: 12.5%;
}
.lap-and-up-three-eighths {
width: 37.5%;
}
.lap-and-up-five-eighths {
width: 62.5%;
}
.lap-and-up-seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.lap-and-up-one-tenth {
width: 10%;
}
.lap-and-up-three-tenths {
width: 30%;
}
.lap-and-up-seven-tenths {
width: 70%;
}
.lap-and-up-nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.lap-and-up-one-twelfth {
width: 8.333%;
}
.lap-and-up-five-twelfths {
width: 41.666%;
}
.lap-and-up-seven-twelfths {
width: 58.333%;
}
.lap-and-up-eleven-twelfths {
width: 91.666%;
}
}
@media only screen and (max-width: 1023px) {
/**
* Whole
*/
.portable-one-whole {
width: 100%;
}
/**
* Halves
*/
.portable-one-half, .portable-six-twelfths, .portable-five-tenths, .portable-four-eighths, .portable-three-sixths, .portable-two-quarters {
width: 50%;
}
/**
* Thirds
*/
.portable-one-third, .portable-four-twelfths, .portable-two-sixths {
width: 33.333%;
}
.portable-two-thirds, .portable-eight-twelfths, .portable-four-sixths {
width: 66.666%;
}
/**
* Quarters
*/
.portable-one-quarter, .portable-three-twelfths, .portable-two-eighths {
width: 25%;
}
.portable-three-quarters, .portable-nine-twelfths, .portable-six-eighths {
width: 75%;
}
/**
* Fifths
*/
.portable-one-fifth, .portable-two-tenths {
width: 20%;
}
.portable-two-fifths, .portable-four-tenths {
width: 40%;
}
.portable-three-fifths, .portable-six-tenths {
width: 60%;
}
.portable-four-fifths, .portable-eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.portable-one-sixth, .portable-two-twelfths {
width: 16.666%;
}
.portable-five-sixths, .portable-ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.portable-one-eighth {
width: 12.5%;
}
.portable-three-eighths {
width: 37.5%;
}
.portable-five-eighths {
width: 62.5%;
}
.portable-seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.portable-one-tenth {
width: 10%;
}
.portable-three-tenths {
width: 30%;
}
.portable-seven-tenths {
width: 70%;
}
.portable-nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.portable-one-twelfth {
width: 8.333%;
}
.portable-five-twelfths {
width: 41.666%;
}
.portable-seven-twelfths {
width: 58.333%;
}
.portable-eleven-twelfths {
width: 91.666%;
}
}
@media only screen and (min-width: 1024px) {
/**
* Whole
*/
.desk-one-whole {
width: 100%;
}
/**
* Halves
*/
.desk-one-half, .desk-six-twelfths, .desk-five-tenths, .desk-four-eighths, .desk-three-sixths, .desk-two-quarters {
width: 50%;
}
/**
* Thirds
*/
.desk-one-third, .desk-four-twelfths, .desk-two-sixths {
width: 33.333%;
}
.desk-two-thirds, .desk-eight-twelfths, .desk-four-sixths {
width: 66.666%;
}
/**
* Quarters
*/
.desk-one-quarter, .desk-three-twelfths, .desk-two-eighths {
width: 25%;
}
.desk-three-quarters, .desk-nine-twelfths, .desk-six-eighths {
width: 75%;
}
/**
* Fifths
*/
.desk-one-fifth, .desk-two-tenths {
width: 20%;
}
.desk-two-fifths, .desk-four-tenths {
width: 40%;
}
.desk-three-fifths, .desk-six-tenths {
width: 60%;
}
.desk-four-fifths, .desk-eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.desk-one-sixth, .desk-two-twelfths {
width: 16.666%;
}
.desk-five-sixths, .desk-ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.desk-one-eighth {
width: 12.5%;
}
.desk-three-eighths {
width: 37.5%;
}
.desk-five-eighths {
width: 62.5%;
}
.desk-seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.desk-one-tenth {
width: 10%;
}
.desk-three-tenths {
width: 30%;
}
.desk-seven-tenths {
width: 70%;
}
.desk-nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.desk-one-twelfth {
width: 8.333%;
}
.desk-five-twelfths {
width: 41.666%;
}
.desk-seven-twelfths {
width: 58.333%;
}
.desk-eleven-twelfths {
width: 91.666%;
}
}
/**
* If you have set the additional `$responsive-extra` variable to ‘true’ in
* `_vars.scss` then you now have access to the following class available to
* accomodate much larger screen resolutions.
*/
/* endif */
/*------------------------------------*\
$PUSH
\*------------------------------------*/
/**
* Push classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$PULL
\*------------------------------------*/
/**
* Pull classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$HELPER
\*------------------------------------*/
/**
* A series of helper classes to use arbitrarily. Only use a helper class if an
* element/component doesn’t already have a class to which you could apply this
* styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
* that ruleset as opposed to adding the `.float--left` class to the markup.
*
* A lot of these classes carry `!important` as you will always want them to win
* out over other selectors.
*/
/**
* Add/remove floats
*/
.float--right {
float: right !important;
}
.float--left {
float: left !important;
}
.float--none {
float: none !important;
}
/**
* Text alignment
*/
.text--left {
text-align: left !important;
}
.text--center {
text-align: center !important;
}
.text--right {
text-align: right !important;
}
/**
* Font weights
*/
.weight--light {
font-weight: 300 !important;
}
.weight--normal {
font-weight: 400 !important;
}
.weight--semibold {
font-weight: 600 !important;
}
.clear--left {
clear: left;
}
/**
* Add/remove margins
*/
.push {
margin: 20px !important;
}
.push--top {
margin-top: 20px !important;
}
.push--right {
margin-right: 20px !important;
}
.push--bottom {
margin-bottom: 20px !important;
}
.push--left {
margin-left: 20px !important;
}
.push--ends {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.push--sides {
margin-right: 20px !important;
margin-left: 20px !important;
}
.push-half {
margin: 10px !important;
}
.push-half--top {
margin-top: 10px !important;
}
.push-half--right {
margin-right: 10px !important;
}
.push-half--bottom {
margin-bottom: 10px !important;
}
.push-half--left {
margin-left: 10px !important;
}
.push-half--ends {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.push-half--sides {
margin-right: 10px !important;
margin-left: 10px !important;
}
.flush {
margin: 0 !important;
}
.flush--top {
margin-top: 0 !important;
}
.flush--right {
margin-right: 0 !important;
}
.flush--bottom {
margin-bottom: 0 !important;
}
.flush--left {
margin-left: 0 !important;
}
.flush--ends {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.flush--sides {
margin-right: 0 !important;
margin-left: 0 !important;
}
/**
* Add/remove paddings
*/
.soft {
padding: 20px !important;
}
.soft--top {
padding-top: 20px !important;
}
.soft--right {
padding-right: 20px !important;
}
.soft--bottom {
padding-bottom: 20px !important;
}
.soft--left {
padding-left: 20px !important;
}
.soft--ends {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.soft--sides {
padding-right: 20px !important;
padding-left: 20px !important;
}
.soft-half {
padding: 10px !important;
}
.soft-half--top {
padding-top: 10px !important;
}
.soft-half--right {
padding-right: 10px !important;
}
.soft-half--bottom {
padding-bottom: 10px !important;
}
.soft-half--left {
padding-left: 10px !important;
}
.soft-half--ends {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.soft-half--sides {
padding-right: 10px !important;
padding-left: 10px !important;
}
.hard {
padding: 0 !important;
}
.hard--top {
padding-top: 0 !important;
}
.hard--right {
padding-right: 0 !important;
}
.hard--bottom {
padding-bottom: 0 !important;
}
.hard--left {
padding-left: 0 !important;
}
.hard--ends {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.hard--sides {
padding-right: 0 !important;
padding-left: 0 !important;
}
/**
* Pull items full width of `.island` parents.
*/
.full-bleed {
margin-right: -20px !important;
margin-left: -20px !important;
}
.islet .full-bleed {
margin-right: -10px !important;
margin-left: -10px !important;
}
/**
* Add a help cursor to any element that gives the user extra information on
* `:hover`.
*/
.informative {
cursor: help !important;
}
/**
* Mute an object by reducing its opacity.
*/
.muted {
opacity: 0.5 !important;
filter: alpha(opacity=50) !important;
}
/**
* Align items to the right where they imply progression/movement forward, e.g.:
*
*
*/
.proceed {
text-align: right !important;
}
/**
* Add a right-angled quote to links that imply movement, e.g.:
*
Read more
*
*/
.go:after {
content: " " "»" !important;
}
/**
* Apply capital case to an element (usually a `strong`).
*/
.caps {
text-transform: uppercase !important;
}
/**
* Hide content off-screen without resorting to `display:none;`, also provide
* breakpoint specific hidden elements.
*/
.accessibility,
.visuallyhidden {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
@media only screen and (max-width: 480px) {
.accessibility--palm,
.visuallyhidden--palm {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
}
@media only screen and (min-width: 481px) and (max-width: 1023px) {
.accessibility--lap,
.visuallyhidden--lap {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
}
@media only screen and (min-width: 481px) {
.accessibility--lap-and-up,
.visuallyhidden--lap-and-up {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
}
@media only screen and (max-width: 1023px) {
.accessibility--portable,
.visuallyhidden--portable {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
}
@media only screen and (min-width: 1024px) {
.accessibility--desk,
.visuallyhidden--desk {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
}
@media only screen and (min-width: 1200px) {
.accessibility--desk-wide,
.visuallyhidden--desk-wide {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
}
/* endif */
.pno-section .content .btn--cta, .pno-section .content .btn--biggie {
background-color: #92de00;
box-shadow: 0px 2px 0px rgba(96, 146, 0, 0.9);
}
.pno-section .content .btn--cta:hover, .pno-section .content .btn--biggie:hover {
background-color: #70ab00;
box-shadow: 0px 3px 0px rgba(45, 69, 0, 0.9);
}
.pno-section .content .btn--primary {
background-color: #7ebf00;
box-shadow: 0px 2px 0px rgba(76, 115, 0, 0.9);
}
.pno-section .content h1 {
color: #67970d;
}
.pno-section .content .subhead {
color: #7cbd00;
}
.pno-section .content .important-dates, .pno-section .content .note.note--availability, .pno-section .content .offering-block {
border: 2px solid #92de00;
}
.pno-section .content .note.note--cta {
border: 2px solid #92de00;
background: #92de00;
background: rgba(146, 222, 0, 0.74);
color: #fff;
}
.pno-section .header-note h3 {
background: rgba(222, 245, 179, 0.95);
color: #426400;
}
.pno-section .highlight {
color: #7cbd00;
}
.pno-section .inter-headline {
border-color: #92de00;
color: #496f00;
}
.pno-section .gallery a:hover {
border-color: #78b600;
}
.pno-section .question {
color: #7cbd00;
}
.pno-section .question:hover {
color: #496f00;
background: rgba(146, 222, 0, 0.05);
}
.pno-section .question.expanded {
color: #5f9000;
background: rgba(146, 222, 0, 0.12);
}
.camps-section .content .btn--cta, .camps-section .content .btn--biggie {
background-color: #00dbb5;
box-shadow: 0px 2px 0px rgba(0, 143, 118, 0.9);
}
.camps-section .content .btn--cta:hover, .camps-section .content .btn--biggie:hover {
background-color: #00a88b;
box-shadow: 0px 3px 0px rgba(0, 66, 55, 0.9);
}
.camps-section .content .btn--primary {
background-color: #00bc9c;
box-shadow: 0px 2px 0px rgba(0, 112, 93, 0.9);
}
.camps-section .content h1 {
color: #0d957d;
}
.camps-section .content .subhead {
color: #00ba9a;
}
.camps-section .content .important-dates, .camps-section .content .note.note--availability, .camps-section .content .offering-block {
border: 2px solid #00dbb5;
}
.camps-section .content .note.note--cta {
border: 2px solid #00dbb5;
background: #00dbb5;
background: rgba(0, 219, 181, 0.74);
color: #fff;
}
.camps-section .header-note h3 {
background: rgba(179, 244, 233, 0.95);
color: #006351;
}
.camps-section .highlight {
color: #00ba9a;
}
.camps-section .inter-headline {
border-color: #00dbb5;
color: #006e5b;
}
.camps-section .gallery a:hover {
border-color: #00b494;
}
.camps-section .question {
color: #00ba9a;
}
.camps-section .question:hover {
color: #006e5b;
background: rgba(0, 219, 181, 0.05);
}
.camps-section .question.expanded {
color: #008e76;
background: rgba(0, 219, 181, 0.12);
}
.parties-section .content .btn--cta, .parties-section .content .btn--biggie {
background-color: #b24dd9;
box-shadow: 0px 2px 0px rgba(140, 38, 179, 0.9);
}
.parties-section .content .btn--cta:hover, .parties-section .content .btn--biggie:hover {
background-color: #9c2bc8;
box-shadow: 0px 3px 0px rgba(91, 25, 116, 0.9);
}
.parties-section .content .btn--primary {
background-color: #9942bb;
box-shadow: 0px 2px 0px rgba(107, 46, 130, 0.9);
}
.parties-section .content h1 {
color: #7b3d93;
}
.parties-section .content .subhead {
color: #9741b8;
}
.parties-section .content .important-dates, .parties-section .content .note.note--availability, .parties-section .content .offering-block {
border: 2px solid #b24dd9;
}
.parties-section .content .note.note--cta {
border: 2px solid #b24dd9;
background: #b24dd9;
background: rgba(178, 77, 217, 0.74);
color: #fff;
}
.parties-section .header-note h3 {
background: rgba(232, 202, 244, 0.95);
color: #502362;
}
.parties-section .highlight {
color: #9741b8;
}
.parties-section .inter-headline {
border-color: #b24dd9;
color: #59276d;
}
.parties-section .gallery a:hover {
border-color: #923fb2;
}
.parties-section .question {
color: #9741b8;
}
.parties-section .question:hover {
color: #59276d;
background: rgba(178, 77, 217, 0.05);
}
.parties-section .question.expanded {
color: #74328d;
background: rgba(178, 77, 217, 0.12);
}
.classes-section .content .btn--cta, .classes-section .content .btn--biggie {
background-color: #40b2e6;
box-shadow: 0px 2px 0px rgba(25, 140, 192, 0.9);
}
.classes-section .content .btn--cta:hover, .classes-section .content .btn--biggie:hover {
background-color: #1c9cd7;
box-shadow: 0px 3px 0px rgba(16, 91, 125, 0.9);
}
.classes-section .content .btn--primary {
background-color: #3799c6;
box-shadow: 0px 2px 0px rgba(38, 107, 138, 0.9);
}
.classes-section .content h1 {
color: #357b9c;
}
.classes-section .content .subhead {
color: #3697c4;
}
.classes-section .content .important-dates, .classes-section .content .note.note--availability, .classes-section .content .offering-block {
border: 2px solid #40b2e6;
}
.classes-section .content .note.note--cta {
border: 2px solid #40b2e6;
background: #40b2e6;
background: rgba(64, 178, 230, 0.74);
color: #fff;
}
.classes-section .header-note h3 {
background: rgba(198, 232, 248, 0.95);
color: #1d5068;
}
.classes-section .highlight {
color: #3697c4;
}
.classes-section .inter-headline {
border-color: #40b2e6;
color: #205973;
}
.classes-section .gallery a:hover {
border-color: #3492bd;
}
.classes-section .question {
color: #3697c4;
}
.classes-section .question:hover {
color: #205973;
background: rgba(64, 178, 230, 0.05);
}
.classes-section .question.expanded {
color: #2a7496;
background: rgba(64, 178, 230, 0.12);
}
@media screen and (min-width: 48em) {
html.pno-section .subnav-ddmenu {
background: rgba(146, 222, 0, 0.97);
color: #fff;
}
html.pno-section .subnav-ddmenu:hover {
background: #92de00;
}
html.pno-section .subnav-ddmenu.open {
background: #92de00;
}
html.camps-section .subnav-ddmenu {
background: rgba(0, 219, 181, 0.97);
color: #fff;
}
html.camps-section .subnav-ddmenu:hover {
background: #00dbb5;
}
html.camps-section .subnav-ddmenu.open {
background: #00dbb5;
}
html.parties-section .subnav-ddmenu {
background: rgba(178, 77, 217, 0.97);
color: #fff;
}
html.parties-section .subnav-ddmenu:hover {
background: #b24dd9;
}
html.parties-section .subnav-ddmenu.open {
background: #b24dd9;
}
html.classes-section .subnav-ddmenu {
background: rgba(64, 178, 230, 0.97);
color: #fff;
}
html.classes-section .subnav-ddmenu:hover {
background: #40b2e6;
}
html.classes-section .subnav-ddmenu.open {
background: #40b2e6;
}
}
.btn, .btn--biggie {
color: #fff;
box-shadow: 0px 2px 0px rgba(18, 105, 146, 0.9);
background: #1994cd;
position: relative;
font-family: "karmina-sans", "Karmina Sans", "karmina-sans-1", "karmina-sans-2", "Helvetica Neue", Georgia, serif;
font-size: 1em;
padding: 10px;
line-height: 1em;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
border-radius: 4px;
display: inline-block;
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
}
.btn, .btn--biggie {
display: block;
text-align: center;
}
.btn.btn--cta, .btn--biggie, .btn.btn--cta.btn--primary {
color: #fff;
background-color: #f88010;
box-shadow: 0px 3px 0px rgba(182, 91, 5, 0.9);
}
.btn.btn--cta:hover, .btn--biggie:hover, .btn.btn--cta.btn--primary:hover {
background-color: #e37107;
box-shadow: 0px 3px 0px #9d4e05;
}
.btn.btn--call, .btn--call.btn--biggie {
background: #40b2e6;
}
.btn.btn--bolder:hover, .btn--bolder.btn--biggie:hover {
font-weight: 600;
}
.btn.btn--subtle, .btn--subtle.btn--biggie {
background: #f8f9fb;
border: 3px solid #c5cfd1;
color: #6f7575;
box-shadow: 0px 3px 0px rgba(199, 207, 223, 0.3);
font-weight: 600;
text-shadow: none;
}
.btn.btn--subtle:hover, .btn--subtle.btn--biggie:hover {
background-color: #fff;
box-shadow: 0px 3px 0px rgba(199, 207, 223, 0.5);
color: #4a4e4e;
}
.btn.btn--hollow, .btn--hollow.btn--biggie {
background: none;
border: 3px solid #fff;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
margin-top: 10px;
font-weight: bold;
}
.btn.btn--hollow:hover, .btn--hollow.btn--biggie:hover {
background: rgba(255, 255, 255, 0.1);
}
.btn .fa, .btn--biggie .fa {
padding-right: 5px;
}
.btn.btn--mini, .btn--mini.btn--biggie, .btn.btn--small, .btn--small.btn--biggie {
width: auto;
display: inline-block;
}
.btn.btn--small, .btn--small.btn--biggie {
padding: 6px 10px;
font-size: 0.9em;
line-height: 1;
}
.btn.btn--biggie, .btn--biggie {
font-size: 1.3em;
font-weight: 600;
}
.btn.btn--auto, .btn--auto.btn--biggie {
white-space: normal;
}
.btn.btn--mini, .btn--mini.btn--biggie {
padding: 5px 10px;
font-size: 0.75em;
line-height: 1;
}
.btn.btn--destroy, .btn--destroy.btn--biggie {
background: rgba(247, 253, 255, 0.3);
color: #9d0e10;
position: relative;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-ms-transition: color 0.2s;
transition: color 0.2s;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.btn.btn--destroy:before, .btn--destroy.btn--biggie:before {
font-family: FontAwesome;
content: "\f00d";
padding-right: 5px;
}
.btn.btn--destroy:hover, .btn--destroy.btn--biggie:hover {
background-color: #9d0e10;
color: #fff;
}
.btn:hover, .btn--biggie:hover {
background: #1ca4e3;
color: #fff;
}
.btn:focus, .btn--biggie:focus {
color: #fff;
}
.btn:active, .btn--biggie:active {
background: #33ade6;
color: #fff;
box-shadow: none;
}
.btn:active:not(.btn--expand_row):not(.btn--mini):not(#discussion-toggle):not(.mark), .btn--biggie:active:not(.btn--expand_row):not(.btn--mini):not(#discussion-toggle):not(.mark) {
top: 1px;
}
.btn--nav {
background: #fff;
font-weight: bold;
padding: 4px 8px;
display: block;
float: none;
width: auto;
line-height: 1.5;
font-size: 16px;
font-size: 0.9411764706rem;
}
.btn--inline {
padding: 5px;
background: rgba(155, 233, 255, 0.5);
border: 1px solid #baf0ff;
line-height: 0.7;
color: #0F2228;
font-size: 0.9em;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.btn--inline:hover {
background: #fff;
}
.fc-calendar-container {
position: relative;
height: 400px;
width: 400px;
}
.fc-calendar {
width: 100%;
height: 100%;
}
.fc-calendar .fc-head {
height: 30px;
line-height: 30px;
background: #ccc;
color: #fff;
}
.fc-calendar .fc-body {
position: relative;
width: 100%;
height: 100%;
height: -moz-calc(100% - 30px);
height: -webkit-calc(100% - 30px);
height: calc(100% - 30px);
border: 1px solid #ddd;
}
.fc-calendar .fc-row {
width: 100%;
border-bottom: 1px solid #ddd;
}
.fc-four-rows .fc-row {
height: 25%;
}
.fc-five-rows .fc-row {
height: 20%;
}
.fc-six-rows .fc-row {
height: 16.66%;
height: -moz-calc(100%/6);
height: -webkit-calc(100%/6);
height: 16.6666666667%;
}
.fc-calendar .fc-row > div,
.fc-calendar .fc-head > div {
float: left;
height: 100%;
width: 14.28%; /* 100% / 7 */
width: -moz-calc(100%/7);
width: -webkit-calc(100%/7);
width: 14.2857142857%;
position: relative;
}
/* IE 9 is rounding up the calc it seems */
.ie9 .fc-calendar .fc-row > div,
.ie9 .fc-calendar .fc-head > div {
width: 14.2%;
}
.fc-calendar .fc-row > div {
border-right: 1px solid #ddd;
padding: 4px;
overflow: hidden;
position: relative;
}
.fc-calendar .fc-head > div {
text-align: center;
}
.fc-calendar .fc-row > div > span.fc-date {
position: absolute;
width: 30px;
height: 20px;
font-size: 20px;
line-height: 20px;
font-weight: 700;
color: #ddd;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8);
bottom: 5px;
right: 5px;
text-align: right;
}
.fc-calendar .fc-row > div > span.fc-weekday {
padding-left: 5px;
display: none;
}
.fc-calendar .fc-row > div.fc-today {
background: #fff4c3;
}
.fc-calendar .fc-row > div.fc-out {
opacity: 0.6;
}
.fc-calendar .fc-row > div:last-child,
.fc-calendar .fc-head > div:last-child {
border-right: none;
}
.fc-calendar .fc-row:last-child {
border-bottom: none;
}
/*body {
background: #cebe29;
background: -moz-linear-gradient(-45deg, #cebe29 0%, #9b1f50 33%, #2989d8 71%, #89b4ff 91%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#cebe29), color-stop(33%,#9b1f50), color-stop(71%,#2989d8), color-stop(91%,#89b4ff));
background: -webkit-linear-gradient(-45deg, #cebe29 0%,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);
background: -o-linear-gradient(-45deg, #cebe29 0%,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);
background: -ms-linear-gradient(-45deg, #cebe29 0%,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);
background: linear-gradient(135deg, #cebe29 0%,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebe29', endColorstr='#89b4ff',GradientType=1 );
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}*/
.custom-calendar-full {
top: 24px;
bottom: 0px;
left: 0px;
width: 100%;
height: auto;
}
.fc-calendar-container {
height: auto;
bottom: 0px;
width: 100%;
top: 120px;
position: absolute;
left: 0;
}
.custom-header {
padding: 20px 20px 10px 0px;
height: 50px;
position: relative;
}
.custom-header h2,
.custom-header h3 {
float: left;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 4px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.custom-header h2 {
color: #40b2e6;
width: 60%;
}
.custom-header h2 a,
.custom-header h2 span {
color: #40b2e6;
font-size: 18px;
letter-spacing: 3px;
white-space: nowrap;
}
.custom-header h2 a {
color: #40b2e6;
}
.no-touch .custom-header h2 a:hover {
color: #40b2e6;
}
.custom-header h3 {
width: 40%;
color: #ddd;
color: #40b2e6;
font-weight: 300;
line-height: 30px;
text-align: left;
padding-right: 125px;
}
.custom-header nav {
position: absolute;
right: 20px;
top: 20px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.custom-header nav span {
float: left;
width: 30px;
height: 30px;
position: relative;
color: transparent;
cursor: pointer;
background: #40b2e6;
margin: 0 1px;
font-size: 20px;
border-radius: 0 3px 3px 0;
box-shadow: inset 0 1px #40b2e6;
}
.custom-header nav span:first-child {
border-radius: 3px 0 0 3px;
}
.custom-header nav span:hover {
background: #40b2e6;
}
.custom-header span:before {
font-family: "fontawesome";
color: #fff;
display: inline-block;
text-align: center;
width: 100%;
text-indent: 4px;
}
.custom-header nav span.custom-prev:before {
content: "ᐊ";
}
.custom-header nav span.custom-next:before {
content: "ᐅ";
}
.custom-header nav span:last-child {
margin-left: 20px;
border-radius: 3px;
}
.custom-header nav span.custom-current:before {
content: "➦";
}
.fc-calendar {
background: #40b2e6;
width: auto;
top: 10px;
bottom: 20px;
left: 20px;
right: 20px;
height: auto;
border-radius: 20px;
position: absolute;
}
.fc-calendar .fc-head {
background: rgba(64, 178, 230, 0.5);
color: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 1px 0 #40b2e6;
border-radius: 20px 20px 0 0;
height: 40px;
line-height: 40px;
padding: 0 20px;
}
.fc-calendar .fc-head > div {
font-weight: 300;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 3px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.fc-calendar .fc-row > div > span.fc-date {
color: rgba(255, 255, 255, 0.9);
text-shadow: none;
font-size: 26px;
font-weight: 300;
bottom: auto;
right: auto;
top: 10px;
left: 10px;
text-align: left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.fc-calendar .fc-body {
border: none;
padding: 20px;
}
.fc-calendar .fc-row {
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
border: none;
}
.fc-calendar .fc-row:last-child {
box-shadow: none;
}
.fc-calendar .fc-row:first-child > div:first-child {
border-radius: 10px 0 0 0;
}
.fc-calendar .fc-row:first-child > div:last-child {
border-radius: 0 10px 0 0;
}
.fc-calendar .fc-row:last-child > div:first-child {
border-radius: 0 0 0 10px;
}
.fc-calendar .fc-row:last-child > div:last-child {
border-radius: 0 0 10px 0;
}
.fc-calendar .fc-row > div {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
border: none;
padding: 10px;
cursor: pointer;
}
.fc-calendar .fc-row > div:first-child {
box-shadow: none;
}
.fc-calendar .fc-row > div.fc-today {
background: transparent;
box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.1);
}
.fc-calendar .fc-row > div.fc-today:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -o-llinear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -ms-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}
.fc-calendar .fc-row > div > div {
margin-top: 35px;
}
.fc-calendar .fc-row > div > div a,
.fc-calendar .fc-row > div > div span {
color: rgb(255, 255, 255);
font-size: 12px;
/*text-transform: uppercase;*/
display: inline-block;
padding: 3px 5px;
border-radius: 3px;
line-height: 1;
/*
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
*/
max-width: 100%;
margin-bottom: 3px;
background: rgba(255, 255, 255, 0.1);
}
.no-touch .fc-calendar .fc-row > div > div a:hover {
background: rgba(255, 255, 255, 0.3);
}
@media screen and (max-width: 880px), screen and (max-height: 450px) {
html, body, .container {
height: auto;
}
.custom-header {
height: 100px;
}
.custom-header nav,
.custom-calendar-full,
.fc-calendar-container,
.fc-calendar,
.fc-calendar .fc-head,
.fc-calendar .fc-row > div > span.fc-date {
position: relative;
top: auto;
left: auto;
bottom: auto;
right: auto;
height: auto;
width: auto;
}
.fc-calendar {
margin: 0 20px 20px;
}
.custom-header h2,
.custom-header h3 {
float: none;
width: auto;
text-align: left;
padding-right: 100px;
}
.fc-calendar .fc-row,
.ie9 .fc-calendar .fc-row > div,
.fc-calendar .fc-row > div {
height: auto;
width: 100%;
border: none;
}
.fc-calendar .fc-row > div {
float: none;
min-height: 50px;
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.2) !important;
border-radius: 0px !important;
}
.fc-calendar .fc-row > div:empty {
min-height: 0;
height: 0;
box-shadow: none !important;
padding: 0;
}
.fc-calendar .fc-row {
box-shadow: none;
}
.fc-calendar .fc-head {
display: none;
}
.fc-calendar .fc-row > div > div {
margin-top: 0px;
padding-left: 10px;
max-width: 70%;
display: inline-block;
}
.fc-calendar .fc-row > div.fc-today {
background: rgba(255, 255, 255, 0.2);
}
.fc-calendar .fc-row > div.fc-today:after {
display: none;
}
.fc-calendar .fc-row > div > span.fc-date {
width: 30px;
display: inline-block;
text-align: right;
vertical-align: top;
}
.fc-calendar .fc-row > div > span.fc-weekday {
display: inline-block;
vertical-align: top;
width: 40px;
color: #fff;
color: rgba(255, 255, 255, 0.7);
font-size: 10px;
text-transform: uppercase;
}
}
@media screen and (min-width: 881px) {
.calendar-section, .calendar-section body, .calendar-section .page {
height: 100%;
}
.calendar-section .content {
margin-top: 0;
}
.calendar-section .content {
position: relative;
width: 100%;
height: 100%;
}
}
/*------------------------------------*\
$CSSWIZARDRY-GRIDS
\*------------------------------------*/
/**
* CONTENTS
* INTRODUCTION.........How the grid system works.
* VARIABLES............Your settings.
* MIXINS...............Library mixins.
* GRID SETUP...........Build the grid structure.
* WIDTHS...............Build our responsive widths around our breakpoints.
* PUSH.................Push classes.
* PULL.................Pull classes.
*/
/*------------------------------------*\
$INTRODUCTION
\*------------------------------------*/
/**
* csswizardry grids provides you with widths to suit a number of breakpoints
* designed around devices of a size you specify. Out of the box, csswizardry
* grids caters to the following types of device:
*
* palm -- palm-based devices, like phones and small tablets
* lap -- lap-based devices, like iPads or laptops
* portable -- all of the above
* desk -- stationary devices, like desktop computers
* regular -- any/all types of device
*
* These namespaces are then used in the library to give you the ability to
* manipulate your layouts based around them, for example:
*
*
* This would give you a grid item which is 100% width unless it is on a lap
* device, at which point it become 50% wide, or it is on a desktop device, at
* which point it becomes 33.333% width.
*
* csswizardry grids also has push and pull classes which allow you to nudge
* grid items left and right by a defined amount. These follow the same naming
* convention as above, but are prepended by either `push--` or `pull--`, for
* example:
*
`class="grid__item one-half push--one-half"`
*
* This would give you a grid item which is 50% width and pushed over to the
* right by 50%.
*
* All classes in csswizardry grids follow this patten, so you should fairly
* quickly be able to piece together any combinations you can imagine, for
* example:
*
`class="grid__item one-whole lap--one-half desk--one-third push--desk--one-third"`
*
`class="grid__item one-quarter palm--one-half push--palm--one-half"`
*
`class="grid__item palm--one-third desk--five-twelfths"`
*/
/*------------------------------------*\
$VARIABLES
\*------------------------------------*/
/**
* If you are building a non-responsive site but would still like to use
* csswizardry-grids, set this to ‘false’:
*/
/**
* Is this build mobile first? Setting to ‘true’ means that all grids will be
* 100% width if you do not apply a more specific class to them.
*/
/**
* Set the spacing between your grid items.
*/
/**
* Would you like Sass’ silent classes, or regular CSS classes?
*/
/**
* Would you like push and pull classes enabled?
*/
/**
* Using `inline-block` means that the grid items need their whitespace removing
* in order for them to work correctly. Set the following to true if you are
* going to achieve this by manually removing/commenting out any whitespace in
* your HTML yourself.
*
* Setting this to false invokes a hack which cannot always be guaranteed,
* please see the following for more detail:
*
* github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688
* github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371
*/
/**
* Define your breakpoints. The first value is the prefix that shall be used for
* your classes (e.g. `.palm--one-half`), the second value is the media query
* that the breakpoint fires at.
*/
/**
* Define which namespaced breakpoints you would like to generate for each of
* widths, push and pull. This is handy if you only need pull on, say, desk, or
* you only need a new width breakpoint at mobile sizes. It allows you to only
* compile as much CSS as you need. All are turned on by default, but you can
* add and remove breakpoints at will.
*
* Push and pull shall only be used if `$push` and/or `$pull` and `$responsive`
* have been set to ‘true’.
*/
/**
* You do not need to edit anything from this line onward; csswizardry-grids is
* good to go. Happy griddin’!
*/
/*------------------------------------*\
$MIXINS
\*------------------------------------*/
/**
* These mixins are for the library to use only, you should not need to modify
* them at all.
*
* Enclose a block of code with a media query as named in `$breakpoints`.
*/
/**
* Drop relative positioning into silent classes which can’t take advantage of
* the `[class*="push--"]` and `[class*="pull--"]` selectors.
*/
/*------------------------------------*\
$GRID SETUP
\*------------------------------------*/
/**
* 1. Allow the grid system to be used on lists.
* 2. Remove any margins and paddings that might affect the grid system.
* 3. Apply a negative `margin-left` to negate the columns’ gutters.
*/
.grid {
list-style: none; /* [1] */
margin: 0; /* [2] */
padding: 0; /* [2] */
margin-left: -24px; /* [3] */
}
/**
* 1. Cause columns to stack side-by-side.
* 2. Space columns apart.
* 3. Align columns to the tops of each other.
* 4. Full-width unless told to behave otherwise.
* 5. Required to combine fluid widths and fixed gutters.
*/
.grid__item {
display: inline-block; /* [1] */
padding-left: 24px; /* [2] */
vertical-align: top; /* [3] */
width: 100%; /* [4] */
-webkit-box-sizing: border-box; /* [5] */
-moz-box-sizing: border-box; /* [5] */
box-sizing: border-box; /* [5] */
}
/**
* Reversed grids allow you to structure your source in the opposite order to
* how your rendered layout will appear. Extends `.grid`.
*/
.grid--rev {
direction: rtl;
text-align: left;
}
.grid--rev > .grid__item {
direction: ltr;
text-align: left;
}
/**
* Gutterless grids have all the properties of regular grids, minus any spacing.
* Extends `.grid`.
*/
.grid--full {
margin-left: 0;
}
.grid--full > .grid__item {
padding-left: 0;
}
/**
* Align the entire grid to the right. Extends `.grid`.
*/
.grid--right {
text-align: right;
}
.grid--right > .grid__item {
text-align: left;
}
/**
* Centered grids align grid items centrally without needing to use push or pull
* classes. Extends `.grid`.
*/
.grid--center {
text-align: center;
}
.grid--center > .grid__item {
text-align: left;
}
/**
* Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends
* `.grid`.
*/
.grid--middle > .grid__item {
vertical-align: middle;
}
.grid--bottom > .grid__item {
vertical-align: bottom;
}
/**
* Create grids with narrower gutters. Extends `.grid`.
*/
.grid--narrow {
margin-left: -12px;
}
.grid--narrow > .grid__item {
padding-left: 12px;
}
/**
* Create grids with wider gutters. Extends `.grid`.
*/
.grid--wide {
margin-left: -48px;
}
.grid--wide > .grid__item {
padding-left: 48px;
}
/*------------------------------------*\
$WIDTHS
\*------------------------------------*/
/**
* Create our width classes, prefixed by the specified namespace.
*/
/**
* Our regular, non-responsive width classes.
*/
/**
* Whole
*/
.one-whole {
width: 100%;
}
/**
* Halves
*/
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
width: 50%;
}
/**
* Thirds
*/
.one-third, .two-sixths, .four-twelfths {
width: 33.333%;
}
.two-thirds, .four-sixths, .eight-twelfths {
width: 66.666%;
}
/**
* Quarters
*/
.one-quarter, .two-eighths, .three-twelfths {
width: 25%;
}
.three-quarters, .six-eighths, .nine-twelfths {
width: 75%;
}
/**
* Fifths
*/
.one-fifth, .two-tenths {
width: 20%;
}
.two-fifths, .four-tenths {
width: 40%;
}
.three-fifths, .six-tenths {
width: 60%;
}
.four-fifths, .eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.one-sixth, .two-twelfths {
width: 16.666%;
}
.five-sixths, .ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.one-eighth {
width: 12.5%;
}
.three-eighths {
width: 37.5%;
}
.five-eighths {
width: 62.5%;
}
.seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.one-tenth {
width: 10%;
}
.three-tenths {
width: 30%;
}
.seven-tenths {
width: 70%;
}
.nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.one-twelfth {
width: 8.333%;
}
.five-twelfths {
width: 41.666%;
}
.seven-twelfths {
width: 58.333%;
}
.eleven-twelfths {
width: 91.666%;
}
/**
* Our responsive classes, if we have enabled them.
*/
@media only screen and (max-width: 480px) {
/**
* Whole
*/
.palm--one-whole {
width: 100%;
}
/**
* Halves
*/
.palm--one-half, .palm--six-twelfths, .palm--five-tenths, .palm--four-eighths, .palm--three-sixths, .palm--two-quarters {
width: 50%;
}
/**
* Thirds
*/
.palm--one-third, .palm--four-twelfths, .palm--two-sixths {
width: 33.333%;
}
.palm--two-thirds, .palm--eight-twelfths, .palm--four-sixths {
width: 66.666%;
}
/**
* Quarters
*/
.palm--one-quarter, .palm--three-twelfths, .palm--two-eighths {
width: 25%;
}
.palm--three-quarters, .palm--nine-twelfths, .palm--six-eighths {
width: 75%;
}
/**
* Fifths
*/
.palm--one-fifth, .palm--two-tenths {
width: 20%;
}
.palm--two-fifths, .palm--four-tenths {
width: 40%;
}
.palm--three-fifths, .palm--six-tenths {
width: 60%;
}
.palm--four-fifths, .palm--eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.palm--one-sixth, .palm--two-twelfths {
width: 16.666%;
}
.palm--five-sixths, .palm--ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.palm--one-eighth {
width: 12.5%;
}
.palm--three-eighths {
width: 37.5%;
}
.palm--five-eighths {
width: 62.5%;
}
.palm--seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.palm--one-tenth {
width: 10%;
}
.palm--three-tenths {
width: 30%;
}
.palm--seven-tenths {
width: 70%;
}
.palm--nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.palm--one-twelfth {
width: 8.333%;
}
.palm--five-twelfths {
width: 41.666%;
}
.palm--seven-twelfths {
width: 58.333%;
}
.palm--eleven-twelfths {
width: 91.666%;
}
}
@media only screen and (min-width: 481px) and (max-width: 1023px) {
/**
* Whole
*/
.lap--one-whole {
width: 100%;
}
/**
* Halves
*/
.lap--one-half, .lap--six-twelfths, .lap--five-tenths, .lap--four-eighths, .lap--three-sixths, .lap--two-quarters {
width: 50%;
}
/**
* Thirds
*/
.lap--one-third, .lap--four-twelfths, .lap--two-sixths {
width: 33.333%;
}
.lap--two-thirds, .lap--eight-twelfths, .lap--four-sixths {
width: 66.666%;
}
/**
* Quarters
*/
.lap--one-quarter, .lap--three-twelfths, .lap--two-eighths {
width: 25%;
}
.lap--three-quarters, .lap--nine-twelfths, .lap--six-eighths {
width: 75%;
}
/**
* Fifths
*/
.lap--one-fifth, .lap--two-tenths {
width: 20%;
}
.lap--two-fifths, .lap--four-tenths {
width: 40%;
}
.lap--three-fifths, .lap--six-tenths {
width: 60%;
}
.lap--four-fifths, .lap--eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.lap--one-sixth, .lap--two-twelfths {
width: 16.666%;
}
.lap--five-sixths, .lap--ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.lap--one-eighth {
width: 12.5%;
}
.lap--three-eighths {
width: 37.5%;
}
.lap--five-eighths {
width: 62.5%;
}
.lap--seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.lap--one-tenth {
width: 10%;
}
.lap--three-tenths {
width: 30%;
}
.lap--seven-tenths {
width: 70%;
}
.lap--nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.lap--one-twelfth {
width: 8.333%;
}
.lap--five-twelfths {
width: 41.666%;
}
.lap--seven-twelfths {
width: 58.333%;
}
.lap--eleven-twelfths {
width: 91.666%;
}
}
@media only screen and (max-width: 1023px) {
/**
* Whole
*/
.portable--one-whole {
width: 100%;
}
/**
* Halves
*/
.portable--one-half, .portable--six-twelfths, .portable--five-tenths, .portable--four-eighths, .portable--three-sixths, .portable--two-quarters {
width: 50%;
}
/**
* Thirds
*/
.portable--one-third, .portable--four-twelfths, .portable--two-sixths {
width: 33.333%;
}
.portable--two-thirds, .portable--eight-twelfths, .portable--four-sixths {
width: 66.666%;
}
/**
* Quarters
*/
.portable--one-quarter, .portable--three-twelfths, .portable--two-eighths {
width: 25%;
}
.portable--three-quarters, .portable--nine-twelfths, .portable--six-eighths {
width: 75%;
}
/**
* Fifths
*/
.portable--one-fifth, .portable--two-tenths {
width: 20%;
}
.portable--two-fifths, .portable--four-tenths {
width: 40%;
}
.portable--three-fifths, .portable--six-tenths {
width: 60%;
}
.portable--four-fifths, .portable--eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.portable--one-sixth, .portable--two-twelfths {
width: 16.666%;
}
.portable--five-sixths, .portable--ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.portable--one-eighth {
width: 12.5%;
}
.portable--three-eighths {
width: 37.5%;
}
.portable--five-eighths {
width: 62.5%;
}
.portable--seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.portable--one-tenth {
width: 10%;
}
.portable--three-tenths {
width: 30%;
}
.portable--seven-tenths {
width: 70%;
}
.portable--nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.portable--one-twelfth {
width: 8.333%;
}
.portable--five-twelfths {
width: 41.666%;
}
.portable--seven-twelfths {
width: 58.333%;
}
.portable--eleven-twelfths {
width: 91.666%;
}
}
@media only screen and (min-width: 1024px) {
/**
* Whole
*/
.desk--one-whole {
width: 100%;
}
/**
* Halves
*/
.desk--one-half, .desk--six-twelfths, .desk--five-tenths, .desk--four-eighths, .desk--three-sixths, .desk--two-quarters {
width: 50%;
}
/**
* Thirds
*/
.desk--one-third, .desk--four-twelfths, .desk--two-sixths {
width: 33.333%;
}
.desk--two-thirds, .desk--eight-twelfths, .desk--four-sixths {
width: 66.666%;
}
/**
* Quarters
*/
.desk--one-quarter, .desk--three-twelfths, .desk--two-eighths {
width: 25%;
}
.desk--three-quarters, .desk--nine-twelfths, .desk--six-eighths {
width: 75%;
}
/**
* Fifths
*/
.desk--one-fifth, .desk--two-tenths {
width: 20%;
}
.desk--two-fifths, .desk--four-tenths {
width: 40%;
}
.desk--three-fifths, .desk--six-tenths {
width: 60%;
}
.desk--four-fifths, .desk--eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.desk--one-sixth, .desk--two-twelfths {
width: 16.666%;
}
.desk--five-sixths, .desk--ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.desk--one-eighth {
width: 12.5%;
}
.desk--three-eighths {
width: 37.5%;
}
.desk--five-eighths {
width: 62.5%;
}
.desk--seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.desk--one-tenth {
width: 10%;
}
.desk--three-tenths {
width: 30%;
}
.desk--seven-tenths {
width: 70%;
}
.desk--nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.desk--one-twelfth {
width: 8.333%;
}
.desk--five-twelfths {
width: 41.666%;
}
.desk--seven-twelfths {
width: 58.333%;
}
.desk--eleven-twelfths {
width: 91.666%;
}
}
/*------------------------------------*\
$PUSH
\*------------------------------------*/
/**
* Push classes, to move grid items over to the right by certain amounts.
*/
/*------------------------------------*\
$PULL
\*------------------------------------*/
/**
* Pull classes, to move grid items back to the left by certain amounts.
*/
html {
height: 100%;
}
body {
font: 17px "karmina-sans", "Karmina Sans", "karmina-sans-1", "karmina-sans-2", "Helvetica Neue", Helvetica, sans-serif;
line-height: 21px;
color: #0F2228;
font-weight: 400;
margin: 0 auto;
overflow-x: hidden;
background: #1994cd;
}
.wrapper {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.wrapper--half {
padding: 10px;
}
.wrapper.wrapper--full {
padding: 0;
}
.note.note--availability, .note.note--cta, .note.note--strong, .content .important-dates, .content .offering-block {
background: #f8fdff;
border: 2px solid #f88010;
padding: 10px;
font-size: 16px;
font-size: 0.9411764706rem;
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px;
-moz-background-clip: padding-box;
-moz-border-radius: 4px;
border-radius: 4px;
background-clip: padding-box;
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2);
}
#starter {
display: none;
}
h1, .alpha {
font: 700 1.9em/1 "karmina-sans", "Karmina Sans", "karmina-sans-1", "karmina-sans-2", "Helvetica Neue", Georgia, serif;
color: #01567d;
margin-bottom: 5px;
}
.headline {
font-size: 28px;
font-size: 1.6470588235rem;
font-weight: 800;
margin-bottom: 10px;
}
.headline--with-icon .icon:before {
font-size: 18px;
font-size: 1.0588235294rem;
vertical-align: 3px;
}
.headline--with-icon em {
font-weight: normal;
}
.alpha-subhead {
font-weight: 300;
}
h2, .beta {
font: 700 1.6em/1.1 "karmina-sans", "Karmina Sans", "karmina-sans-1", "karmina-sans-2", "Helvetica Neue", Georgia, serif;
text-transform: none;
margin-bottom: 0;
color: #01567d;
}
h3, .gamma {
font-weight: 600;
font-size: 1.2em;
line-height: 1.1;
color: #01567d;
}
h4, .delta {
font-size: 22px;
font-size: 1.2941176471rem;
font-weight: 800;
line-height: 1.1;
text-transform: none;
color: #0F2228;
}
h5, .epsilon {
font-size: 20px;
font-size: 1.1764705882rem;
font-weight: 400;
line-height: 1.1;
text-transform: none;
color: #01567d;
}
h6, .zeta {
font-size: 17px;
font-size: 1rem;
font-weight: 600;
line-height: 1.1;
color: #40b2e6;
}
a {
color: #1994cd;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-ms-transition: color 0.2s;
transition: color 0.2s;
text-decoration: none;
}
a:hover, a:focus, a:active {
color: #0a3b52;
}
.link {
text-decoration: underline;
font-weight: 600;
color: #f88010;
}
.link:hover {
color: #1994cd;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ul, ol {
list-style: none;
margin: 0;
padding: 0;
}
p {
margin-bottom: 0;
}
sup {
top: -0.4em;
left: 0.07em;
}
.expose, .hide-wide {
display: none;
font-style: normal;
}
hr {
margin: 40px 0;
border: 0;
height: 0;
border-top: 1px dashed rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
fieldset {
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px;
-moz-background-clip: padding-box;
-moz-border-radius: 4px;
border-radius: 4px;
background-clip: padding-box;
background: #f4fdff;
border-color: #40b2e6;
}
legend {
background: #9be9ff;
border: 1px solid #9be9ff;
padding: 5px 10px;
}
label {
text-align: left;
font-size: 15px;
font-size: 0.8823529412rem;
font-weight: 600;
color: #0F2228;
}
hr {
margin: 30px 0;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #FFF;
background-image: none;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.form-control:focus {
border-color: #66AFE9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.under {
text-decoration: underline;
}
.push--top-hard {
margin-top: 40px !important;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
/* ===============================================================
* __ _ __ _ __ __ __
* ____ ___ ____ / /_ (_)/ /___ _ __ (_)____/ // /_ / /_
* / __ `__ \ / __ \ / __ \ / // // _ \ | | /| / // // __ // __// __ \
* / / / / / // /_/ // /_/ // // // __/ | |/ |/ // // /_/ // /_ / / / /
* /_/ /_/ /_/ \____//_.___//_//_/ \___/ |__/|__//_/ \__,_/ \__//_/ /_/
*
* ===============================================================*/
.site-nav a {
color: #fff;
}
.page {
background: #fff;
}
.openNav {
background: #1994cd;
}
#page-cover.show {
background: rgba(0, 0, 0, 0.6);
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
}
.openNav .site-nav .menu {
z-index: 12;
}
/* Move nav off screen, setup transitions */
.site-nav {
width: 70%;
position: absolute;
left: -70%;
top: -54px;
height: 100%;
background: #126890;
color: #fff;
}
/* Display nav items vertically */
a.close-panel, .menu a {
display: block;
background: #036797;
padding: 10px 20px;
color: #fff;
border-top: 1px solid #3082aa;
border-bottom: 1px solid #025279;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
-ms-transition: background 0.2s;
transition: background 0.2s;
}
.menu {
display: block;
margin: 0;
}
.menu li {
float: none;
width: 100%;
text-align: left;
padding: 0;
display: block;
}
.menu li.active a {
font-weight: 700;
background: #037cb5;
padding-left: 20px;
}
.menu li.active a:before {
font-family: FontAwesome;
content: "\f00c";
margin-right: 5px;
}
.menu a:hover {
background: #0372a6;
}
/* Reveal open/close buttons */
a.open-panel {
display: inline-block;
}
a.close-panel {
padding: 20px;
font-weight: 600;
background: #025279;
}
a.close-panel:hover {
background: #036797;
}
a.close-panel .icon {
margin-right: 5px;
}
.openNav .page {
left: 0;
-webkit-transform: translate3d(70%, 0, 0);
-moz-transform: translate3d(70%, 0, 0);
-ms-transform: translate3d(70%, 0, 0);
-o-transform: translate3d(70%, 0, 0);
transform: translate3d(70%, 0, 0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}
/* When the panel is closed, transition the page back to the left */
.page {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}
/*=================================
PAGE TOPPER
===================================*/
.page-topper {
background: #daf7ff;
border-bottom: 3px solid #afeeff;
}
.top-half {
display: block;
}
.top-half .item {
padding: 10px;
}
.extra--info {
display: none;
}
.location {
float: left;
width: 50%;
line-height: 1;
}
.location-info {
background: #9be9ff;
float: right;
width: 50%;
text-align: center;
border-bottom: 3px solid #3fd6ff;
margin-bottom: -3px;
padding: 10px 10px 4px;
}
.location-info .btn, .location-info .btn--biggie {
display: inline-block;
width: 50%;
text-align: center;
margin: 4px 2px;
}
.location-info .btn .icon, .location-info .btn--biggie .icon {
opacity: 0.8;
}
.btn.btn--change-location, .btn--change-location.btn--biggie {
width: 40%;
}
.location__title {
margin: 0;
font-size: 15px;
font-size: 0.8823529412rem;
}
.location__address {
margin: 0;
font-size: 14px;
font-size: 0.8235294118rem;
}
/*==HEADER================================
_ _ ____ ____ ___ ____ ____
|__| |___ |__| | \ |___ |__/
| | |___ | | |__/ |___ | \
========================================*/
.brand {
margin: 0 auto;
display: block;
width: 50%;
float: left;
padding-left: 10px;
}
.brand__logo {
max-width: 45px;
display: inline-block;
vertical-align: middle;
-webkit-filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.22));
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=4, Color='#444')";
}
.brand__name {
display: inline-block;
text-transform: uppercase;
line-height: 0.9;
font-size: 15px;
font-size: 0.8823529412rem;
text-align: left;
font-weight: 700;
width: 60%;
vertical-align: middle;
}
.brand__name em {
font-style: normal;
}
.mobile-nav {
display: inline-block;
float: right;
vertical-align: middle;
margin-top: 10px;
}
.open-panel .icon {
color: #9be9ff;
font-size: 14px;
font-size: 0.8235294118rem;
}
.page-head--masthead.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
/*==HERO==================================
_ _ ____ ____ ____
|__| |___ |__/ | |
| | |___ | \ |__|
========================================*/
.slides__image {
z-index: 1;
margin: 0 auto;
}
.slides__content {
z-index: 2;
text-align: center;
display: block;
background: #daf7ff;
margin-bottom: 5px;
padding-bottom: 10px;
border-bottom: 3px solid #afeeff;
}
.slides__content p {
padding: 5px 0;
}
.slides__content h2 {
padding-top: 10px;
}
/*=================================
COLUMNS
=================================*/
.col {
border-bottom: 2px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 40px;
}
.col p {
font-size: 16px;
font-size: 0.9411764706rem;
line-height: 1.2;
margin-bottom: 20px;
}
.col .class-details {
margin-bottom: 0;
}
.col .class-details em {
display: block;
}
.col .dates-location {
margin-bottom: 10px;
font-size: 22px;
font-size: 1.2941176471rem;
}
.col .dates-location .btn--change-location {
font-weight: normal;
font-size: 18px;
font-size: 1.0588235294rem;
text-decoration: underline;
margin-left: 5px;
}
.col .subhead {
background: #68dfff;
margin-left: -20px;
padding: 8px 20px;
text-transform: uppercase;
font-size: 16px;
font-size: 0.9411764706rem;
font-weight: 800;
box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
display: inline-block;
margin-bottom: 10px;
}
.col .col-content {
padding: 5px 10px;
}
.term-dates {
color: #0F2228;
font-weight: 800;
font-size: 20px;
font-size: 1.1764705882rem;
}
.term-links {
margin-bottom: 20px;
}
.term-links__link {
margin: 5px 0 10px;
}
.calendar-dates {
margin-bottom: 10px;
font-size: 18px;
font-size: 1.0588235294rem;
line-height: 1.4;
}
.calendar-dates span {
margin: 0 4px;
}
.calendar-dates .icon {
margin: 0 5px;
opacity: 0.6;
}
.date {
color: #013a55;
}
.quick-links {
margin-top: 10px;
}
.quick-links .btn, .quick-links .btn--biggie {
margin-bottom: 10px;
}
.quick-links .btn:hover, .quick-links .btn--biggie:hover {
font-weight: 700;
}
.service-offerings .media__body {
margin-bottom: 5px;
}
.service-offerings .media.parties {
border-bottom: 0;
}
.service-offerings .btn, .service-offerings .btn--biggie {
margin: 5px 0;
}
.service-title {
font-size: 28px;
font-size: 1.6470588235rem;
margin-bottom: 5px;
}
.media__image-anchor {
width: 20%;
margin-right: 10px;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.media__image-anchor:hover {
opacity: 0.8;
}
.btn--more_info {
font-size: 15px;
font-size: 0.8823529412rem;
padding: 10px 20px;
display: inline-block;
width: auto;
}
.classes .service-title a {
color: #40b2e6;
}
.classes .service-title a:hover {
color: #1c9cd7;
}
.classes .btn, .classes .btn--biggie {
background-color: #40b2e6;
box-shadow: 0px 2px 0px rgba(25, 140, 192, 0.9);
}
.classes .btn:hover, .classes .btn--biggie:hover {
background-color: #1c9cd7;
box-shadow: 0px 3px 0px rgba(16, 91, 125, 0.9);
}
.pno .service-title a {
color: #92de00;
}
.pno .service-title a:hover {
color: #70ab00;
}
.pno .btn, .pno .btn--biggie {
background-color: #92de00;
box-shadow: 0px 2px 0px rgba(96, 146, 0, 0.9);
}
.pno .btn:hover, .pno .btn--biggie:hover {
background-color: #70ab00;
box-shadow: 0px 3px 0px rgba(45, 69, 0, 0.9);
}
.camps .service-title a {
color: #00dbb5;
}
.camps .service-title a:hover {
color: #00a88b;
}
.camps .btn, .camps .btn--biggie {
background-color: #00dbb5;
box-shadow: 0px 2px 0px rgba(0, 143, 118, 0.9);
}
.camps .btn:hover, .camps .btn--biggie:hover {
background-color: #00a88b;
box-shadow: 0px 3px 0px rgba(0, 66, 55, 0.9);
}
.parties .service-title a {
color: #b24dd9;
}
.parties .service-title a:hover {
color: #9c2bc8;
}
.parties .btn, .parties .btn--biggie {
background-color: #b24dd9;
box-shadow: 0px 2px 0px rgba(140, 38, 179, 0.9);
}
.parties .btn:hover, .parties .btn--biggie:hover {
background-color: #9c2bc8;
box-shadow: 0px 3px 0px rgba(91, 25, 116, 0.9);
}
/*=================================
INTERIOR CONTENT
=================================*/
.content p {
line-height: 1.3;
font-weight: 300;
margin-bottom: 20px;
}
.content .subhead {
line-height: 1;
font-weight: 300;
color: #40b2e6;
margin: 5px 0;
}
.content .important-dates, .content .offering-block {
padding-top: 20px;
}
.content .important-dates h2, .content .offering-block h2 {
font-weight: 800;
}
.content .col {
padding-bottom: 0;
display: block;
padding-bottom: 20px;
margin-bottom: 20px;
}
.content .col:last-of-type {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.content .not-offered {
margin-bottom: 0;
font-style: italic;
color: #1994cd;
font-weight: 600;
}
.offering-block .col {
display: block;
padding-bottom: 20px;
}
.offering-block .col:last-of-type {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
.highlight {
color: #f88010;
}
.inner-hero img {
display: block;
}
.header-note {
position: relative;
text-align: center;
}
.header-note h3 {
background: #daf7ff;
padding: 10px;
font-size: 18px;
font-size: 1.0588235294rem;
}
.header-note em {
font-weight: 300;
}
.inter-headline {
font-size: 24px;
font-size: 1.4117647059rem;
text-align: center;
margin: 20px auto 26px auto;
font-weight: 300;
padding: 20px 0;
background: #fff;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
border: solid #f88010;
border-width: 1px 0;
position: relative;
}
.inter-headline:before {
content: "";
background: white;
width: 10px;
height: 100%;
position: absolute;
top: 0;
left: -10px;
}
.inter-headline:after {
content: "";
background: white;
width: 10px;
height: 100%;
position: absolute;
top: 0;
right: -10px;
}
.inter-headline em {
display: block;
font-size: 20px;
font-size: 1.1764705882rem;
line-height: 1.4;
margin-top: 5px;
}
.bulleted-list {
margin: 5px 0 0 20px;
}
.bulleted-list li {
position: relative;
margin-bottom: 10px;
}
.bulleted-list li:before {
content: url("/images/star.svg");
color: #000;
display: inline-block;
left: -16px;
position: absolute;
height: 12px;
width: 12px;
padding: 0;
}
/*==========================
SUBNAV DROPDOWNS
===========================*/
/* interior page dropdown menu (subnav) */
.subnav-ddmenu {
display: block;
padding: 10px 20px;
width: 100%;
margin: 0 auto;
position: relative;
cursor: pointer;
line-height: 1;
background: #daf7ff;
background: rgba(248, 128, 16, 0.7);
border: 2px solid #f88010;
border-width: 2px 0;
color: #fff;
font-weight: normal;
z-index: 2;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-ms-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.subnav-ddmenu:hover {
background: rgba(249, 106, 13, 0.73);
}
.subnav-ddmenu.open {
background: #f88010;
color: #fff;
}
.subnav-ddmenu.open .icon.icon-left:before {
content: "\f00d";
}
.subnav-ddmenu.open .icon.icon-right:before {
content: "\f106";
}
.subnav-ddmenu ul {
position: absolute;
top: 100%;
left: 0; /* move content -4px because of container left border */
width: 100%;
padding: 0;
display: none;
background: #fff;
-webkit-box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.subnav-ddmenu li {
font-size: 0.9em;
}
.subnav-ddmenu a {
-webkit-transition: all, 0.2s;
-moz-transition: all, 0.2s;
-ms-transition: all, 0.2s;
transition: all, 0.2s;
text-decoration: none;
display: block;
color: #f88010;
padding: 20px;
border-bottom: 1px solid #e0e0e0;
}
.subnav-ddmenu a:hover {
background: rgba(248, 128, 16, 0.1);
}
/*==========================
FAQS
===========================*/
.faqs {
margin-top: 20px;
width: 90%;
}
.question {
cursor: pointer;
padding: 5px 0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
position: relative;
}
.question:before {
font-family: FontAwesome;
content: "\f067";
margin-right: 5px;
}
.question:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.question:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.question.expanded {
color: #f88010;
}
.question.expanded:before {
font-family: FontAwesome;
content: "\f068";
margin-right: 5px;
}
.answer {
padding: 10px 0;
}
.answer b {
font-weight: 600;
}
.gallery li {
display: inline-block;
width: 30%;
margin: 5px 1% 0 5px;
}
.gallery li:nth-child(3n+3) {
margin-right: 0;
}
.gallery a {
display: block;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
-ms-transition: all 0.35s;
transition: all 0.35s;
border: 3px solid #fff;
}
.gallery a:hover {
opacity: 0.8;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.5);
border: 9px solid #1994cd;
-webkit-background-clip: padding-box;
-webkit-border-radius: 6px;
-moz-background-clip: padding-box;
-moz-border-radius: 6px;
border-radius: 6px;
background-clip: padding-box;
}
.gallery img {
display: block;
}
/*==========================
CLASS LIST
===========================*/
.class-list img {
-webkit-transition: all, 0.3s;
-moz-transition: all, 0.3s;
-ms-transition: all, 0.3s;
transition: all, 0.3s;
}
.class-list h3 {
-webkit-transition: color, 0.2s;
-moz-transition: color, 0.2s;
-ms-transition: color, 0.2s;
transition: color, 0.2s;
font-weight: 700;
text-decoration: underline;
}
.class-list a {
display: block;
position: relative;
}
.class-list a:hover img {
opacity: 0.6;
}
.class-list a:hover h3 {
color: #40b2e6;
}
.class-list p {
margin: 0;
}
.class-list li {
display: block;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #def2fb;
overflow: hidden;
}
.class-list li:last-child {
border-bottom: 0;
}
ul.tabs {
overflow: hidden;
margin-top: 20px;
}
ul.tabs li {
background: none;
color: #222;
display: block;
float: left;
width: 50%;
padding: 10px 15px;
cursor: pointer;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
-ms-transition: background 0.2s;
transition: background 0.2s;
}
ul.tabs li:hover {
background: rgba(218, 247, 255, 0.5);
}
ul.tabs li em {
display: block;
}
ul.tabs li.current {
background: #daf7ff;
border: 1px solid #40b2e6;
border-bottom: 0;
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px 4px 0 0;
-moz-background-clip: padding-box;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
background-clip: padding-box;
color: #222;
position: relative;
z-index: 2;
}
.tab-content {
position: relative;
top: -1px;
border: 1px solid #40b2e6;
display: none;
background: #daf7ff;
padding: 15px;
margin-bottom: 20px;
z-index: 1;
-webkit-background-clip: padding-box;
-webkit-border-radius: 0 0 4px 4px;
-moz-background-clip: padding-box;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
background-clip: padding-box;
}
.tab-content p {
margin-bottom: 0;
}
.tab-content.current {
display: inherit;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.toggle-list {
overflow: hidden;
}
.toggle-list li {
display: block;
float: left;
width: 49%;
}
.toggle-list .toggle {
display: block;
text-align: center;
border: 1px solid #1994cd;
-webkit-background-clip: padding-box;
-webkit-border-radius: 0 4px 4px 0;
-moz-background-clip: padding-box;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
background-clip: padding-box;
padding: 5px 0;
}
.toggle-list :first-child a {
border-right: 0;
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px 0 0 4px;
-moz-background-clip: padding-box;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
background-clip: padding-box;
}
.toggle-list .active {
background: #1994cd;
color: #fff;
}
#contactform [colspan] {
text-align: left;
}
#directions .form-control {
margin-bottom: 10px;
}
/*=================================
JOBS
=================================*/
.opening {
margin-bottom: 20px;
}
.opening p {
margin-bottom: 0;
}
.form-table td, .form-table tr, .form-table td[colspan], .form-table [colspan] {
text-align: left;
}
.form-table input[type=radio], .form-table input[type=checkbox] {
margin-right: 4px;
}
/*=================================
FOOTER
=================================*/
.site-footer {
background: #037cb5;
color: #fff;
border-top: 6px solid #daf7ff;
}
.site-footer .wrapper {
border-top: 1px solid #3094c2;
border-bottom: 1px solid #026391;
}
.site-footer .wrapper:first-of-type {
border-top: 0;
}
.site-footer .wrapper:last-of-type {
border-bottom: 0;
}
.site-footer .copy {
padding-left: 20px;
}
.gym-links {
margin-left: 20px;
width: 90%;
}
.gym-links .btn, .gym-links .btn--biggie {
margin: 10px 0;
font-size: 20px;
font-size: 1.1764705882rem;
}
.footer-brand {
margin: 0 auto;
float: none;
}
.footer-brand a {
color: #fff;
display: block;
text-align: center;
z-index: 1;
position: relative;
-webkit-transition: opacity, 0.2s;
-moz-transition: opacity, 0.2s;
-ms-transition: opacity, 0.2s;
transition: opacity, 0.2s;
}
.footer-brand a:hover {
opacity: 0.85;
}
.footer-brand .footer-brand__logo {
max-width: 60px;
display: inline-block;
vertical-align: middle;
}
.footer-brand .footer-brand__name {
width: 50%;
text-align: left;
font-size: 0.8em;
display: inline-block;
vertical-align: middle;
}
.footer-brand .footer-brand__name em {
font-style: normal;
}
.social-links {
text-align: center;
margin: 20px -20px -20px -20px;
padding-bottom: 10px;
padding-top: 10px;
border-top: 1px solid #3094c2;
position: relative;
}
.social-links:before {
content: "";
height: 1px;
top: -2px;
position: absolute;
left: 0;
width: 100%;
border-top: 1px solid #026391;
}
.social-links li {
display: inline-block;
margin: 0 4px;
}
.social-links .social-links__label {
color: transparent;
font-size: 0;
line-height: 0;
height: 0;
display: none;
}
.social-link {
display: block;
}
.social-icon {
display: block;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-ms-transition: color 0.2s;
transition: color 0.2s;
color: #fff;
}
.social-icon:before {
-webkit-filter: drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.22));
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=4, Color='#444')";
font-size: 60px;
font-size: 3.5294117647rem;
}
.social-icon:hover {
color: #afeeff;
}
.copy-block .headline {
text-transform: uppercase;
color: #fff;
background: rgba(255, 255, 255, 0.1);
padding: 5px 10px;
display: inline-block;
}
.copy-block p {
margin-bottom: 10px;
}
.gym-info h3 {
color: #fff;
}
.gym-info p {
margin-bottom: 0;
}
.gym-links {
margin-top: 10px;
}
.footer-nav a {
display: block;
background: #036797;
padding: 10px 20px;
color: #fff;
border-top: 1px solid #3082aa;
border-bottom: 1px solid #025279;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
-ms-transition: background 0.2s;
transition: background 0.2s;
}
.footer-nav a:hover {
background: #0372a6;
}
.footer-nav li:first-of-type a {
border-top: 0;
}
.footer-nav li:last-of-type a {
border-bottom: 0;
}
.copyright {
font-size: 14px;
font-size: 0.8235294118rem;
padding: 20px;
font-style: italic;
}
/* appendaround */
.footer-nav-location-default {
display: block;
}
.footer-nav-destination {
display: none;
}
/*=================================
MISC
=================================*/
.note {
font-style: italic;
font-weight: 300;
font-size: 18px;
font-size: 1.0588235294rem;
margin-bottom: 20px;
}
.note.note--availability, .note.note--cta, .note.note--strong {
font-size: 18px;
font-size: 1.0588235294rem;
}
.note.note--availability p, .note.note--cta p, .note.note--strong p {
line-height: 1.2;
margin-bottom: 10px;
}
.note.note--availability p:last-of-type, .note.note--cta p:last-of-type, .note.note--strong p:last-of-type {
margin-bottom: 0;
}
.note.note--cta {
font-size: 22px;
font-size: 1.2941176471rem;
}
.note.note--strong {
background: rgba(248, 128, 16, 0.05);
border-color: #f88010;
}
.note.note--alt {
background: rgba(3, 124, 181, 0.1);
border-color: #037cb5;
}
.note-simple {
color: #1994cd;
}
.b2t {
margin-bottom: 20px;
margin-top: -5px;
}
.b2t:before {
font-family: FontAwesome;
content: "\f062";
margin-right: 5px;
}
.parties-section .party-types .col p {
margin-bottom: 0;
}
.headline-icon {
font-weight: 800;
font-size: 24px;
font-size: 1.4117647059rem;
color: #1994cd;
vertical-align: top;
}
.table {
background: rgba(218, 247, 255, 0.4);
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px;
-moz-background-clip: padding-box;
-moz-border-radius: 4px;
border-radius: 4px;
background-clip: padding-box;
overflow: hidden;
}
.table--striped tbody tr:nth-of-type(odd) {
background-color: #daf7ff; /* Override this color in your theme stylesheet */
}
.fa span {
display: none;
}
.payment-options {
color: #1994cd;
}
.payment-options li {
vertical-align: middle;
}
.wizard input[type=radio], .wizard input[type=checkbox] {
margin-right: 3px;
}
.wizard label {
margin: 15px 0 25px;
font-size: 18px;
font-size: 1.0588235294rem;
}
.wizard .btn, .wizard .btn--biggie {
margin: 20px 0 10px;
}
.wizard h4 {
margin-bottom: 10px;
}
.short-answer {
border: 2px solid #f88010;
background: #fff;
padding: 10px 20px;
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px;
-moz-background-clip: padding-box;
-moz-border-radius: 4px;
border-radius: 4px;
background-clip: padding-box;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}
.meter {
position: relative;
width: 250px;
height: 25px;
border: 1px solid #b0b0b0;
margin-bottom: 10px;
/* viewing purposes */
/* viewing purposes */
background: #fff;
-webkit-box-shadow: inset 0 3px 5px 0 #d3d0d0;
-moz-box-shadow: inset 0 3px 5px 0 #d3d0d0;
box-shadow: inset 0 3px 5px 0 #d3d0d0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.meter span {
display: block;
height: 100%;
animation: grower 1s linear;
-moz-animation: grower 1s linear;
-webkit-animation: grower 1s linear;
-o-animation: grower 1s linear;
position: relative;
top: 0px;
left: -1px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
border: 1px solid #3c84ad;
background: #6eb2d1;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-background-size: 45px 45px;
-moz-background-size: 45px 45px;
-o-background-size: 45px 45px;
background-size: 45px 45px;
}
.meter span:before {
content: "";
display: block;
width: 100%;
height: 50%;
position: relative;
top: 50%;
background: rgba(0, 0, 0, 0.03);
}
.meter p {
position: absolute;
top: 0;
margin: 0 10px;
line-height: 23px;
font-weight: bold;
-webkit-font-smoothing: antialised;
font-size: 15px;
color: #333;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}
/* JUNK
http://www.jordanm.co.uk/contentchoreographydemo
@media screen and (max-width: 33.236em) {
.site-footer {
background: red;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-ms-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
}
.site-footer .wrapper-nav-wrapper {
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
display: block;
outline:1px solid red;
}
.site-footer .wrapper-wrapper {
display: block;
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
}
*/
.fancybox-overlay .btn--set-location {
color: #fff;
box-shadow: 0px 3px 0px rgba(192, 96, 6, 0.9);
background: #f88010;
position: relative;
font-size: 1em;
padding: 12px;
border-radius: 8px;
display: inline-block;
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
border: 0;
display: block;
width: 100%;
overflow: hidden;
text-decoration: none;
font-weight: 200;
text-align: center;
}
.fancybox-overlay .choose-location ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.fancybox-overlay .choose-location li {
margin-bottom: 20px;
}
.fancybox-overlay h1 {
font-size: 24px;
font-size: 1.4117647059rem;
}
.fancybox-overlay h2 {
font-weight: 300;
font-size: 20px;
font-size: 1.1764705882rem;
margin: 10px 20px;
}
.fancybox-overlay .btn--set-location:hover {
background: #f99940;
}
.fancybox-overlay .btn--set-location em {
display: block;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 1em;
font-style: normal;
font-weight: 600;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.fancybox-overlay .btn--set-location h3 {
margin: 0;
font-size: 2.2em;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}
.fancybox-overlay .location {
display: block;
width: 100%;
}
.fancybox-overlay .fancybox-opened .fancybox-skin {
padding: 14px !important;
}
@media screen and (min-width: 26em) {
/**
*
___ _____
|__ \ / ___/___ ____ ___
__/ // __ \/ _ \/ __ `__ \
/ __// /_/ / __/ / / / / /
/____/\____/\___/_/ /_/ /_/
* ========= 416px ======================================================*/
.brand {
width: 60%;
}
.brand__name {
width: 70%;
font-size: 16px;
font-size: 0.9411764706rem;
margin-left: 5px;
margin-top: 5px;
}
}
@media screen and (min-width: 29em) {
/**
*
___ ____
|__ \/ __ \___ ____ ___
__/ / /_/ / _ \/ __ `__ \
/ __/\__, / __/ / / / / /
/____/____/\___/_/ /_/ /_/
* ========= 464px ======================================================*/
.links li, .term-links li {
width: 47%;
display: inline-block;
margin: 0 1%;
}
.term-links li:last-of-type {
width: 97%;
}
.content .important-dates {
padding: 20px;
}
.expose.expose29 {
display: inline-block;
}
}
@media screen and (min-width: 34em) {
/**
_____ __ __
|__ // // / ___ ____ ___
/_