/****** FILE: mir/css/_reset.css *****/
/**
 * Grid presets
 *
 * @column: The column-width of your grid in pixels
 * @gutter: The gutter-width of your grid in pixels
 */
/**
 *  Colors
 */
/**
 * Typography presets
 * @font-size: Your base font-size in pixels
 * @em: Shorthand for outputting ems, e.g. "12/@em"
 */
/**
 * Breakpoints
 */
/**
 * Paddings
 */
/**
 * Font
 */
/**
 * LESS baseline grid calculator
 * http://www.johnfaulds.com.au/journal/less-baseline-grid-calculator/
 *
 * @fontsize: defaults to 16 but you can pass in any value you want
 *
 * @lineheight defaults to 24 and will change depending on the size of your text. Working out the required
 * line-height should be the only calculation you have to do and it's an easy one as it will always be a
 * multiple of your default line-height and should always be equal to or larger than your font-size. So if
 * your font-size is 12, line-height will be 24; if your font-size is 24, it'll be 24; if your font-size is
 * 36, line-height will be 48; if it's 50, it'll be 72.
 *
 * @multiplier is used for larger font-sizes if you want the margin to be larger than a standard 1 line-height's
 * worth which is the default. In most cases, the only value other than 1 you would use would be 2 and only for
 * large headings.
 *
 * @lineheightreducer is used for text with a smaller font-size which won't look as good with such a large leading.
 * Instead, use the reducer to bring it down to a more readable level. I've used 1.2 which will mean five lines of
 * smaller text will fit into the space of four lines of normal text. I would tink you'd only need to use it for
 * text sizes around 10px or 11px.
 */
/**
 * Apply a natural box layout model to all elements, but allowing components to change
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll;
  background: white;
  padding: 0.875em;
  height: 100%;
}
@media screen and (max-width: 55.75em) {
  html {
    padding: 0.4375em;
  }
}
html,
button,
input,
select,
textarea {
  font-family: 'Adobe Caslon Pro', serif;
  font-style: normal;
  font-weight: 400;
}
article,
aside,
details,
figcaption,
figure,
picture,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
body,
form,
fieldset,
legend,
input,
select,
textarea,
button {
  margin: 0;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}


/****** FILE: mir/css/_form.css *****/
/**
 * Grid presets
 *
 * @column: The column-width of your grid in pixels
 * @gutter: The gutter-width of your grid in pixels
 */
/**
 *  Colors
 */
/**
 * Typography presets
 * @font-size: Your base font-size in pixels
 * @em: Shorthand for outputting ems, e.g. "12/@em"
 */
/**
 * Breakpoints
 */
/**
 * Paddings
 */
/**
 * Font
 */
/**
 * LESS baseline grid calculator
 * http://www.johnfaulds.com.au/journal/less-baseline-grid-calculator/
 *
 * @fontsize: defaults to 16 but you can pass in any value you want
 *
 * @lineheight defaults to 24 and will change depending on the size of your text. Working out the required
 * line-height should be the only calculation you have to do and it's an easy one as it will always be a
 * multiple of your default line-height and should always be equal to or larger than your font-size. So if
 * your font-size is 12, line-height will be 24; if your font-size is 24, it'll be 24; if your font-size is
 * 36, line-height will be 48; if it's 50, it'll be 72.
 *
 * @multiplier is used for larger font-sizes if you want the margin to be larger than a standard 1 line-height's
 * worth which is the default. In most cases, the only value other than 1 you would use would be 2 and only for
 * large headings.
 *
 * @lineheightreducer is used for text with a smaller font-size which won't look as good with such a large leading.
 * Instead, use the reducer to bring it down to a more readable level. I've used 1.2 which will mean five lines of
 * smaller text will fit into the space of four lines of normal text. I would tink you'd only need to use it for
 * text sizes around 10px or 11px.
 */
/**
 * Form
 */
fieldset {
  border: none;
}
input,
textarea,
select {
  border: 1px solid #f3f3f3;
  font-size: 1em;
  padding: 0.5625em 0.5625em 0.375em;
  -webkit-border-radius: 0.3em;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0.3em;
  -moz-background-clip: padding;
  border-radius: 0.3em;
  background-clip: padding-box;
}
select,
input[type="text"],
input[type="password"] {
  min-width: 15.75em;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {
  padding: 0.375em 0.75em;
  line-height: 1.5em;
  background: #7c1418;
  color: #ffffff;
  min-width: 15.75em;
  -webkit-transition: background 0.3s, color 0.3s;
  -moz-transition: background 0.3s, color 0.3s;
  -o-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;
  cursor: pointer;
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background: #cccccc;
}
#MemberLoginForm_LoginForm {
  margin-top: 1.5em;
}
#MemberLoginForm_LoginForm fieldset > div {
  margin-bottom: 0.75em;
}
#MemberLoginForm_LoginForm .Actions input[type="submit"] {
  margin-bottom: 0.75em;
}
#MemberLoginForm_LoginForm_Remember_Holder {
  display: none;
}
#MemberLoginForm_LoginForm_Remember_Holder label {
  display: inline;
}
#MemberLoginForm_LoginForm_Email_Holder label {
  display: none;
}
#MemberLoginForm_LoginForm_Password_Holder label {
  display: none;
}
.field {
  margin-bottom: 1.5em;
}
label {
  font-size: 0.875em;
  line-height: 1.71428571;
  margin: 0 0 1.71428571em;
  display: block;
  margin-bottom: 0;
}
.login {
  text-align: center;
}
.message {
  display: block;
  margin-top: 0.375em;
  font-size: 0.875em;
}
.required {
  color: #9b1419;
}
.button {
  color: #ffffff;
  text-decoration: none;
  background-color: #7c1418;
  padding: 0.4375em 0.875em 0.21875em;
  -webkit-border-radius: 0.2em;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0.2em;
  -moz-background-clip: padding;
  border-radius: 0.2em;
  background-clip: padding-box;
}


/****** FILE: mir/css/typography.css *****/
/**
 * Grid presets
 *
 * @column: The column-width of your grid in pixels
 * @gutter: The gutter-width of your grid in pixels
 */
/**
 *  Colors
 */
/**
 * Typography presets
 * @font-size: Your base font-size in pixels
 * @em: Shorthand for outputting ems, e.g. "12/@em"
 */
/**
 * Breakpoints
 */
/**
 * Paddings
 */
/**
 * Font
 */
/**
 * LESS baseline grid calculator
 * http://www.johnfaulds.com.au/journal/less-baseline-grid-calculator/
 *
 * @fontsize: defaults to 16 but you can pass in any value you want
 *
 * @lineheight defaults to 24 and will change depending on the size of your text. Working out the required
 * line-height should be the only calculation you have to do and it's an easy one as it will always be a
 * multiple of your default line-height and should always be equal to or larger than your font-size. So if
 * your font-size is 12, line-height will be 24; if your font-size is 24, it'll be 24; if your font-size is
 * 36, line-height will be 48; if it's 50, it'll be 72.
 *
 * @multiplier is used for larger font-sizes if you want the margin to be larger than a standard 1 line-height's
 * worth which is the default. In most cases, the only value other than 1 you would use would be 2 and only for
 * large headings.
 *
 * @lineheightreducer is used for text with a smaller font-size which won't look as good with such a large leading.
 * Instead, use the reducer to bring it down to a more readable level. I've used 1.2 which will mean five lines of
 * smaller text will fit into the space of four lines of normal text. I would tink you'd only need to use it for
 * text sizes around 10px or 11px.
 */
/**
 * @license
 * MyFonts Webfont Build ID 2698464, 2013-11-29T08:02:12-0500
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: Adobe Caslon Bold Expert by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/adobe-caslon/bold-expert-3491/
 *
 * Webfont: Adobe Caslon Bold Alternate by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/adobe-caslon/bold-alternate-3491/
 *
 * Webfont: Adobe Caslon Bold by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/adobe-caslon/bold-3491/
 *
 * Webfont: Adobe Caslon Regular Alternate by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/adobe-caslon/regular-alternate-3491/
 *
 * Webfont: Adobe Caslon Regular Expert by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/adobe-caslon/regular-expert-3491/
 *
 * Webfont: Adobe Caslon Regular by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/adobe-caslon/regular-3491/
 *
 *
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2698464
 * Licensed pageviews: 250,000
 * Webfonts copyright: Copyright (c) 1988-1991 Linotype Library GmbH, www.linotype.com. All rights reserved. This software may not be reproduced, used, displayed, modified, disclosed or transferred without the express written approval of Linotype Library GmbH. Adobe Caslon is e
 *
 * © 2013 MyFonts Inc
 * @import url("//hello.myfonts.net/count/292ce0");
*/
@font-face {
  font-family: 'Adobe Caslon Pro';
  src: url('http://www.goooicg.com/fonts/ACaslonPro-Regular.eot');
  src: url('http://www.goooicg.com/fonts/ACaslonPro-Regular.eot?#iefix') format('embedded-opentype'), url('http://www.goooicg.com/fonts/ACaslonPro-Regular.svg#66be995022d6f507f528f15386d1e64f') format('svg'), url('http://www.goooicg.com/fonts/ACaslonPro-Regular.woff') format('woff'), url('http://www.goooicg.com/fonts/ACaslonPro-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Adobe Caslon Pro Bold';
  src: url('http://www.goooicg.com/fonts/ACaslonPro-Bold.eot');
  src: url('http://www.goooicg.com/fonts/ACaslonPro-Bold.eot?#iefix') format('embedded-opentype'), url('http://www.goooicg.com/fonts/ACaslonPro-Bold.svg#09ec7fcf3550cc6d857e9fb1a17c52a9') format('svg'), url('http://www.goooicg.com/fonts/ACaslonPro-Bold.woff') format('woff'), url('http://www.goooicg.com/fonts/ACaslonPro-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
}
html,
html a {
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
  word-spacing: normal;
  font-size: 100%;
  vertical-align: baseline;
}
body {
  font-family: 'Adobe Caslon Pro', serif;
  font-style: normal;
  font-weight: 400;
  color: #4e4e56;
  min-height: 100%;
  line-height: 1.4;
  font-size: 1em;
}
h1 {
  font-family: 'Adobe Caslon Pro Bold', serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5;
  margin: 0 0 1.5em;
  margin-bottom: 0;
}
h2 {
  font-family: 'Adobe Caslon Pro Bold', serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.625em;
  line-height: 1.84615385;
  margin: 0 0 0.92307692em;
}
h3 {
  font-size: 1.375em;
  line-height: 1.09090909;
  margin: 0 0 1.09090909em;
}
h4 {
  font-family: 'Adobe Caslon Pro', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.125em;
  line-height: 1.33333333;
  margin: 0 0 1.33333333em;
}
h5 {
  font-family: 'Adobe Caslon Pro', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.3;
}
h6 {
  font-size: 0.625em;
  line-height: 2.4;
  margin: 0 0 2.4em;
}
a {
  color: #4e4e56;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
a:active,
a:focus,
a:hover {
  color: #111111;
}
nav a {
  text-decoration: none;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
nav a:active,
nav a:focus,
nav a:hover {
  color: #111111;
}
u {
  text-decoration: underline;
}
em {
  font-family: 'Adobe Caslon Pro', serif;
  font-style: italic;
  font-weight: 400;
}
.subText,
.menuText {
  line-height: 1.3;
}
.menuText {
  font-size: 1.125em;
}
.subText {
  font-size: 0.875em;
}
.current,
.section {
  font-family: 'Adobe Caslon Pro Bold', serif;
  font-style: normal;
  font-weight: 700;
}
.touch a:active,
.touch a:hover {
  font-family: 'Adobe Caslon Pro Bold', serif;
  font-style: normal;
  font-weight: 700;
  color: #111111;
}
.touch a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
.ss_class_WorkPage.touch figure:active,
.ss_class_WorkPage.touch figure:hover {
  opacity: 0.90;
}
a[href^="tel"] {
  text-decoration: none;
}
p,
pre {
  font-size: 0.875em;
  margin-bottom: 1.5em;
}
strong,
b {
  font-family: 'Adobe Caslon Pro Bold', serif;
  font-style: normal;
  font-weight: 700;
}
em,
i {
  font-family: 'Adobe Caslon Pro', serif;
  font-style: italic;
  font-weight: 400;
}
dl,
menu,
ol,
ul {
  padding: 0;
  margin: 0 0 0 1.5em;
}
.intro {
  font-size: 1.3125em;
  line-height: 1.23809524;
  margin: 0 0 1.14285714em;
}
@media screen and (max-width: 61.9375em) and (min-width: 48em) {
  .intro {
    font-size: 1em;
    line-height: 1.5;
    margin: 0 0 1.5em;
  }
}
@media screen and (max-width: 47.9375em) {
  .intro {
    font-size: 1em;
    line-height: 1.5;
    margin: 0 0 1.5em;
  }
}
.small {
  font-size: 0.875em;
  line-height: 1.71428571;
  margin: 0 0 1.71428571em;
}
.red {
  color: #6B1013;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.no-margin {
  margin: 0;
}
hr {
  display: block;
  border: none;
  height: 1px;
  max-height: 1px;
  margin-bottom: 1em;
  margin-top: 0.625em;
  border-bottom: 1px solid #7c1418;
  padding: 0;
}


/****** FILE: mir/css/layout.css *****/
/**
 * Grid presets
 *
 * @column: The column-width of your grid in pixels
 * @gutter: The gutter-width of your grid in pixels
 */
/**
 *  Colors
 */
/**
 * Typography presets
 * @font-size: Your base font-size in pixels
 * @em: Shorthand for outputting ems, e.g. "12/@em"
 */
/**
 * Breakpoints
 */
/**
 * Paddings
 */
/**
 * Font
 */
/**
 * LESS baseline grid calculator
 * http://www.johnfaulds.com.au/journal/less-baseline-grid-calculator/
 *
 * @fontsize: defaults to 16 but you can pass in any value you want
 *
 * @lineheight defaults to 24 and will change depending on the size of your text. Working out the required
 * line-height should be the only calculation you have to do and it's an easy one as it will always be a
 * multiple of your default line-height and should always be equal to or larger than your font-size. So if
 * your font-size is 12, line-height will be 24; if your font-size is 24, it'll be 24; if your font-size is
 * 36, line-height will be 48; if it's 50, it'll be 72.
 *
 * @multiplier is used for larger font-sizes if you want the margin to be larger than a standard 1 line-height's
 * worth which is the default. In most cases, the only value other than 1 you would use would be 2 and only for
 * large headings.
 *
 * @lineheightreducer is used for text with a smaller font-size which won't look as good with such a large leading.
 * Instead, use the reducer to bring it down to a more readable level. I've used 1.2 which will mean five lines of
 * smaller text will fit into the space of four lines of normal text. I would tink you'd only need to use it for
 * text sizes around 10px or 11px.
 */
/**
 * Schema.org same as link.
 */
.schema-hidden {
  display: none;
}
/**
 * Global fade style.
 */
.transition-opacity {
  opacity: 0;
  -webkit-transition: display 0s, opacity 1s cubic-bezier(0.55, 0.085, 0.68, 0.534);
  -moz-transition: display 0s, opacity 1s cubic-bezier(0.55, 0.085, 0.68, 0.534);
  -o-transition: display 0s, opacity 1s cubic-bezier(0.55, 0.085, 0.68, 0.534);
  transition: display 0s, opacity 1s cubic-bezier(0.55, 0.085, 0.68, 0.534);
}
.transition-opacity.on,
.transition-opacity.lazyloaded {
  opacity: 1;
}
/**
 * Picture
 * @used
 */
.image {
  position: relative;
  width: 100%;
  height: 0;
}
.image-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
/**
 * Video
 */
.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/**
 * Main menu
 */
.navigation {


}

.navigation-on {
  display: block;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
  padding: 0.875em;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #ffffff;
  text-align: center;
  overflow-y: scroll;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
.navigation-button {
  position: fixed;
  top: 2em;
  right: 2em;
  z-index: 999;
  cursor: pointer;
  display: none;
  width: 1.5em;
  height: 1.5em;
 
  -webkit-border-radius: 0.75em;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0.75em;
  -moz-background-clip: padding;
  border-radius: 0.75em;
  background-clip: padding-box;
  -webkit-transition: background;
  -moz-transition: background;
  -o-transition: background;
  transition: background;
}
.navigation-button:hover {
  background: #9b1419;
}
@media screen and (max-width: 61.9375em) {
  .navigation-button {
    display: block;
  }
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0.21875em;
  border-bottom: 1px solid #ff6e3f;
}

}
.menu--sub {
  width: 100%;
  padding: 0.21875em 0.21875em 0.4375em;
  margin-top: 1.3125em;
  font-size: .875em;
}

.menu--sub__inline {
  width: 50%;
}
.menu-item {
  margin: 0 0.15em;
  
}

.menu-item__sort {
  font-size: 0.75em;
}
.menu-item--main {
  display: inline;  
  font-size: 0.85em;
}

.burger-icon {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjE3cHgiIHZpZXdCb3g9IjAgMCAzMiAxNyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT4xNDg2MzI3MjA0X21lbnUtYWx0PC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iMTQ4NjMyNzIwNF9tZW51LWFsdCIgZmlsbD0iIzlCMTQxOSI+ICAgICAgICAgICAgPHBhdGggZD0iTTAsMyBMMzIsMyBMMzIsMCBMMCwwIEwwLDMgWiBNMzIsNyBMMCw3IEwwLDEwIEwzMiwxMCBMMzIsNyBaIE0zMiwxNCBMMCwxNCBMMCwxNyBMMzIsMTcgTDMyLDE0IFoiIGlkPSJTaGFwZSI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: text-top;
  margin-right: 0.75em;
}
.toggle-filter {
  padding: 0.4375em;
  border-bottom: 1px solid #cccccc;
  margin-top: 1.3125em;
  font-size: .875em;
}
.toggle-filter-button {
  cursor: pointer;
}
.sort-button {
  cursor: pointer;
}
.ss_class_StaffHolder .menu--sub,
.ss_class_StaffPage .menu--sub {
  border-bottom: none;
}
.ss_class_MemberProfilePage .navigation {
  background-color: rgba(235, 235, 235, 0.85);
  right: 1em;
  padding: 0 2em 0 0.5em;
}

.ss_class_MemberProfilePage .menu-item {
  text-transform: none;
}
.ss_class_MemberProfilePage .menu--sub {
  padding-bottom: 0.875em;
  border-bottom: 1px solid #cccccc;
}
.ss_class_MemberProfilePage .menu--sub:last-child {
  border-bottom: none;
}
.ss_class_MemberProfilePage .menu__inline {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.ss_class_MemberProfilePage .menu__inline .menu {
  width: 50%;
}
.ss_class_MemberProfilePage .menu__inline .menu--sub:last-child {
  border-bottom: 1px solid #cccccc;
  text-align: right;
}
/**
 * Contact info
 */
.contact-info {
  padding: 0.21875em 0.21875em 0.4375em;
  margin-top: 0.875em;
  font-size: .875em;
  border-bottom: 1px solid #9b1419;
}
@media screen and (max-width: 61.9375em) {
  .contact-info {
    border-bottom: none;
    display: block !important;
  }
}
.contact-info--last {
  border-bottom: none;
}
.contact-info-time {
  display: block;
  color: #9b1419;
  margin-top: -0.25em;
  margin-bottom: 0.7em;
}
.ss_class_HomePage .contact-info,
.ss_class_WorkHolder .contact-info,
.ss_class_WorkPage .contact-info,
.ss_class_StaffHolder .contact-info,
.ss_class_StaffPage .contact-info {
  display: none;
}
/**
 * Work video
 * @usde WorkPage
 */
.work-item,
.work-video {
  margin: 0 auto;
  padding-bottom: 0.4375em;
}
.work-item a,
.work-video a {
  text-decoration: none;
}
/**
 * Staff Item
 * @used StaffHolder
 */
.staff-item {
  display: none;
  padding: 0.4375em 0 0;
}
@media screen and (max-width: 61.9375em) {
  .staff-item {
    display: block;
  }
}
.staff-item-caption {
  padding: 0.21875em 0.21875em 0;
}
/**
 * InfoPage styling.
 */
.ss_class_Page body,
.ss_class_InfoHolder body,
.ss_class_InfoPage body {
  background: #f3f3f3;
}
.ss_class_Page body .header,
.ss_class_InfoHolder body .header,
.ss_class_InfoPage body .header {
  position: relative;
  padding-top: 5.125em;
}
.ss_class_Page body .main,
.ss_class_InfoHolder body .main,
.ss_class_InfoPage body .main {
  margin: 0 auto;
  max-width: 30em;
  padding: 3em 0.875em;
}
/**
 * Footer
 */
.footer {
  display: none;
  padding: 1.3125em 0 0.4375em;
  text-align: center;
}
@media screen and (max-width: 61.9375em) {
  .footer {
    display: block;
  }
}
/**** OLD STYLES TO EVALUTE *****/
/**
 * NO JS!
 */
.no-js-message {
  width: auto;
  text-align: center;
}
.no-js .loading {
  display: none;
}
.no-js .main {
  opacity: 1;
}
.no-js .grid .full,
.no-js .grid .half,
.no-js .grid .thumb,
.no-js .grid .item {
  width: 100%;
}
.no-js .footer {
  opacity: 1;
}


/****** FILE: mir/css/logo.css *****/
/**
 * Grid presets
 *
 * @column: The column-width of your grid in pixels
 * @gutter: The gutter-width of your grid in pixels
 */
/**
 *  Colors
 */
/**
 * Typography presets
 * @font-size: Your base font-size in pixels
 * @em: Shorthand for outputting ems, e.g. "12/@em"
 */
/**
 * Breakpoints
 */
/**
 * Paddings
 */
/**
 * Font
 */
/**
 * LESS baseline grid calculator
 * http://www.johnfaulds.com.au/journal/less-baseline-grid-calculator/
 *
 * @fontsize: defaults to 16 but you can pass in any value you want
 *
 * @lineheight defaults to 24 and will change depending on the size of your text. Working out the required
 * line-height should be the only calculation you have to do and it's an easy one as it will always be a
 * multiple of your default line-height and should always be equal to or larger than your font-size. So if
 * your font-size is 12, line-height will be 24; if your font-size is 24, it'll be 24; if your font-size is
 * 36, line-height will be 48; if it's 50, it'll be 72.
 *
 * @multiplier is used for larger font-sizes if you want the margin to be larger than a standard 1 line-height's
 * worth which is the default. In most cases, the only value other than 1 you would use would be 2 and only for
 * large headings.
 *
 * @lineheightreducer is used for text with a smaller font-size which won't look as good with such a large leading.
 * Instead, use the reducer to bring it down to a more readable level. I've used 1.2 which will mean five lines of
 * smaller text will fit into the space of four lines of normal text. I would tink you'd only need to use it for
 * text sizes around 10px or 11px.
 */
.logo {
  content: ' ';
  display: block;
  /*width: 190px;
  height: 49px;*/
  width: 250px;
  height: 61px;
  margin: 0 auto 1.5em;
  pointer-events: all;
  background-image: url(../images/logo.png);
  background-size: 100% 100%;
  text-indent: -9999px;
  border: none;
}
@media screen and (max-width: 61.9375em) and (min-width: 48em) {
 .logo {
    margin-bottom: 0.75em;
    width: 74px;
    height: 31px;
    background-size: 74px 31px;
  }
  
}
@media screen and (max-width: 47.9375em) {
  .logo {
    margin-bottom: 0.75em;
    width: 74px;
    height: 31px;
    background-size: 74px 31px;
  }
}
.no-svg .logo {
  background-image: url(/mir/images/logo.png);
}
@media screen, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dppx) {
  .no-svg .logo {
    background-image: url(/mir/images/logo@2x.png);
  }
}


/****** FILE: mir/css/header.css *****/
/**
 * Grid presets
 *
 * @column: The column-width of your grid in pixels
 * @gutter: The gutter-width of your grid in pixels
 */
/**
 *  Colors
 */
/**
 * Typography presets
 * @font-size: Your base font-size in pixels
 * @em: Shorthand for outputting ems, e.g. "12/@em"
 */
/**
 * Breakpoints
 */
/**
 * Paddings
 */
/**
 * Font
 */
/**
 * LESS baseline grid calculator
 * http://www.johnfaulds.com.au/journal/less-baseline-grid-calculator/
 *
 * @fontsize: defaults to 16 but you can pass in any value you want
 *
 * @lineheight defaults to 24 and will change depending on the size of your text. Working out the required
 * line-height should be the only calculation you have to do and it's an easy one as it will always be a
 * multiple of your default line-height and should always be equal to or larger than your font-size. So if
 * your font-size is 12, line-height will be 24; if your font-size is 24, it'll be 24; if your font-size is
 * 36, line-height will be 48; if it's 50, it'll be 72.
 *
 * @multiplier is used for larger font-sizes if you want the margin to be larger than a standard 1 line-height's
 * worth which is the default. In most cases, the only value other than 1 you would use would be 2 and only for
 * large headings.
 *
 * @lineheightreducer is used for text with a smaller font-size which won't look as good with such a large leading.
 * Instead, use the reducer to bring it down to a more readable level. I've used 1.2 which will mean five lines of
 * smaller text will fit into the space of four lines of normal text. I would tink you'd only need to use it for
 * text sizes around 10px or 11px.
 */
/**
 * Main site header
 */
.header {
  position: absolute;
  z-index: 5;
  width: 100%;
  text-align: center;
  pointer-events: none;
  padding-top: 6em;
  top: 0;
  left: 0;
}
.header .title {
  display: none;
}
@media screen and (max-width: 47.9375em) {
  .header {
    padding-top: 5em;
  }
  .header .intro {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 47.9375em) and (min-width: 30em) {
  .header {
    padding-top: 6em;
  }
}
.header a {
  pointer-events: all;
}
/** Override */
@media screen and (max-width: 61.9375em) and (min-width: 48em) {
  .ss_class_InfoPage .intro,
  .ss_class_InfoHolder .intro {
    display: none;
  }
}
@media screen and (max-width: 47.9375em) {
  .ss_class_InfoPage .intro,
  .ss_class_InfoHolder .intro {
    display: none;
  }
}


/****** FILE: mir/css/hero.css *****/
/**
 * Grid presets
 *
 * @column: The column-width of your grid in pixels
 * @gutter: The gutter-width of your grid in pixels
 */
/**
 *  Colors
 */
/**
 * Typography presets
 * @font-size: Your base font-size in pixels
 * @em: Shorthand for outputting ems, e.g. "12/@em"
 */
/**
 * Breakpoints
 */
/**
 * Paddings
 */
/**
 * Font
 */
/**
 * LESS baseline grid calculator
 * http://www.johnfaulds.com.au/journal/less-baseline-grid-calculator/
 *
 * @fontsize: defaults to 16 but you can pass in any value you want
 *
 * @lineheight defaults to 24 and will change depending on the size of your text. Working out the required
 * line-height should be the only calculation you have to do and it's an easy one as it will always be a
 * multiple of your default line-height and should always be equal to or larger than your font-size. So if
 * your font-size is 12, line-height will be 24; if your font-size is 24, it'll be 24; if your font-size is
 * 36, line-height will be 48; if it's 50, it'll be 72.
 *
 * @multiplier is used for larger font-sizes if you want the margin to be larger than a standard 1 line-height's
 * worth which is the default. In most cases, the only value other than 1 you would use would be 2 and only for
 * large headings.
 *
 * @lineheightreducer is used for text with a smaller font-size which won't look as good with such a large leading.
 * Instead, use the reducer to bring it down to a more readable level. I've used 1.2 which will mean five lines of
 * smaller text will fit into the space of four lines of normal text. I would tink you'd only need to use it for
 * text sizes around 10px or 11px.
 */
/**
 * Hero!
 */
.hero {
  position: relative;
  min-height: 480px;
  height: 0;
}
.hero--slide {
  cursor: pointer;
}
.hero--work,
.hero--gallery {
  margin-bottom: 0.875em;
}
@media screen and (max-width: 55.75em) {
  .hero--work,
  .hero--gallery {
    margin-bottom: 0.4375em;
  }
}
.hero-item {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.hero-item--img {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  width: auto;
  min-width: 100%;
  height: 100%;
  opacity: 0;
}
.hero-item--img.lazyloaded {
  opacity: 1;
}
.hero-item--current {
  display: block;
  z-index: 2;
}
.hero-caption {
  position: absolute;
  width: 25em;
  padding: 0.4375em;
  left: 15%;
  top: 50%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 3;
}
.hero-caption p {
  margin-bottom: 0;
}
@media screen and (max-width: 78.75em) {
  .hero-caption {
    width: 16.25em;
  }
}
@media screen and (max-width: 55.75em) {
  .hero-caption {
    display: none;
  }
}
.hero-caption--mobile {
  display: none;
  padding: 0.21875em;
}
@media screen and (max-width: 55.75em) {
  .hero-caption--mobile {
    display: block;
  }
}
.no-js .hero-item--img,
.no-csstransitions .hero-item--img {
  display: block;
  opacity: 1;
}


/****** FILE: mir/css/grid.css *****/
/**
 * Grid presets
 *
 * @column: The column-width of your grid in pixels
 * @gutter: The gutter-width of your grid in pixels
 */
/**
 *  Colors
 */
/**
 * Typography presets
 * @font-size: Your base font-size in pixels
 * @em: Shorthand for outputting ems, e.g. "12/@em"
 */
/**
 * Breakpoints
 */
/**
 * Paddings
 */
/**
 * Font
 */
/**
 * LESS baseline grid calculator
 * http://www.johnfaulds.com.au/journal/less-baseline-grid-calculator/
 *
 * @fontsize: defaults to 16 but you can pass in any value you want
 *
 * @lineheight defaults to 24 and will change depending on the size of your text. Working out the required
 * line-height should be the only calculation you have to do and it's an easy one as it will always be a
 * multiple of your default line-height and should always be equal to or larger than your font-size. So if
 * your font-size is 12, line-height will be 24; if your font-size is 24, it'll be 24; if your font-size is
 * 36, line-height will be 48; if it's 50, it'll be 72.
 *
 * @multiplier is used for larger font-sizes if you want the margin to be larger than a standard 1 line-height's
 * worth which is the default. In most cases, the only value other than 1 you would use would be 2 and only for
 * large headings.
 *
 * @lineheightreducer is used for text with a smaller font-size which won't look as good with such a large leading.
 * Instead, use the reducer to bring it down to a more readable level. I've used 1.2 which will mean five lines of
 * smaller text will fit into the space of four lines of normal text. I would tink you'd only need to use it for
 * text sizes around 10px or 11px.
 */
.grid {
  margin-left: -0.875em;
}
@media screen and (max-width: 55.75em) {
  .grid {
    margin-left: -0.4375em;
  }
}
.grid-sizer {
  width: 25%;
}
.grid-item {
  padding: 0 0 0.875em 0.875em;
  cursor: pointer;
}
@media screen and (max-width: 55.75em) {
  .grid-item {
    padding: 0 0 0.4375em 0.4375em;
  }
}
.grid-item--featured,
.grid-item--gallery {
  width: 50%;
}
@media screen and (max-width: 47.9375em) {
  .grid-item--featured,
  .grid-item--gallery {
    width: 100%;
  }
}
@media screen and (max-width: 47.9375em) and (min-width: 30em) {
  .grid-item--featured,
  .grid-item--gallery {
    width: 50%;
  }
}
.grid-item--gallery {
  cursor: auto;
}
.grid-item--thumb {
  width: 25%;
}
@media only screen and (max-width: 768px) {
  .grid-item--thumb {
    width: 25%;
  }
}
@media only screen and (max-width: 568px) {
  .grid-item--thumb {
    width: 50%;
  }
}
.touch .grid-item:active,
.touch .grid-item:hover {
  opacity: 0.90;
}
/**
 *  Work Caption
 */
.caption {
  text-align: center;
  margin: 0.6em 0 0.4em;
}
.caption span,
.caption strong {
  display: block;
  color: #5c5c5c;
  font-size: 0.875em;
}
.caption-name,
.caption-year,
.caption-client,
.caption-creator {
  margin: 0;
}
.caption-year,
.caption-client,
.caption-creator,
.caption-description {
  display: none !important;
}


/****** FILE: mir/css/lightning.css *****/
/**
 * Grid presets
 *
 * @column: The column-width of your grid in pixels
 * @gutter: The gutter-width of your grid in pixels
 */
/**
 *  Colors
 */
/**
 * Typography presets
 * @font-size: Your base font-size in pixels
 * @em: Shorthand for outputting ems, e.g. "12/@em"
 */
/**
 * Breakpoints
 */
/**
 * Paddings
 */
/**
 * Font
 */
/**
 * LESS baseline grid calculator
 * http://www.johnfaulds.com.au/journal/less-baseline-grid-calculator/
 *
 * @fontsize: defaults to 16 but you can pass in any value you want
 *
 * @lineheight defaults to 24 and will change depending on the size of your text. Working out the required
 * line-height should be the only calculation you have to do and it's an easy one as it will always be a
 * multiple of your default line-height and should always be equal to or larger than your font-size. So if
 * your font-size is 12, line-height will be 24; if your font-size is 24, it'll be 24; if your font-size is
 * 36, line-height will be 48; if it's 50, it'll be 72.
 *
 * @multiplier is used for larger font-sizes if you want the margin to be larger than a standard 1 line-height's
 * worth which is the default. In most cases, the only value other than 1 you would use would be 2 and only for
 * large headings.
 *
 * @lineheightreducer is used for text with a smaller font-size which won't look as good with such a large leading.
 * Instead, use the reducer to bring it down to a more readable level. I've used 1.2 which will mean five lines of
 * smaller text will fit into the space of four lines of normal text. I would tink you'd only need to use it for
 * text sizes around 10px or 11px.
 */
/**
 * Lightning
 */
.lightning {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  outline: none;
}
.lightning-on {
  display: block;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -moz-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  z-index: 1001;
}
.lightning-close {
  display: block;
  width: 100%;
  height: 100%;
}
.lightning-image {
  z-index: 101;
  box-sizing: content-box;
  margin: auto;
  background: #ffffff;
  padding: 0.875em 0.875em 0.4375em;
  max-width: 96%;
}
.lightning-image-img {
  width: 100%;
  height: auto;
}
.lightning-video {
  position: relative;
}
.lightning-video:after {
  content: '';
  display: block;
  height: 0;
  width: 100%;
  padding-bottom: 56.25%;
}
.lightning-video > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.lightning-caption {
  width: 100%;
  padding: 0.875em 0 0;
  margin: -0.4375em 0 0.4375em;
}
.lightning-caption strong,
.lightning-caption span {
  word-wrap: break-word;
  display: block;
  color: #5c5c5c;
  font-size: 0.875em;
}
.lightning-download-image {
  margin: 0.4375em auto 0;
  width: auto;
  font-size: 0.875em;
  display: table;
}
.ss_class_MemberProfilePage .lightning {
  overflow-y: auto;
}
.ss_class_MemberProfilePage .lightning-image {
  min-width: 30em !important;
  max-width: 90%;
}
@media screen and (max-width: 61.9375em) and (min-width: 48em) {
  .ss_class_MemberProfilePage .lightning-image {
    min-width: 80% !important;
  }
}
@media screen and (max-width: 47.9375em) {
  .ss_class_MemberProfilePage .lightning-image {
    min-width: 80% !important;
  }
}
.ss_class_MemberProfilePage .lightning-image-group {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  margin: 0.875em 0 0.4375em;
  padding-bottom: 0.875em;
  background-color: #d4d4d4;
}
.ss_class_MemberProfilePage .lightning-image-group-item {
  max-width: 100%;
  height: 3.125em;
}
.ss_class_MemberProfilePage .lightning-image-group-caption {
  width: 100%;
}
.ss_class_MemberProfilePage .lightning-image-group-caption strong {
  word-wrap: break-word;
  display: block;
  color: #5c5c5c;
  font-size: 0.875em;
}
.ss_class_MemberProfilePage .lightning-caption {
  background-color: #d4d4d4;
  padding-bottom: 0.875em;
}
.ss_class_MemberProfilePage .lightning .download-zip {
  margin: 0.875em auto 0;
}


/****** FILE: mir/css/print.css *****/
/**
 * Grid presets
 *
 * @column: The column-width of your grid in pixels
 * @gutter: The gutter-width of your grid in pixels
 */
/**
 *  Colors
 */
/**
 * Typography presets
 * @font-size: Your base font-size in pixels
 * @em: Shorthand for outputting ems, e.g. "12/@em"
 */
/**
 * Breakpoints
 */
/**
 * Paddings
 */
/**
 * Font
 */
/**
 * LESS baseline grid calculator
 * http://www.johnfaulds.com.au/journal/less-baseline-grid-calculator/
 *
 * @fontsize: defaults to 16 but you can pass in any value you want
 *
 * @lineheight defaults to 24 and will change depending on the size of your text. Working out the required
 * line-height should be the only calculation you have to do and it's an easy one as it will always be a
 * multiple of your default line-height and should always be equal to or larger than your font-size. So if
 * your font-size is 12, line-height will be 24; if your font-size is 24, it'll be 24; if your font-size is
 * 36, line-height will be 48; if it's 50, it'll be 72.
 *
 * @multiplier is used for larger font-sizes if you want the margin to be larger than a standard 1 line-height's
 * worth which is the default. In most cases, the only value other than 1 you would use would be 2 and only for
 * large headings.
 *
 * @lineheightreducer is used for text with a smaller font-size which won't look as good with such a large leading.
 * Instead, use the reducer to bring it down to a more readable level. I've used 1.2 which will mean five lines of
 * smaller text will fit into the space of four lines of normal text. I would tink you'd only need to use it for
 * text sizes around 10px or 11px.
 */
@media print {
  html {
    overflow-y: auto;
  }
  body {
    width: 90%;
    margin: 0 auto;
  }
  .navigation,
  .loading {
    display: none;
  }
  .logo:before {
    content: url(/mir/images/logo.png) !important;
  }
  .main {
    opacity: 1;
  }
  .header {
    position: relative;
    padding-top: 1em;
    display: block !important;
  }
  .header .title {
    display: none;
  }
  .detail {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
  }
  .hero {
    position: relative;
    height: auto !important;
  }
  .hero .image {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .grid {
    opacity: 1 !important;
    height: auto !important;
  }
  .grid .item {
    position: relative !important;
    display: block !important;
    left: 0 !important;
    top: auto !important;
    float: left;
    width: 100%;
  }
  .grid .item .frame {
    width: 100%;
    margin: 0 auto;
  }
  .footer {
    text-align: center;
    opacity: 1;
  }
  .footer .contact-info {
    display: block !important;
    margin-top: 1.5em;
  }
  img {
    page-break-after: always !important;
    page-break-before: always !important;
    page-break-inside: avoid !important;
  }
}
#subNav {
   height:40px;
}
    #subNav ul {
        list-style: none;
    }
    #subNav ul li {
        float: left;
        margin-right: 20px;
    }
    #subNav ul li a {
        text-decoration: none;
    }
        #subNav ul li .cur {            
            font-weight: 700;
        }
#iconList{ width:500px; border:1px solid red}
#iconList ul { list-style:none}
#iconList ul li { float:left;}

#ws-navigation{ width:230px; margin:0 auto; }
#ws-cn-navigation{ width:118px; margin:0 auto; }
#langBox{ position: absolute;right: 50px;top: 40px; z-index:999;}
#langBox a{ text-decoration:none;}
#langBox .curlang{ font-weight: 700;}