/* Fonts */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */

/* SlimJoe */

textarea {
  min-height: 200px;
  resize: none;
}

@font-face {
    font-family: 'slim_joeregular';
    src: url('../fonts/SlimJoe/slim_joe-webfont.eot');
    src: url('../fonts/SlimJoe/slim_joe-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SlimJoe/slim_joe-webfont.woff2') format('woff2'),
         url('../fonts/SlimJoe/slim_joe-webfont.woff') format('woff'),
         url('../fonts/SlimJoe/slim_joe-webfont.ttf') format('truetype'),
         url('../fonts/SlimJoe/slim_joe-webfont.svg#slim_joeregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* BigJohn */
@font-face {
    font-family: 'big_johnregular';
    src: url('../fonts/BigJohn/big_john-webfont.eot');
    src: url('../fonts/BigJohn/big_john-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BigJohn/big_john-webfont.woff2') format('woff2'),
         url('../fonts/BigJohn/big_john-webfont.woff') format('woff'),
         url('../fonts/BigJohn/big_john-webfont.ttf') format('truetype'),
         url('../fonts/BigJohn/big_john-webfont.svg#big_johnregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* == http://www.fontsquirrel.com/fonts/amble */

/* Amble Regular */
@font-face {
    font-family: 'ambleregular';
    src: url('../fonts/Amble/Regular/Amble-Regular-webfont.eot');
    src: url('../fonts/Amble/Regular/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.woff') format('woff'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Amble Bold */
@font-face {
    font-family: 'amblebold';
    src: url('../fonts/Amble/Bold/Amble-Bold-webfont.eot');
    src: url('../fonts/Amble/Bold/Amble-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.woff') format('woff'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.svg#amblebold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Amble Light */
@font-face {
    font-family: 'amblelight';
    src: url('../fonts/Amble/Light/Amble-Light-webfont.eot');
    src: url('../fonts/Amble/Light/Amble-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Light/Amble-Light-webfont.woff') format('woff'),
         url('../fonts/Amble/Light/Amble-Light-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Light/Amble-Light-webfont.svg#amblelight') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Personal Flavour */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

}

/* Typography */

body {
  background-color: Black;
  font-size: 16px;
  letter-spacing: .05em;
  color: White;
  font-family: "amblelight", "Raleway", Helvetica, Arial, sans-serif;
}
h1, h3{
  font-family: "big_johnregular", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h4 {
  font-size: 22px;
}
h3 {
  font-size: 28px;
}

/* Custom ultilities */
  /* Centered */

  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .vertical-centered {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;

  }

/* Bottom */

.bottom-full {
  position: absolute;
  width: 100%;
  max-width: 100%;
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-100%,-100%);
  -moz-transform: translate(-100%,-100%);
  -ms-transform: translate(-100%,-100%);
  -o-transform: translate(-100%,-100%);
  transform: translate(-100%,-100%);
}

  /* Separator */

  .separator {
    position: relative;
    margin-bottom: 1.7em;
    padding-bottom: 1.7em;
    text-align: right;
    font-weight: bold;
    text-transform: uppercase;
    color: grey;
  }
  .separator:before {
    content: '';
    position: absolute;
    top: 60%;
    left: 95%;
    width: 86px;
    height: 2px;
    background-color: #222;

    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .separator.orange:before {
    background-color: #d87843;
  }


/* Button inverted */

.button.inverted {
  font-size: inherit;
  padding: 25px 70px;
  color: white;
  height: auto;
  border: 3px solid white;
  text-transform: none;
  font-size: 26px;
  font-family: "ambleregular";
}

.button.inverted:hover {
  background: white;
  color: #222;
}

.button.circle {
  padding: 0;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  text-align: center;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}

/* =Section general styling
-------- */

section {
  text-align: center;
  padding: 80px 0;
}

/*

  Section with featured background image. Every section which will have this
  class will get the effect with a background cover.

*/
.creativity:before {
  background: url("../images/creativity_bg_image.jpg");
  background-position: 50% 0;
}
.quote:before {
  background: url("../images/quote_bg_image.jpg");
}
.video-iframe{
  position: absolute;
  left: 0; top: 0; bottom: 0; right: 0;
  height: 100%;
  width: 100%;
  display: none;
}
.video:before {
  background: url("../images/video_bg_image.jpg");
}

.featured-bg-image {
  position: relative;
  background-color: #222222;
  color: white;
  min-height: 500px;
}
.featured-bg-image:before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: .35;
}

.featured-bg-image-big-opaque {
  position: relative;
  background-color: #222222;
  color: white;
  min-height: 900px;
}
.featured-bg-image-big-opaque:before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  background-size: cover !important;
  background-position: 80% 80% !important;
  background-repeat: no-repeat !important;
  opacity: 0.8;
}

.clients {
  background-color: #f4f4f4;
  color: Black;
}

.footer {
  background-color: #131313;
  color: white;
}

/* =Navigation
-------- */

.navigation .menu-icon {
  color: white;
  font-size: 30px;
  line-height: 1em;

  position: absolute;
  left: 100%;
  padding: 20px;

  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -ms-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

.navigation .menu-icon.active {
  background-color: rgba(0,0,0, .3);
}
.navigation .menu-icon:hover {
  color: #222;
  background-color: transparent;
}

.navigation.active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.navigation {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100%;
  z-index: 3;
  width: 320px;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);

  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;

}

.navigation ul {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  background: #222;
}
.navigation ul li {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}
.navigation ul li a {
  display: block;
  height: 100%;
  padding: 10px 0;

  text-decoration: none;
  text-transform: uppercase;
  color: white;
  font-weight: 900;
}

.navigation ul li a.current,
.navigation ul li a:hover {
  color: #222;
  background-color: white;
}


/* =Hero
-------- */


.hero {
  padding: 0;
  min-height: 500px;
  text-align: left;
  position: relative;
  /*background-color: #d56d4d;*/ /* layer fill content */
  color: white;
}
.hero-image {
  background: url("/Images/Site_IntroPage_Images/InSearchOFrontPage.jpg") no-repeat;
  background-size: cover;
  background-position: 50% 0%;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /*opacity: .9;*/
}
.hero-image:after {
  content: '';
  /*opacity: .87;*/ /* layer alpha */
  /*
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); !* gradient overlay *!
  background-image: -moz-linear-gradient(right, #bb4242 0%, #efab4a 100%); !* gradient overlay *!
  background-image: -o-linear-gradient(right, #bb4242 0%, #efab4a 100%); !* gradient overlay *!
  background-image: -webkit-linear-gradient(right, #bb4242 0%, #efab4a 100%); !* gradient overlay *!
  background-image: linear-gradient(right, #bb4242 0%, #efab4a 100%); !* gradient overlay *!
  */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.hero h2 {
  font-size: 24px;
}

.hero p {
  padding: 0 15%;
}
.hero .separator:before {
  background-color: white;
}

/*Contact*/

.contact-us {
  background-color: #f2f2f2;
  color: Black;
  text-align: left;
}
.contact-us-details {
  padding: 70px;
}
.contact-us-details h5 {
  font-size: 2rem;
}
.contact-us-details .social-links a {
  color: #222;
  display: block;
}

.contact-us-details .social-links li {
  list-style: none;
  float: left;
  font-size: 24px;
  margin-right: 10px;
}
.contact-us-details .social-links li:last-child {
  margin-right: 0;
}
.contact-us-form {
  padding: 70px;
  background-color: #e4e4e4;
}
.contact-us .row {
  margin: 0;
}

/* Work */


/* Work Filters */

.work-filters {
  list-style: none;
}
.work-filters li {
  display: inline-block;
  margin: 0 .5em;
  font-size: 18px;
  text-transform: uppercase;
  font-family: "slim_joeregular";
}
.work-filters li a {
  color: inherit;
  text-decoration: none;
}
.work-filters li.active {
  font-family: "big_johnregular"
}

/* Work items */

.work-items {
  list-style: none;
  width: 100%;
  display: inline-block;
}
.work-items li {
  position: relative;
  overflow: hidden;
  height: 360px;

  /* important because we need to overwrite the default skeleton */
  margin: 0!important;
  width: 33%;
  border: 10px solid white;

  position: relative;
}
.work-items li:nth-child(4n) {
  margin-left: 0;
}
.work-items li img{
  width: auto;
  height: 100%;
  display: block;
}

/* Work detail */

.work-detail {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;

  opacity: 0;
  background: rgba(0,0,0,.75);
  color: white;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.work-detail h3 {
  font-size: 16px;
  letter-spacing: .05em;
}
.work-detail p {
  font-size: 20px;
  text-transform: capitalize;
  padding-left: 20px;
  padding-right: 20px;
}

.work-items li:hover .work-detail{
  opacity: 1;
  box-shadow: inset 0 0 0 10px #222;
}

/* ARt Block */
.ARt:before {
  background: url("../images/frontpage/ARt-bg.png");
}

.ARt-shop-prints {
  font-family: Georgia, serif;
  color: #f8594e;
  text-decoration: none;
}

.ARt-shop-prints h2 {
  font-weight: bolder;
}

.ARt-subheading {
  font-family: Georgia, serif;
  color: #000000;
  font-weight: bolder;
}

/* Feature Print Block */
.featured-print-text {
  color: lightslategray;
  text-align: left;
}

/* Featured News Block */
.featured-news {
  background-color: #131313;
}

/* Introduction Block */
.introduction {
  background-color: #131313;
}

/* Clients */
.clients {
  list-style: none;
}
.clients li {
  display: inline-block;
  width: 18%;
  margin-right: 2%;
}
.clients li:last-child {
  margin-right: 0;
}
.clients li img {
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-filter: greyscale(100%);
  -moz-filter: greyscale(100%);
  filter: greyscale(100%);
}

/* About */
.people-list {
  list-style: none;
  margin: 70px 0;
  width: 100%;
}
.people-list li {
  position: relative;
  height: 300px;
  overflow: hidden;
}
.people-list li img {
  width: auto;
  height: 100%;
  display: block;
}

.people-list .people-hover {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.45);

  opacity: 0;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.people-list .people-hover a {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
}

/* About people details */

.people-list .people-detail {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 0 20px;
  z-index: 1;
  color: white;
}
.people-list .people-detail h3 {
  font-size: 22px;
  margin-bottom: 0;
}
.people-list .people-detail p {
  font-size: 16px;
}

/* Feature people hiring */

.people-list li.blank-feature{
  box-shadow: inset 0 0 0 3px #222;
}
.people-list li.blank-feature img {
  visibility: hidden;
}
.people-list li.blank-feature h3 {
  font-size: 26px;
}


.people-list li:hover .people-hover{
  opacity: 1;
  box-shadow: inset 0 0 0 5px #222;
}


/* Services */
.services {
  list-style: none;
  margin: 70px 0;
}
.services .service-image {
  height: 150px;
  margin-bottom: 20px;
}
.services .service-image img{
  display: table-cell;
  display: block;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;

}
.services h5 {

}
.services p {
  font-size: 16px;
  letter-spacing: 0;
}

/* Work tiles that link through to a series page: the tile keeps the section's
   own colour rather than Skeleton's link blue. */

.services a {
  color: inherit;
  text-decoration: none;
}

.services a img {
  -webkit-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
}

.services a:hover img,
.services a:focus img {
  opacity: .75;
}

/* Add some content at the bottom of the video/page */
.bgImageContent {
  position:absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 10px;
}

.bgImageContent h1 {
  line-height: 0.8em;
}
.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons secion and style it
there.
*/


/* Larger than mobile */
@media (max-width: 400px) {
  .button.inverted {
    padding: 15px;
  }
}
@media (min-width: 400px)  and (max-width: 750px) {
  .work-items li.isotope-item.columns {
    width: 100%;
  }
  .people-list li.people-list-item.columns {
    width: 46%;
    margin: 2%;
    box-sizing: content-box;
  }
  .contact-us-details {
    padding: 70px 25px;
    text-align: center;
  }
  .contact-us-details .social-links li {
    text-align: center;
    width: 33%;
    margin: 0;
  }
  .contact-us-details h5 {
    font-size: 1.7rem;
  }

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) and (max-width: 750px) {

  .work-items li.isotope-item.columns {
    width: 50%;
  }
}

/* Larger than tablet */
@media (min-width: 750px) {
}

/* Larger than desktop */
@media (min-width: 1000px) {
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}
/* =Artwork pages (zoomable tiled images)
-------- */

.artwork {
  padding: 90px 0 60px;
}

.artwork-title {
  margin-bottom: .2em;
  font-size: 34px;
  text-transform: uppercase;
}

/* Not uppercased: the "ARt" wordmark has to keep its own casing. */

.artwork-meta {
  margin-bottom: 1.4em;
  color: #8c8c8c;
  font-size: 14px;
  letter-spacing: .1em;
}

/* The viewer fills the grid column it sits in and is given a definite,
   viewport-based height. OpenSeadragon fills that box with an absolutely
   positioned canvas and letterboxes the plate on its own dark ground (which
   matches the #111 background), so a fixed height reads cleanly for portrait
   and landscape plates alike. A definite height is also what keeps this robust
   in Safari: sizing the box by aspect-ratio alone let Safari collapse it — the
   canvas has no in-flow height — and paint down over the description. overflow
   is clipped so nothing can escape the box regardless. */

.artwork-viewer {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 320px;
  max-height: 900px;
  overflow: hidden;
  background-color: #111;
  border: 1px solid #2a2a2a;
}

.artwork-hint {
  margin: .8em 0 0;
  color: #8c8c8c;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.artwork-description {
  margin-top: 30px;
  padding: 34px 36px;
  background-color: #131313;
  border: 1px solid #2a2a2a;
  line-height: 1.75;
}

.artwork-description h4 {
  margin-bottom: .8em;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* The prose reads left aligned and at a comfortable measure, even though the
   surrounding section centres everything else. */

.artwork-description p {
  max-width: 42em;
  margin: 0 auto 1.2em;
  text-align: left;
}

.artwork-description p:last-child {
  margin-bottom: 0;
}

/* Smaller than phablet */
@media (max-width: 749px) {
  .artwork {
    padding: 75px 0 40px;
  }
  .artwork-title {
    font-size: 26px;
  }
  .artwork-viewer {
    height: 62vh;
    min-height: 260px;
  }
  .artwork-description {
    margin-top: 24px;
    padding: 24px 20px;
  }
}

/* =Category pages (a series index linking to its plates)
-------- */

.category-intro {
  max-width: 42em;
  margin: 0 auto 2.5em;
  line-height: 1.75;
  color: #c9c9c9;
}

.work-grid {
  list-style: none;
  margin: 0;
}

.work-grid li {
  margin-bottom: 30px;
}

.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: #131313;
  border: 1px solid #2a2a2a;

  -webkit-transition: border-color .25s ease-in-out, -webkit-transform .25s ease-in-out;
  transition: border-color .25s ease-in-out, transform .25s ease-in-out;
}

.work-card:hover,
.work-card:focus {
  border-color: #6f6f6f;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}

/* Fixed-height window so plates of different shapes line up as a grid; the
   full-resolution image is cropped by the browser rather than on disk. */

.work-card-image {
  display: block;
  overflow: hidden;
  height: 240px;
  background-color: #111;
}

.work-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;

  -webkit-transition: -webkit-transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
}

.work-card:hover .work-card-image img,
.work-card:focus .work-card-image img {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

.work-card-body {
  display: block;
  padding: 22px 18px;
}

.work-card-title {
  display: block;
  font-family: "big_johnregular", "Raleway", Helvetica, Arial, sans-serif;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.work-card-meta {
  display: block;
  margin-top: .7em;
  color: #8c8c8c;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Smaller than phablet */
@media (max-width: 749px) {
  .work-card-image {
    height: 200px;
  }
}