*
* 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.
*/
/**
* 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.
*/
/**
* Reversed grids allow you to structure your source in the opposite order to
* how your rendered layout will appear. Extends `.grid`.
*/
/**
* Gutterless grids have all the properties of regular grids, minus any spacing.
* Extends `.grid`.
*/
/**
* Align the entire grid to the right. Extends `.grid`.
*/
/**
* Centered grids align grid items centrally without needing to use push or pull
* classes. Extends `.grid`.
*/
/**
* Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends
* `.grid`.
*/
/**
* Create grids with narrower gutters. Extends `.grid`.
*/
/**
* Create grids with wider gutters. Extends `.grid`.
*/
/*------------------------------------*\
$WIDTHS
\*------------------------------------*/
/**
* Create our width classes, prefixed by the specified namespace.
*/
/**
* Our regular, non-responsive width classes.
*/
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/
/**
* Our responsive classes, if we have enabled them.
*/
@media only screen and (max-width: 568px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/ }
@media only screen and (min-width: 569px) and (max-width: 1023px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/ }
@media only screen and (max-width: 1023px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/ }
@media only screen and (min-width: 1024px) {
/**
* Whole
*/
/**
* Halves
*/
/**
* Thirds
*/
.template--two-column .template__section:last-child,
.template--two-column-left .template__section:last-child, .template--two-column-reverse .template__section:first-child, .template--two-column-right .template__section:last-child {
width: 33.333%; }
.template--two-column .template__section:first-child,
.template--two-column-left .template__section:first-child, .template--two-column-reverse .template__section:last-child, .template--two-column-right .template__section:first-child {
width: 66.666%; }
/**
* Quarters
*/
/**
* Fifths
*/
/**
* Sixths
*/
/**
* Eighths
*/
/**
* Tenths
*/
/**
* Twelfths
*/ }
/*------------------------------------*\
$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.
*/
/*------------------------------------*\
#SITE
\*------------------------------------*/
.site.js body {
visibility: hidden; }
.site.js.site--loaded body {
visibility: visible;
opacity: 0; }
.site__page {
margin: 0 auto;
position: relative; }
/*
Container with max width
*/
.site__container, .site__head .content, .site__body > .content, .site__foot > .content {
margin-left: auto;
margin-right: auto;
max-width: 1100px; }
/*
Lazy Images
*/
.site__lazy-image {
background: #D84A29;
-webkit-transition: background 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: background 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
.site__lazy-image img {
visibility: hidden; }
.site__lazy-image.site__loaded {
background: #D84A29; }
.site__lazy-image.site__loaded img {
visibility: visible; }
/*------------------------------------*\
#TEMPLATE
\*------------------------------------*/
/**
* TWO COLUMN TEMPLATE (left)
* First section is the larger column (and semantically primary)
*
*/
.template--two-column .template__section,
.template--two-column-left .template__section {
float: left; }
/**
* TWO COLUMN TEMPLATE (reverse)
* Second section is the larger column
*/
.template--two-column-reverse .template__section {
float: left; }
/**
* TWO COLUMN TEMPLATE (right)
* Sidebar content appears on the left, but semantically comes after the main content
*/
.template--two-column-right .template__section {
float: right; }
/*------------------------------------*\
#BUTTONS
\*------------------------------------*/
/**
* Base button styles
*/
.btn {
display: inline-block;
vertical-align: middle;
font: inherit;
text-align: center;
border: none;
margin: 0;
cursor: pointer;
padding: 0; }
.btn, .btn:hover {
text-decoration: none; }
.btn:active, .btn:focus {
outline: none; }
/*------------------------------------*\
#NAV
\*------------------------------------*/
.nav {
list-style: none;
margin-left: 0;
margin-bottom: 0; }
.nav > li,
.nav > li > a {
display: inline-block;
*display: inline;
zoom: 1; }
.nav--stacked > li {
display: list-item; }
.nav--stacked > li > a {
display: block; }
.nav--banner {
text-align: center; }
/*------------------------------------*\
#BLOCK-LIST
\*------------------------------------*/
.block-list,
.block-list > li {
border: 0 solid #e3e3e3; }
.block-list {
list-style: none;
margin-left: 0;
border-top-width: 1px; }
.block-list > li {
border-bottom-width: 1px;
padding: 11px; }
.block-list__link {
display: block;
padding: 11px;
margin: -11px; }
/*------------------------------------*\
#SPRITE
\*------------------------------------*/
/**
* Giving an element a class of `.sprite` will throw it into ‘sprite’ mode and apply
* a background image e.g.:
*
More info…
*
* or
*
Help and FAQ
*
* Giving an element a class of `.icon` will throw it into ‘icon’ mode and will
* not add a background, but should be used for icon fonts and is populated
* through a `data-icon` attribute and the `:after` pseudo-element, e.g.:
*
View your favourites
*
* Where ‘’ might map to a star in your particular icon font.
*
* These all require extension in your theme stylesheet, e.g. in your own CSS:
*
.sprite{
background-image:url(path/to/your/sprite.png);
}
.sprite--link{ background-position:0 0 ; }
.sprite--star{ background-position:0 -16px; }
*
* Demo: jsfiddle.net/inuitcss/6TKuS
*
*/
.sprite,
.icon {
display: inline-block;
line-height: 1;
position: relative;
vertical-align: middle;
zoom: 1;
/**
* So using `.icon` on certain elements doesn’t make a visual difference.
*/
font-style: normal;
font-weight: normal;
/**
* So icons added using `.icon` sit in the centre of the element.
*/
text-align: center; }
.sprite {
/**
* The typical size of most icons. Override in your theme stylesheet.
*/
width: 16px;
height: 16px;
top: -1px;
/*
* H5BP method image replacement:
* github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2
*/
overflow: hidden;
*text-indent: -9999px; }
.sprite:before {
content: "";
display: block;
width: 0;
height: 100%; }
/*------------------------------------*\
#RULES
\*------------------------------------*/
/**
* Horizontal rules, extend `hr`
*/
.rule {
color: #e3e3e3;
border: none;
border-bottom-width: 1px;
border-bottom-style: solid;
margin-bottom: 21px;
margin-bottom: 1.1666666667rem; }
/**
* Dotted rules
*/
.rule--dotted {
border-bottom-style: dotted; }
/**
* Dashed rules
*/
.rule--dashed {
border-bottom-style: dashed; }
/*------------------------------------*\
$BARE-LIST
\*------------------------------------*/
/**
* The bare-list object simply removes any indents and bullet points from lists.
*/
.bare-list, .site__foot .site__social ul, .item-list, .text--body ul {
margin: 0;
list-style: none; }
/**
* Components
*/
.site.js.site--loaded body.show {
opacity: 1;
-webkit-transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.meta {
display: none; }
.site__media {
background: #D84A29;
/*margin:0 10px;*/
margin-bottom: 30px; }
.site--mobile .site__media {
margin-bottom: 20px; }
.site--tablet-narrow .site__media {
margin-bottom: 20px; }
.site__page {
padding-top: 40px; }
.site__head {
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
background: #000;
color: #D2D2C9;
text-align: center; }
.site__head a {
color: #D2D2C9; }
.site__head a:hover {
opacity: 0.7; }
.site__head .content {
height: 40px;
position: relative; }
.site__head .site__logo {
font-size: 24px;
line-height: 45px;
text-transform: uppercase;
font-family: "Copy Medium", "Copy Regular", Arial, sans-serif;
display: block;
height: 100%;
width: 50%;
margin: 0 auto;
white-space: nowrap; }
.site__archive_toggle {
display: block;
position: absolute;
top: 50%;
margin-top: -12px;
right: 20px; }
.site__nav_toggle {
display: block;
width: 25px;
height: 20px;
position: absolute;
top: 50%;
margin-top: -12px;
left: 20px; }
.site__nav_toggle .text {
display: none; }
.site__nav_toggle .line {
-webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
display: block;
height: 2px;
width: 100%;
background: #D2D2C9;
opacity: 1; }
.site__nav_toggle .line.top {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
position: absolute;
top: 0;
left: 0; }
.site__nav_toggle .line.middle {
position: absolute;
top: 50%;
margin-top: -1px;
left: 0; }
.site__nav_toggle .line.middle {
position: absolute;
top: 50%;
margin-top: -1px;
left: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.site__nav_toggle .line.bottom {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
position: absolute;
bottom: 0;
left: 0; }
.site--nav-open .site__nav_toggle .line.top, .site--nav-open .site__nav_toggle .line.bottom {
opacity: 0; }
.site--nav-open .site__nav_toggle .line.middle-1 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.site--nav-open .site__nav_toggle .line.middle-2 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.site__nav {
height: 0;
overflow: hidden; }
.site__nav .nav {
border-top: 1px solid #D2D2C9;
font-size: 24px;
line-height: 35px;
text-transform: uppercase; }
.site__nav .nav li {
padding-top: 8px;
border-bottom: 1px solid #D2D2C9; }
.site__nav .nav li.selected a, .site__nav .nav li a:hover {
font-family: "Copy Medium", "Copy Regular", Arial, sans-serif; }
.site__archive-nav {
height: 0;
overflow: hidden;
-webkit-overflow-scrolling: touch; }
.site__archive-nav .nav li a {
padding-top: 10px;
font-family: "Copy Regular", Arial, sans-serif;
line-height: 100%; }
.site__archive-nav .nav li.selected a, .site__archive-nav .nav li a:hover {
font-family: "Copy Medium", "Copy Regular", Arial, sans-serif; }
.site--archive-open {
overflow: hidden;
width: 100%;
height: 100%; }
.site--archive-open .site__archive-nav {
overflow-y: auto;
-webkit-overflow-scrolling: touch; }
.content-inner {
position: relative;
width: auto;
margin: 20px; }
.site--mobile .content-inner {
margin-left: 10px;
margin-right: 10px; }
.site--tablet-narrow .content-inner {
margin-left: 10px;
margin-right: 10px; }
.site__section--foot {
background: #000;
-webkit-transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 1; }
.site--contact .site__section--foot {
opacity: 0; }
.site__foot {
color: #D2D2C9;
line-height: 118%;
margin: 0 20px; }
.site--mobile .site__foot {
margin-left: 20px;
margin-right: 20px; }
.site--mobile .site__foot > .content {
padding: 20px 0; }
.site--tablet-narrow .site__foot {
margin-left: 20px;
margin-right: 20px; }
.site--tablet-narrow .site__foot > .content {
padding: 20px 0; }
.site__foot > .content {
padding: 15px 20px; }
.site__foot a {
color: #D2D2C9;
text-decoration: underline; }
.site__foot a:hover {
opacity: 0.7;
text-decoration: none; }
.site__foot .site__disclaimer {
text-transform: uppercase;
font-family: "Copy Medium", "Copy Regular", Arial, sans-serif; }
.site__foot .site__newsletter .text-input {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 1px solid #D2D2C9;
color: #D2D2C9;
line-height: 130%;
display: block;
width: 98%;
padding: 2px 1%;
background: transparent; }
.site__foot .site__newsletter .text-input:focus {
background: white;
border-color: white;
color: black; }
.site__foot .site__section {
width: 50%;
float: left; }
.site__foot .site__section:last-child {
padding-left: 20px; }
.site__foot .site__section > * {
width: 45%;
margin-right: 5%;
float: left; }
.site--tablet-narrow .site__foot .site__section {
width: 50%;
float: left; }
.site--tablet-narrow .site__foot .site__section:last-child {
padding-left: 20px; }
.site--tablet-narrow .site__foot .site__section > * {
width: auto;
float: none;
margin-right: 0; }
.site--mobile .site__foot .site__section {
width: auto;
float: none; }
.site--mobile .site__foot .site__section:last-child {
padding-left: 0px; }
.site--mobile .site__foot .site__section > * {
width: auto;
float: none;
margin-right: 0; }
.no-touch.csstransforms3d.csstransitions .site__is-visible {
-webkit-transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1), transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 1.5s cubic-bezier(0.19, 1, 0.22, 1); }
.no-touch.csstransforms3d.csstransitions .site__is-visible.site__is-visible--invisible {
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
opacity: 0.8; }
.no-touch.csstransforms3d.csstransitions .site__is-visible.site__is-visible--visible {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1; }
.ui-clickable {
cursor: pointer; }
.sprite {
display: block;
background-image: url(/img/sprite-01.svg);
background-repeat: no-repeat;
background-position: 0 0;
width: 26px;
height: 26px; }
.sprite .text {
display: none; }
.sprite--prev {
background-position: -5px -130px; }
.sprite--next {
background-position: -5px -99px; }
.sprite--magnify {
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
background-position: -5px -68px; }
.sprite--magnify.is-active {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-position: -5px -5px; }
.sprite--close {
background-position: -5px -160px; }
.sprite--more {
transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: -moz-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-ms-transition: -ms-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: -o-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
background-position: -5px -37px; }
.sprite--more.is-active {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-position: -5px -5px; }
.nocsstransitions .sprite--more.is-active {
background-position: -5px -160px; }
/* Core Item Styles */
.item {
position: relative; }
/* Item list */
.item-list {
width: auto;
position: relative;
text-align: center; }
.site--mobile .item-list, .site--tablet-narrow .item-list {
margin-left: 10px;
margin-right: 10px; }
.item-list .item {
overflow: hidden;
margin-bottom: 40px;
display: inline-block;
width: 100%;
vertical-align: middle; }
.site--mobile .item-list .item {
margin-bottom: 20px; }
.item-list .item:hover .item__info, .item-list .item.hover .item__info {
-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
top: 0; }
.item-list .item.item--top {
vertical-align: top; }
.item-list .item.item--middle {
vertical-align: middle; }
.item-list .item.item--bottom {
vertical-align: bottom; }
.item-list .item.item--medium {
width: 40%; }
.item-list .item.item--small {
width: 30%; }
.item-list .item.item--large {
width: 50%; }
.site--mobile .item-list .item.item--small, .site--mobile .item-list .item.item--medium {
width: 50%; }
.site--mobile .item-list .item.item--large {
width: 100%; }
.item-list .item .item__content {
width: auto;
margin: 0 20px; }
.site--mobile .item-list .item .item__content, .site--tablet-narrow .item-list .item .item__content {
margin: 0 10px; }
.item-list .item__image {
width: 100%;
height: 100%; }
.item-list .item__image .site__lazy-image {
width: 100%;
height: 100%;
display: block;
margin: 0; }
.item-list .item__image .site__lazy-image img {
width: 100%;
height: 100%;
display: block;
margin: 0; }
.item-list .item__body {
background: #000;
color: #D2D2C9;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: table;
text-align: center; }
.item-list .item__body a {
color: #D2D2C9; }
.item-list .item__body a:hover {
color: white; }
.item-list .item__body .content {
padding: 0 20px;
display: table-cell;
vertical-align: middle; }
.item-list .item__body .content p {
text-transform: uppercase;
font-size: 24px;
line-height: 1.8333333333;
font-family: "Copy Medium", "Copy Regular", Arial, sans-serif;
line-height: 110%;
margin: 0 20px; }
.site--mobile .item-list .item__body .content p {
font-size: 11px;
line-height: 1.2222222222; }
.item-list .item__body .content p:last-child {
margin: 0; }
.item-list .item__info {
-webkit-transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: auto;
background: #000;
color: #D2D2C9; }
.site--mobile .item-list .item__info {
font-size: 18px;
line-height: 1.2222222222; }
.item-list .item__info .content {
padding: 10px; }
/* Coloured Items */
.item-list--coloured img {
-webkit-filter: url(#colour);
-moz-filter: url(#colour);
-ms-filter: url(#colour);
-o-filter: url(#colour);
filter: url(#colour); }
.item-list--coloured .item:hover img, .item-list--coloured .item.hover img {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none; }
.text--heading {
font-family: "Copy Medium", "Copy Regular", Arial, sans-serif;
font-weight: normal;
font-style: normal;
text-transform: uppercase; }
.text--body {
font-family: "Copy Regular", Arial, sans-serif; }
.text--body strong, .text--body b {
font-weight: normal;
font-weight: normal;
font-style: normal;
font-family: "Copy Medium", "Copy Regular", Arial, sans-serif; }
.text--body a {
text-decoration: underline; }
.text--body a:hover {
text-decoration: none; }
.text--body .text-input {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 1px solid #000;
color: #000;
line-height: 130%;
display: block;
width: 50%;
padding: 2px 1%;
background: transparent; }
.text--body .text-input:focus {
background: black;
border-color: black;
color: white; }
.text--alpha, .site__archive-nav .nav li, .template__heading {
font-family: "Copy Medium", "Copy Regular", Arial, sans-serif;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
font-size: 65px;
line-height: 1.0153846154;
line-height: 1; }
.site--mobile .text--alpha, .site--mobile .site__archive-nav .nav li, .site__archive-nav .nav .site--mobile li, .site--mobile .template__heading {
font-size: 50px;
line-height: 1.32; }
.text--beta, .navigation {
font-family: "Copy Medium", "Copy Regular", Arial, sans-serif;
font-weight: normal;
font-style: normal;
text-transform: uppercase;
font-size: 24px;
line-height: 1.8333333333; }
.text--caption {
font-family: "Copy Medium", "Copy Regular", Arial, sans-serif; }
.infoBox {
position: absolute;
width: 40%;
top: 50%;
margin-top: -23px;
right: 20px; }
.infoBox .sprite--more {
position: absolute;
top: -2px;
right: 0;
z-index: 10; }
.infoBox .sprite--close {
margin: 0 auto;
display: none; }
.infoBox.long .sprite--close {
display: block; }
.site--desktop .infoBox .sprite--close,
.site--tablet .infoBox .sprite--close {
display: none !important; }
.infoBox__text {
text-align: left;
background: #000;
color: #D2D2C9;
padding: 15px 60px 15px 15px;
position: absolute;
top: -15px;
right: -15px;
width: 100%;
z-index: 5;
display: none; }
.infoBox__text p:last-child {
margin-bottom: 0; }
.infoBox__text a {
color: #D2D2C9; }
.site--tablet-narrow .infoBox {
width: 60%; }
.site--mobile .infoBox {
width: auto;
position: relative;
top: auto;
right: auto;
height: 40px;
margin-top: 0px;
margin-right: 10px;
margin-left: 10px; }
.site--mobile .infoBox .sprite--more {
position: absolute;
top: 0;
right: 50%;
margin-right: -13px;
z-index: 10; }
.site--mobile .infoBox .infoBox__text {
padding-right: 15px;
padding-top: 60px;
right: 0; }
.navigation {
font-family: "Copy Regular", Arial, sans-serif;
text-align: center;
position: relative;
margin-right: 20px;
margin-left: 20px; }
.navigation .navigation__back {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
display: inline-block;
margin-top: 5px; }
.navigation .navigation__back:hover {
opacity: 0.5; }
.navigation__prev,
.navigation__next {
position: absolute;
top: 8px;
overflow: visible; }
.navigation__prev .text,
.navigation__next .text {
-webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
display: block;
width: auto;
position: absolute;
top: 4px;
height: 100%;
line-height: 26px;
white-space: nowrap;
padding: 0 10px;
opacity: 0; }
.navigation__prev:hover,
.navigation__next:hover {
opacity: 1; }
.navigation__prev:hover .text, .navigation__next:hover .text {
opacity: 1; }
.site--mobile .navigation__prev:hover .text,
.site--mobile .navigation__next:hover .text {
opacity: 0; }
.navigation__next {
right: 0; }
.navigation__next .text {
right: 70%; }
.navigation__next:hover .text {
right: 100%; }
.navigation__prev {
left: 0; }
.navigation__prev .text {
left: 70%; }
.navigation__prev:hover .text {
left: 100%; }
.template {
position: relative;
padding-top: 20px; }
.template.template--about .template__heading {
display: none; }
.template__head {
position: relative;
width: auto;
margin: 0 20px;
margin: 0; }
.site--desktop .template__head .text--alpha, .site--desktop .template__head .site__archive-nav .nav li, .site__archive-nav .nav .site--desktop .template__head li, .site--desktop .template__head .template__heading {
padding: 0 80px; }
.template--page,
.template--contact {
margin-left: 20px;
margin-right: 20px; }
.template--project,
.template--home,
.template--listing {
margin-left: 0;
margin-right: 0; }
.template--project .site__media,
.template--home .site__media,
.template--listing .site__media {
margin-left: 20px;
margin-right: 20px; }
.template--page .template__section {
margin-bottom: 30px; }
.template--page .template__section.template__section-1 {
width: 48%;
float: left; }
.template--page .template__section.template__section-2 {
width: 48%;
float: right; }
.template__heading {
line-height: 1 !important;
text-align: center;
margin-bottom: 10px; }
/*.site--tablet-narow{
.template--page{
margin-right:10px;
margin-left:10px;
&.template--project{
margin-left:0;
margin-right:0;
}
}
}*/
.site--mobile .template--page {
/* margin-right:10px;
margin-left:10px;
&.template--project{
margin-left:0;
margin-right:0;
}*/ }
.site--mobile .template--page .template__section.template__section-1, .site--mobile .template--page .template__section.template__section-2 {
width: auto;
float: none; }
.template__section--listing {
text-align: center; }
.template__section--listing .heading {
margin-bottom: 30px; }