@font-face {
  font-family: 'Bariol-Light';
  src: url('Bariol-Light.eot?#iefix') format('embedded-opentype'),  url('Bariol-Light.otf')  format('opentype'),
       url('Bariol-Light.woff') format('woff'), url('Bariol-Light.ttf')  format('truetype'), url('Bariol-Light.svg#Bariol-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Bariol-Regular';
  src: url('Bariol-Regular.eot?#iefix') format('embedded-opentype'),  url('Bariol-Regular.otf')  format('opentype'),
       url('Bariol-Regular.woff') format('woff'), url('Bariol-Regular.ttf')  format('truetype'), url('Bariol-Regular.svg#Bariol-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Bariol-Bold';
  src: url('Bariol-Bold.eot?#iefix') format('embedded-opentype'),  url('Bariol-Bold.otf')  format('opentype'),
       url('Bariol-Bold.woff') format('woff'), url('Bariol-Bold.ttf')  format('truetype'), url('Bariol-Bold.svg#Bariol-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}







@charset "UTF-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit; }

/* HTML5 display-role reset for older browsers */


table {
  border-collapse: collapse;
  border-spacing: 0; }

/* form resets */
input,
textarea {
  border: 0; }

/* lets use a sensible box model
   REFERENCE: http://paulirish.com/2012/box-sizing-border-box-ftw */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

/* =vendor_enhancements -------------------------------------------------------------------------------------------------
	NOTE: Fix various browser issues, and switch some vendor specific nicities on/off
	----------------------------------------------------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  /* using kerning and ligatures http://www.aestheticallyloyal.com/public/optimize-legibility/ */ }

/* fix webkit to stop it rendering text too thickly in cases where there is light text on dark backgrounds
   http://orderedlist.com/our-writing/blog/articles/webkit-font-smoothing/ */
body {
  -webkit-font-smoothing: antialiased; 
font-family: 'Bariol-Regular';}

a:link {
  -webkit-tap-highlight-color: #999; }

/* Don't collapse these into one ruleset. When a browser doesn't recognise a selector it discards the whole ruleset.
   By using vendor selectors in one ruleset you guarentee nothing will be applied */
::-webkit-selection {
  background-color: #999;
  color: #fff; }

::-moz-selection {
  background-color: #999;
  color: #fff; }

::selection {
  background-color: #999;
  color: #fff; }

::-webkit-input-placeholder {
  font-size: .875em;
  line-height: 1.4; }

input:-moz-placeholder {
  font-size: .875em;
  line-height: 1.4; }

/* kill input=search default styling on webkit
input[type=search] { -webkit-appearance : none; }
input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
	display: none; } */
/* =typography ----------------------------------------------------------------------------------------------------------
	NOTE:       I've found that margin-top applied to everything is a pain - it often messes up layout and requires jumping
	            through hoops to fix, so I've stopped doing this as a default and now add top margin manually when required.
	REFERENCE:  Based on http://alistapart.com/articles/settingtypeontheweb/
	                     http://24ways.org/2006/compose-to-a-vertical-rhythm/
	----------------------------------------------------------------------------------------------------------------------- */
/* scss:
	font-stacks */
.h1, .main-item h2 {
  font-size: 34px;
  line-height: 32px;
 font-family: 'Bariol-Regular';
  font-weight: normal;
  color: #3e3e3e; }

.h2, .main-item h3, .connect form h2 {
  font-size: 30px;
  line-height: 26px;
  font-family: 'Bariol-Regular';
  font-weight: normal;
  color: #3e3e3e; }

.h3, .main-item h4 {
  font-size: 20px;
  line-height: 26px;
  font-family: 'Bariol-Regular';
  font-weight: bold;
  color: #3e3e3e; }

.h4, .main-item h5, .profile-company .history h2,
.profile-person .history h2, .profile-company .the-team h2,
.profile-person .the-team h2, .profile-company .awards h2,
.profile-person .awards h2 {
  font-size: 20px;
  line-height: 26px;
 font-family: 'Bariol-Regular';
  font-weight: bold;
  color: #b7b7b7; }

.h5, .main-item h6 {
  font-size: 16px;
  line-height: 24px;
  font-family: 'Bariol-Regular';
  font-weight: bold;
  color: #3e3e3e; }

	/* custom fonts
	   NOTE: Don't use the normal FontSquirrel CSS! Do this instead:
	         http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple

	         Other tips and tricks from here:
	         http://vimeo.com/69531448
	         https://docs.google.com/viewer?url=http%3A%2F%2Fcomplexspiral.com%2Fevents%2Farchive%2F2013%2Fcssday%2Ffontface.pdf */
/* Karla */





html, input, select, textarea {
  /* font-size: 16px, line-height: 22px */
  font-family: 'Bariol-Regular';
  /* hyphenations now work! http://www.quirksmode.org/blog/archives/2012/11/hyphenation_wor.html */
  hyphens: none;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none; }

h1, h2, h3, h4, h5, h6 {
  /* em fallback */
  margin-top: 1.675em;
  margin-bottom: 1.675em;
  margin-top: 1.675rem;
  margin-bottom: 1.675rem;
  font-weight: normal;
  /* Get fancy font features working: http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx */
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga", "dlig";
  -webkit-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig"; }

p, ul, ol, blockquote {
  /* em fallback */
  margin-bottom: 1.375em;
  margin-bottom: 1.375rem; }

/* =base_rules ----------------------------------------------------------------------------------------------------------
	NOTE:  This section styles "default" elements, that is, how a <p> or <em> etc look by default, without
	       any page or class specific over-rides.
	----------------------------------------------------------------------------------------------------------------------- */
/* =html =body */
html {
  background-color: #fff;
  color: #3e3e3e; }

body {
  padding-bottom: 80px;
  font-family: 'Bariol-Regular';
  background: url(../images/view-yellow.png) 0 0 repeat-x, url(../images/view-yellow.png) 0 100% repeat-x;
  /* padding for the stripes */ }
  @media screen and (max-width: 929px) {
    body {
      padding-top: 20px;
      padding-bottom: 20px; 
      font-family: 'Bariol-Regular';} }

/* =q */
q,
blockquote > p:first-child,
blockquote > p:last-child {
  quotes: '“' '”' '‘' '’'; }

/* open then close, then new nesting level */
q:before,
blockquote > p:first-child:before {
  content: open-quote; }

q:after,
blockquote > p:last-of-type:after {
  content: close-quote; }

/* =sup */
sup {
  vertical-align: top;
  font-size: .75em; }

strong {
  font-weight: bold; }

/* =sub */
sub {
  vertical-align: bottom;
  font-size: .75em; }

/* =code */
code {
  font: .85em/1 Courier, monospace;
  color: #006; }

/* =a */
a:link,
a:visited {
  color: inherit;
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

a:focus {
  box-shadow: 0 0 6px white;
  background-color: #fff;
  outline: 0; }

:target:before {
  content: url(../images/attention.png);
  position: absolute; }

/* =img */
img {
  max-width: 100%; }

#target_hilight {
  position: absolute; }

a img {
  margin: 0; }

/* =table */
tbody tr:nth-child(2n+1) {
  background-color: rgba(0, 0, 0, 0.1); }

/* =forms */
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  padding: .4em .6em;
  border: 1px solid #ebeaea;
  width: 100%;
  margin-bottom: 20px;
  background-color: #ebeaea;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
  background-color: white;
  box-shadow: 0 0 10px white;
  outline: 0; }

label span {
  border-bottom: 1px solid #ebeaea;
  margin-bottom: 10px;
  color: #898a8a;
  line-height: 26px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s; }

label.boolean span {
  border-bottom: 0;
  margin-bottom: 0;
  text-transform: none;
  color: inherit; }

label.focus span {
  color: #000; }

/* =div */
/* =span */
label span {
  display: block; }

label.boolean span {
  display: inline; }

/* =display-classes -----------------------------------------------------------------------------------------------------
  NOTE: Re-usable / extendable styles which can be used in SASS or HTML. Do not use these for module/page layout!
  ----------------------------------------------------------------------------------------------------------------------- */
/* left or right */
.dc_left {
  float: left;
  margin-right: 1em; }

.dc_right {
  float: right;
  margin-left: 1em; }

/* big and small */
.dc_small {
  width: 20%; }

.dc_medium {
  width: 40%; }

.dc_large {
  width: 60%; }

/* hiding things */
.dc_hide-text, .site_context a {
  text-indent: -999em;
  overflow: hidden; }

.dc_hide-element {
  position: absolute;
  left: -999em;
  overflow: hidden; }

/* clearing things */
.dc_clearfix, .social ul, .nav_portfolio ul,
.nav_words ul, .profile-company .the-team ul,
.profile-person .the-team ul {
  zoom: 1; }
  .dc_clearfix:after, .social ul:after, .nav_portfolio ul:after,
  .nav_words ul:after, .profile-company .the-team ul:after,
  .profile-person .the-team ul:after {
    content: "";
    display: table;
    clear: both; }

/* make lists horizontal */
.dc_horizontal-list {
  margin: 0;
  list-style-type: none; }
  .dc_horizontal-list li {
    float: left;
    margin: 0; }

/* =intro-paragraphs */
.dc_intro-para, .main-item > p:first-child, blockquote, .portfolio-item .description > p:first-child, .words-item .description > p:first-child, .connect .offline .intro, .profile-company .intro .text > p:first-child,
.profile-person .intro .text > p:first-child {
  background: url(../images/_baseline-32.png);
   font-family: 'Bariol-Regular';
  font-size: 22px;
  line-height: 32px;
  font-weight: normal;
  color: #3e3e3e; }


.dc_sub-heading, .words-archive .main-item .text p.dc_sub-heading {
  margin: 0;
  font-size: 14px; }

/* =external_site */
.external_site {
  padding: 2px 5px;
  background-color: #eee; }

/* =content_adaption ----------------------------------------------------------------------------------------------------
	 Give JS a hook to see what size screen the user has, and employ any required DOM manipulation
	 See: http://adactio.com/journal/5429/
	 ---------------------------------------------------------------------------------------------------------------------- */
body:after {
  font-size: 0;
  visibility: hidden;
  content: 'breakpoint_1'; }

@media all and (min-width: 630px) {
  body:after {
    content: 'breakpoint_2'; } }
@media all and (min-width: 930px) {
  body:after {
    content: 'breakpoint_3'; } }
@media all and (min-width: 1230px) {
  body:after {
    content: 'breakpoint_4'; } }
/* =modules -------------------------------------------------------------------------------------------------------------
  NOTE: Modules are discrete sections of data that may be used on any page, e.g., "Latest News"
        You should only be specifying how a module looks, not how it is laid out / positioned
  ----------------------------------------------------------------------------------------------------------------------- */
/* =the-simon-line */
.the-simon-line {
  max-width: 1220px;
  margin: 0 auto; }
  @media all and (min-width: 320px) {
    .the-simon-line {
      max-width: 320px; } }
  @media all and (min-width: 630px) {
    .the-simon-line {
      max-width: 620px; } }
  @media all and (min-width: 930px) {
    .the-simon-line {
      max-width: 920px; } }
  @media all and (min-width: 1230px) {
    .the-simon-line {
      max-width: 1220px; } }

/* =pagination-indicator */
.news-paging-bar {
  position: relative; }
  .news-paging-bar .right {
    float: right;
    z-index: 1; }
  .news-paging-bar .left {
    z-index: 1; }
  .news-paging-bar .bar {
    position: absolute;
    top: 0;
    display: none;
    width: 100%;
    padding: 0 120px; }
    .news-paging-bar .bar #bar-image {
      position: relative;
      width: 100%;
      height: 27px;
      background: url("../images/nav-line.png"); }
    .news-paging-bar .bar img {
      position: absolute;
      top: 9px;
      right: 0px; }
    .news-paging-bar .bar span {
      display: none; }
    .news-paging-bar .bar.active {
      display: block; }

/* =section */
.section {
  padding: 0 20px; }
  .section > .container {
    max-width: 1180px;
    margin: 0 auto; }

/* =website header */
.site_context {
  margin-bottom: 0;
  padding-top: 30px; }
  .site_context .heading {
    margin: 0; }
  .site_context a {
    position: relative;
    display: block;
    width: 248px;
    height: 48px;
    background: url(../images/logoimece.png) no-repeat;
    background-size: 248px 48px; }
    .site_context a:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 111px;
      height: 6px;
      background-color: white;
      opacity: 0; }
    .site_context a:hover:after, .site_context a:focus:after {
      opacity: 1;
      animation: slide-out-left 1s ease-in-out 0s infinite normal both; }
  @media all and (min-width: 930px) {
    .site_context {
      padding-top: 60px;
      padding-bottom: 60px; } }
  @media all and (min-width: 1230px) {
    .site_context {
          padding-top: 75px;
    padding-bottom: 0px; } }

/* =footer_intro */
.footer_intro {
  margin-bottom: 40px; }
  .footer_intro > div {
    border-top: 1px solid #dfdfdf; }
    .footer_intro > div div {
      padding-top: 20px; }
      .footer_intro > div div *:last-child {
        margin-bottom: 0; }
  .footer_intro h3 {
    position: relative;
    display: block;
    padding: 4px 0;
    font-weight: bold; }
  .footer_intro a {
    color: inherit; }
    .footer_intro a:hover {
      background-color: #fef200; }
  .footer_intro .attention {
    font-weight: bold; }
  @media all and (min-width: 630px) {
    .footer_intro .container {
      overflow: hidden; }
      .footer_intro .container > div {
        float: left;
        width: 48%; }
        .footer_intro .container > div:nth-child(2n+2) {
          margin-left: 4%; } }
  @media all and (min-width: 930px) {
    .footer_intro .container > div {
      float: left;
      width: 23%; }
      .footer_intro .container > div:nth-child(2n+2) {
        margin-left: 0; }
      .footer_intro .container > div:nth-child(2) {
        margin-left: 2%;
        margin-right: 2%; }
      .footer_intro .container > div:nth-child(3) {
        margin-right: 2%; }
    .footer_intro h3 {
      font-size: 20px; } }
  @media all and (min-width: 1230px) {
    .footer_intro .container {
      padding-top: 30px;
      padding-bottom: 20px; } }

/* =social-bloody-media */
.social ul {
  text-align: left; }
.social li {
  display: inline-block;
  list-style-type: none;
  margin-left: 10px; }
  .social li:first-child {
    margin-left: 0; }
.social img {
  display: block;

  width: 30px;
  }
.social a {
  display: block; }

/* =footer_legal */
.footer_legal > div {
  padding-top: 90px;
  border-bottom: 1px solid #dfdfdf;
  border-top: 1px solid #dfdfdf;
  background: url(../images/logo_vca.png) no-repeat 0 40px;
  background-size: 248px 33px;
  font-size: 15px; }
.footer_legal .tel:before,
.footer_legal .legal span:before {
  content: "  "; }
.footer_legal .legal span:first-child:before {
  content: ""; }
.footer_legal .legal {
  font-size: 12px; }
@media all and (min-width: 930px) {
  .footer_legal .vcard {
     margin-bottom: 0;
    width: 400px;
    margin: 0 auto;}





  .footer_legal > div {
    padding-top: 29px;
    padding-left: 259px; } }
@media all and (min-width: 1230px) {
  .footer_legal .container {
    position: relative; }
  .footer_legal > div {
    padding-top: 15px;
    padding-bottom: 15px;
    background-position: 0 15px; }
  .footer_legal .social {
    position: absolute;
    top: 15px;
    right: 0; } }

/* =footer_work-types */
.footer_work-types {
  font-size: 14px; }
  .footer_work-types > div {
    padding-top: 5px; }
  .footer_work-types p {
    font-weight: bold; }
  .footer_work-types li {
    display: inline;
    list-style-type: none; }
  .footer_work-types li:before {
    content: ", "; }
  .footer_work-types li:first-child:before {
    content: ""; }
  @media all and (min-width: 630px) {
    .footer_work-types {
      padding-bottom: 20px; }
      .footer_work-types p, .footer_work-types ul {
        display: inline;
        font-size: 10px; } }


.tel{font-size: 27px;}
/* =nav_main */
.nav_main {
  padding-top: 40px;
  padding-bottom: 20px;
  font-size: 17px;
   font-family: 'Bariol-Light';
  /* animation */ }
  .nav_main ul {
    margin-bottom: 0; }
  .nav_main li {
    position: relative;
    list-style-type: none;
    display: inline-block;
    margin: 0 0.75em 1em 0;
    padding: 0;
    overflow: hidden; }
    .nav_main li:last-child {
      margin-right: 0; }
  .nav_main span {
    position: absolute;
    bottom: 0px;
    left: 0;
    display: block;
    width: 0;
    height: 4px;
    background-color: transparent;
    z-index: 2;
    -webkit-transition: all .15s;
    transition: all .15s; }
  .nav_main a {
    display: block;
    padding: 4px 0;
    overflow: hidden;
    color: #3e3e3e;
        font-weight: 600;
    -webkit-transition: all .15s;
    transition: all .15s; }
    .nav_main a:hover {
      text-decoration: none;
      border-color: #000; }
  .nav_main li:hover span,
  .nav_main li.focus span,
  .nav_main li.selected span {
    width: 100%;
    background-color: #3e3e3e; }
  @media all and (min-width: 630px) {
    .nav_main a {
      letter-spacing: .05em; } }
  @media all and (min-width: 930px) {
    .nav_main {
      float: right;
      margin-top: -82px;
      padding-top: 0;
      text-align: right; } }
  @media all and (min-width: 1230px) {
    .nav_main {
      margin-top: -47px; } }

/* =nav_portfolio */
.nav_portfolio,
.nav_words {
     margin: 40px 0 0;
    /* border-top: 1px solid #dfdfdf; */
    font-size: 14px;
    font-family: 'Bariol-Regular';
    text-transform: uppercase;
    padding: 0 20px; }
  .nav_portfolio ul,
  .nav_words ul {
    margin-bottom: 0; }
  .nav_portfolio li,
  .nav_words li {
    position: relative;
    float: left;
    list-style-type: none;
    display: block;
    margin: 0 1em 0 0;
    padding: 0;
    overflow: hidden; }
    .nav_portfolio li:last-child,
    .nav_words li:last-child {
      margin-right: 0; }
    .nav_portfolio li:first-child a:after,
    .nav_words li:first-child a:after {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-left: 1em;
      background: url(../images/nav-point.png) 0 0 no-repeat; }
  .nav_portfolio a,
  .nav_words a {
    display: block;
    padding: 4px 0;
        font-size: 15px; }
  .nav_portfolio .selected a:after,
  .nav_words .selected a:after {
    position: relative;
    content: "";
    display: block;
    width: 100%;
    height: 1em;
    margin-top: -1.25em;
    z-index: -1;
    background-color: #fef200; }

/* =popup */
.popup {
  margin-bottom: 1.375em;
  margin-bottom: 1.375rem; }
  .popup > a, .popup > img {
    display: block; }
  .popup.captioned {
    padding: .5em;
    background-color: rgba(255, 255, 255, 0.8); }
  .popup .caption {
    font-size: .85em;
    margin: .5em 0 0; }

/* =masonry */
.x1 {
  width: 130px; }

.x2 {
  width: 280px; }

.x3 {
  width: 430px; }

.x4 {
  width: 580px; }

.x5 {
  width: 730px; }

.x6 {
  width: 880px; }

.y1 {
  height: 130px; }

.y2 {
  height: 280px; }

.y3 {
  height: 392px; }

.y4 {
  height: 580px; }

.y5 {
  height: 730px; }

.y6 {
  height: 880px; }

.masonry {
  /* animation */
  /* touch devices */ }
  .masonry .item,
  .masonry img,
  .masonry a {
    display: block;
    font-size: 15px;
    color: #fff; }
  .masonry .item {
    margin-bottom: 20px;
    overflow: hidden; }
    .masonry .item > a > div *:last-child {
      margin-bottom: 0; }
    .masonry .item.text:nth-of-type(4) a {
      background: transparent url(../images/stripe.jpg) 0 0; }
    .masonry .item.text {
      font-size: 18px; }
      .masonry .item.text a {
        display: block;
        width: 100%;
        height: 100%;
          background-color: #3e3e3e;
    color: #ffffff;
        -webkit-transition: .3s .1s all;
        transition: .3s .1s all; }
        .masonry .item.text a div {
          display: block;
          width: 100%;
          height: 100%;
          padding: 20px 30px;
          -webkit-transition: .3s .1s all;
          transition: .3s .1s all;
           font-family: 'Bariol-Light';
          font-size: 17px;
          line-height: 22px;
          letter-spacing: 0.05em; }
          .masonry .item.text a div p:first-child {
           
                margin-bottom: 40px;
    font-family: 'Bariol-Regular';
    color: #fdb823;
    font-size: 20px;}
            .masonry .item.text a div p:first-child:after {
              content: "";
              display: block;
              margin-bottom: 18px;
              position: relative;
              top: 10px;
              width: 34px;
              height: 6px;
                  background-color: #fdb823; }
      .masonry .item.text a:hover {
        text-decoration: none; }
        .masonry .item.text a:hover div {
          background-color: #3e3e3e;
          color: #fff;
          -webkit-transition: .3s .1s all;
          transition: .3s .1s all; }
          .masonry .item.text a:hover div p:first-child {
            color: #fef200; }
            .masonry .item.text a:hover div p:first-child:after {
              background-color: #fef200; }
      .masonry .item.text .dc_heading_2 {
        margin-bottom: 4px; }
    .masonry .item.image.black > a > div {
      background-image: url(../images/slash-black.png);
      color: white; }
      .masonry .item.image.black > a > div p:first-child:before {
        background-color: #fef200; }
    .masonry .item.image > a > div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 30px;
      background: url(../images/slash.png) 0 0 no-repeat;
      background-size: 280px;
      opacity: 1;
      transform: translate3d(-100%, 0, 0);
      -ms-transform: translateX(-100%);
      -webkit-transition: 1s all;
      transition: 1s all; }
      .masonry .item.image > a > div h2 {
        margin: 0;
        font-weight: bold;
         font-family: 'Bariol-Light';
        font-size: 22px;
        -webkit-transition: 1s all;
        transition: 1s all; }
      .masonry .item.image > a > div .category {
        font-size: 15px; }
      .masonry .item.image > a > div div {
        position: absolute;
        bottom: 20px;
        left: 20px;
        padding-right: 80px;
        opacity: 0;
        -webkit-transition: .3s .1s all;
        transition: .3s .1s all; }
        .masonry .item.image > a > div div p:first-child {
          position: relative;
          margin-bottom: 0;
          font-size: 20px; }
          .masonry .item.image > a > div div p:first-child:before {
            position: absolute;
            top: -20px;
            left: 0;
            content: "";
            display: block;
            width: 34px;
            height: 6px;
            background-color: #3c3c3c; }
    .masonry .item.image.y3 > a > div {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 1;
      transform: translate3d(0, 100%, 0); }
    .masonry .item.image.x4.y3 > a > div {
      position: absolute;
      bottom: 0;
      left: 0;
      top: auto;
      right: auto;
      width: 100%;
      height: auto;
      padding: 0;
      transform: translate3d(0px, 0px, 0px);
      background-image: none;
      color: #3e3e3e !important; }
      .masonry .item.image.x4.y3 > a > div div {
        position: relative;
        top: 0;
        left: 0;
        bottom: 0;
        opacity: 1;
        padding: 0; }
        .masonry .item.image.x4.y3 > a > div div p:first-child {
          position: relative;
          margin-bottom: 0; }
    @media screen and (max-width: 629px) {
      .masonry .item.image.x4.y3 {
        display: none; } }
    .masonry .item.video {
      position: relative; }
      .masonry .item.video a {
        position: absolute;
        bottom: 0;
        left: 0;
        width: auto;
        height: auto;
        padding: 0;
        -webkit-transition: 1s all;
        transition: 1s all; }
        .masonry .item.video a h2 {
          margin: 0;
          font-weight: bold;
          -webkit-transition: 1s all;
          transition: 1s all; }
        .masonry .item.video a div {
          padding-top: 10px; }
          .masonry .item.video a div p:first-child {
            position: relative;
            margin-bottom: 0; }
            .masonry .item.video a div p:first-child:before {
              position: absolute;
              top: -25px;
              left: 0;
              content: url(../images/tiny-line.png); }
      @media screen and (max-width: 629px) {
        .masonry .item.video {
          display: none; } }
  .masonry a {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; }
  .masonry .item.image a:hover div {
    -webkit-transition: .15s all;
    transition: .15s all; }
  .masonry .item.image a:hover div,
  .masonry .item.image a:hover div * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transform: translateX(0); }
  .touch .masonry .item.image a div,
  .touch .masonry .item.image a div * {
    opacity: 1;
    transform: translate3d(0, 0, 0); }

/* =page_intro */
.page_intro .dc_sub-heading, .page_intro .words-archive .main-item .text p.dc_sub-heading, .words-archive .main-item .text .page_intro p.dc_sub-heading {
display: block;
    word-wrap: break-word;
    /* font-family: 'Oswald', sans-serif; */
    font-weight: bold;
    color: #000;
    border-bottom: 2px solid #D9DCDD;
    /* max-width: 1600px; */
    margin: 0 auto;
    text-transform: uppercase;
    width: 92%;
    padding-bottom: 16px;
    clear: both;
    text-align: center;
    letter-spacing: 3px;
    margin-top: -0.375em;
    color: #a38a6f;
    font-size: 25px; }
.page_intro ul {

  border-bottom: 1px solid #dfdfdf; }
.page_intro li {
  display: inline; }


.page_intro a {
      position: relative;
    display: inline-block;
    padding: 3px 0;
    font-size: 17px;
    font-family: 'Bariol-Light' !important;
    font-weight: bolder;}
  .page_intro a:hover {
    color: #898a8a; }
.page_intro h1.h1 {
  margin-top: 0; }
.page_intro p.dc_sub-heading, .page_intro .words-archive .main-item .text p.dc_sub-heading, .words-archive .main-item .text .page_intro p.dc_sub-heading {
  margin-top: 20px; }
.page_intro .selected a:after {
  position: relative;
  content: "";
  display: block;
  width: 100%;
  height: 25px;
  margin-top: -1.25em;
  z-index: -1;
  background-color: #fef200; }
@media all and (min-width: 930px) {
  .page_intro {
    margin-bottom: 40px; } }
@media all and (min-width: 1230px) {
  .page_intro { margin-bottom: 20px; } }

/* =main_item */
.main-item ul li {
  padding-left: 20px;
  background: url(../images/list-item.png) 0 4px no-repeat;
  list-style-type: none; }
.main-item ol {
  counter-reset: li;
  margin-left: 0;
  padding-left: 0; }
  .main-item ol li {
    position: relative;
    padding-left: 2em;
    list-style: none; }
    .main-item ol li:before {
      content: counter(li) ".";
      counter-increment: li;
      position: absolute;
      left: 0;
      color: #b7b7b7;
      font-weight: bold; }

/* =blockquote */
blockquote {
  position: relative;
  padding: 32px 0 0 0;
  max-width: 280px; }
  blockquote:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 28px;
    height: 32px;
    background: url(../images/blockquote.png) no-repeat; }
  @media all and (min-width: 630px) {
    blockquote {
      float: left;
      margin-right: 40px; } }

/* =youtube */
.embed-container {
  position: relative;
  max-width: 100%;
  height: 0;
  padding: 30px 0 56.25%;
  margin-bottom: 20px;
  overflow: hidden; }
  .embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  @media all and (min-width: 930px) {
    .embed-container {
      width: 880px; } }

/* =honeypot */
#form1_hello {
  display: none; }

/* =page ----------------------------------------------------------------------------------------------------------------
  NOTE: Styling specific to a given page (alterations to appearance of modules on a specific page + layout)
  ----------------------------------------------------------------------------------------------------------------------- */
/* homepage */
.preload_cheat {
  display: none; }


html.js body.home {
  /* tweak animation speed & logo position */ }
  html.js body.home .loader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    overflow: hidden; }
  html.js body.home .page-items {
    opacity: 0; }
  html.js body.home .the-simon-line {
    z-index: 1;
    position: relative;
    opacity: 0; }
  html.js body.home #loading-message {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fef200;
    background: url(../images/large-vca-logo.png) 50% 120px no-repeat fixed, #fef200 url(../images/large-vca-loader.gif) 50% 120px no-repeat fixed;
    background-size: 155px auto, 155px auto; }
  html.js body.home #loading-mask-1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    transform: translate3d(0, 0, 0);
    background-color: white;
    animation: slide-out-left 0.25s ease-out 0s 1 normal both; }
  html.js body.home #loading-mask-2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    transform: translate3d(0, 100%, 0);
    background-color: white; }
  html.js body.home.load-complete .the-simon-line {
    opacity: 1; }
  html.js body.home.load-complete.slide-out-left-ended {
    background: url(../images/view-yellow.png) 0 0 repeat-x, url(../images/view-yellow.png) 0 100% repeat-x; }
    html.js body.home.load-complete.slide-out-left-ended .page-items {
      opacity: 1; }
    html.js body.home.load-complete.slide-out-left-ended #loading-message {
      animation: crush 0.25s ease-out 0.5s 1 normal both; }
  @media screen and (min-width: 640px) {
    html.js body.home #loading-message {
      background-position: 75% 75%, 75% 75%;
      background-size: auto auto, auto auto; }
    html.js body.home #loading-mask-1, html.js body.home.load-complete.slide-out-left-ended #loading-message {
      animation-duration: 0.5s; } }
  @media screen and (min-width: 930px) {
    html.js body.home #loading-mask-1, html.js body.home.load-complete.slide-out-left-ended #loading-message {
      animation-duration: 0.75s; } }

/* portfolio-item */
.portfolio-item .more-with-client h2 {
  border-bottom: 1px solid #dfdfdf;
  padding-bottom: 6px;
  padding-top: 20px;
  text-transform: uppercase;
  font-size: 13px;
   font-family: 'Bariol-Regular';
  font-weight: bold; }
.portfolio-item .more-with-client li {
  padding-left: 20px;
  background: url(../images/list-item.png) 0 4px no-repeat;
  list-style-type: none; }
.portfolio-item .images img,
.portfolio-item .images iframe {
  display: block;
  max-width: 100%;
  margin-bottom: 20px; }
@media all and (min-width: 930px) {
  .portfolio-item .images {
    width: 880px; } }
.portfolio-item .small {
  overflow: hidden; }
  .portfolio-item .small img {
    float: left;
    margin-left: 20px; }
    .portfolio-item .small img:nth-child(2n+1) {
      margin-left: 0; }
@media all and (min-width: 630px) {
  .portfolio-item .small img:nth-child(2n+1) {
    margin-left: 20px; }
  .portfolio-item .small img:nth-child(4n+1) {
    margin-left: 0; } }
@media all and (min-width: 930px) {
  .portfolio-item .intro {
    margin-bottom: 40px; }
  .portfolio-item .description {
    width: 630px; }
  .portfolio-item .small {
    overflow: hidden; }
    .portfolio-item .small img:nth-child(2n+1) {
      margin-left: 20px; }
    .portfolio-item .small img:nth-child(4n+1) {
      margin-left: 20px; }
    .portfolio-item .small img:nth-child(6n+1) {
      margin-left: 0; }
  .portfolio-item .medium {
    overflow: hidden; }
    .portfolio-item .medium img {
      float: left;
      margin-left: 20px; }
      .portfolio-item .medium img:nth-child(2n+1) {
        margin-left: 0; } }
@media all and (min-width: 1230px) {
  .portfolio-item .intro {
    margin-bottom: 60px; }
  .portfolio-item .description {
    float: left;
    width: 280px; }
  .portfolio-item .images {
    float: left;
    margin-left: 20px;
    margin-bottom: 60px; }
  .portfolio-item .nav_portfolio {
    clear: both; } }

/* words-archive */
.words-archive .nav_words li:first-child a:after {
  background-image: none; }
.words-archive .item {
  margin-bottom: 60px; }
  .words-archive .item h2 {
    margin: 0 0 20px 0; }
  .words-archive .item .meta {
    display: none; }
.words-archive .images {
  overflow: hidden; }
  .words-archive .images li {
    display: inline;
    padding: 0;
    background-image: none; }
    .words-archive .images li:nth-child(2n+1) a, .words-archive .images li:nth-child(2n+1) .popup-copy {
      margin-left: 0; }
  .words-archive .images a, .words-archive .images .popup-copy {
    float: left;
    display: block;
    margin-bottom: 20px;
    margin-left: 20px; }
  .words-archive .images img {
    display: block;
    max-width: 100%;
    width: 120px;
    margin: 0; }
@media all and (min-width: 630px) {
  .words-archive .item {
    overflow: hidden; }
    .words-archive .item .image {
      float: left;
      margin-right: 20px; }
    .words-archive .item img {
      display: block; }
    .words-archive .item .text {
      float: right;
      width: 260px; }
  .words-archive .images li:nth-child(2n+1) a, .words-archive .images li:nth-child(2n+1) .popup-copy {
    margin-left: 20px; }
  .words-archive .images li:nth-child(4n+1) a, .words-archive .images li:nth-child(4n+1) .popup-copy {
    margin-left: 0; } }
@media all and (min-width: 930px) {
  .words-archive .main-item {
    overflow: hidden; }
  .words-archive .list {
    float: left;
    width: 560px; }
  .words-archive .related {
    float: right;
    width: 400px; }
    .words-archive .related > h3 {
      margin-top: 0; }
  .words-archive .images li:nth-child(4n+1) a, .words-archive .images li:nth-child(4n+1) .popup-copy {
    margin-left: 20px; }
  .words-archive .images li:nth-child(3n+1) a, .words-archive .images li:nth-child(3n+1) .popup-copy {
    margin-left: 0; } }
@media all and (min-width: 1230px) {
  .words-archive .list {
    width: 754px; }
  .words-archive .item .text {
    float: right;
    width: 454px; }
    .words-archive .item .text h2 {
      margin-bottom: 15; }
    .words-archive .item .text .meta {
      display: block; } }

/* words-item */
.words-item .description a:hover {
  background-color: #fef200; }
.words-item .main-item p > img {
  height: auto; }
.words-item .images {
  overflow: hidden; }
  .words-item .images:hover a {
    opacity: .5; }
    .words-item .images:hover a img {
      -webkit-filter: grayscale(100%); }
    .words-item .images:hover a:hover {
      opacity: 1; }
      .words-item .images:hover a:hover img {
        -webkit-filter: grayscale(0); }
  .words-item .images li {
    display: inline;
    padding: 0;
    background-image: none; }
    .words-item .images li:nth-child(2n+1) a {
      margin-left: 0; }
  .words-item .images a {
    float: left;
    display: block;
    margin-bottom: 20px;
    margin-left: 20px;
    -webkit-transition: all .1s;
    transition: all .1s; }
  .words-item .images img {
    display: block;
    max-width: 100%;
    margin: 0; }
@media all and (min-width: 630px) {
  .words-item .images li:nth-child(2n+1) a {
    margin-left: 20px; }
  .words-item .images li:nth-child(4n+1) a {
    margin-left: 0; } }
@media all and (min-width: 930px) {
  .words-item .main-item {
    overflow: hidden; }
  .words-item .description {
    float: left;
    width: 560px; }
  .words-item .related {
    float: right;
    width: 280px; }
    .words-item .related > h3 {
      margin-top: 0; }
  .words-item .images li:nth-child(4n+1) a {
    margin-left: 20px; }
  .words-item .images li:nth-child(2n+1) a {
    margin-left: 0; } }
@media all and (min-width: 1230px) {
  .words-item .description {
    width: 680px; } }

/* connect */
.connect .featured h2, .connect .featured h3 {
  border-bottom: 1px solid #ebeaea;
  margin-bottom: 10px;
  color: #898a8a;
  font-size: 19px; }
.connect .image-and-map {
  margin-bottom: 40px;
  margin-top: 40px; }
  .connect .image-and-map img {
    display: block;
    max-width: 100%; }
  .connect .image-and-map a {
    display: block;
    overflow: hidden; }
    .connect .image-and-map a img {
      margin-top: -50%; }
.connect .offline > div {
  margin-bottom: 40px; }
.connect .direct strong {
  display: inline-block;
  width: 6.6em; }
.connect .image-grid {
  margin-bottom: 40px;
  overflow: hidden; }
  .connect .image-grid .image {
    display: block;
    margin-bottom: 20px; }
    .connect .image-grid .image:nth-child(3), .connect .image-grid .image:nth-child(4) {
      display: none; }
.connect .offline .social li {
  padding: 0;
  background: none; }
.connect form {
  margin-bottom: 80px; }
  .connect form h2 {
    border-bottom: 0; }
  .connect form .intro p:first-child {
    text-transform: none;
    background: none;
    font-weight: normal; }
  .connect form .boolean {
    display: block; }
  .connect form .your_preferences > input {
    margin: 20px 0;
    padding: .4em .6em;
    color: white;
    background-color: #3e3e3e;
    -webkit-transition: all .1s;
    transition: all .1s; }
    .connect form .your_preferences > input:hover {
      cursor: pointer;
      background-color: #444; }
@media all and (min-width: 630px) {
  .connect .image-grid .image {
    float: left; }
    .connect .image-grid .image:nth-child(1) {
      margin-right: 20px; }
  .connect .offline {
    overflow: hidden; }
    .connect .offline > div {
         float: left;
    width: 270px;
    margin-right: 20px;
    margin-left: 20px;}
      .connect .offline > div:nth-child(2n+1) {
        margin-left: 0; }
    .connect .offline .message h2 {
      margin-top: 0; }
  .connect form {
  /*  padding-top: 40px;
    border-top: 1px solid #dfdfdf; */
        margin-top: 6px;
    overflow: hidden; }
    .connect form textarea {
      height: 309px; }
    .connect form .your_details,
    .connect form .interest {
      margin-right: 20px; }
    .connect form .your_preferences {
      overflow: hidden; }
    .connect form .your_details,
    .connect form .your_message,
    .connect form .interest,
    .connect form .newsletter {
      float: left;
      width: 280px; } }
@media all and (min-width: 930px) {
  .connect .your_message {
    margin-right: 20px; }
  .connect .offline .message {
    margin-right: 20px; }
  .connect .offline .address h2 {
    margin-top: 0; }
  .connect .offline .direct {
    margin-left: 0; }
  .connect .your_preferences {
    float: left;
    width: 280px; }
  .connect form .interest,
  .connect form .newsletter {
    float: none;
    margin-right: 0;
    width: 100%; }
  .connect form .interest h3 {
    margin-top: 0; }
  .connect .image-grid .image:nth-child(3) {
    display: block;
    margin-left: 20px; } }
@media all and (min-width: 1230px) {
  .connect .image-grid .image:nth-child(4) {
    display: block;
    margin-left: 20px; }
  .connect .offline .direct {
    margin-left: 20px; }
    .connect .offline .direct h2 {
      margin-top: 0; }
  .connect form .intro {
    float: left;
    width: 280px;
    margin-right: 20px;
    padding: 0; } }

/* profile */
.profile-company .page_intro ul,
.profile-person .page_intro ul {
  padding: 4px 0; }
.profile-company .intro img,
.profile-person .intro img {
  display: block;
  margin-bottom: 20px; }
.profile-company .history,
.profile-person .history {
  margin-bottom: 60px; }
  .profile-company .history img,
  .profile-person .history img {
    display: block;
    margin-bottom: 20px; }
  .profile-company .history .text,
  .profile-person .history .text {
    padding-top: 20px; }
.profile-company .the-team,
.profile-person .the-team {
  margin-bottom: 60px; }
  .profile-company .the-team li,
  .profile-person .the-team li {
    display: inline;
    list-style: none; }
    .profile-company .the-team li:nth-child(2n+1) a,
    .profile-person .the-team li:nth-child(2n+1) a {
      margin-left: 0; }
  .profile-company .the-team a,
  .profile-person .the-team a {
    float: left;
    position: relative;
    display: block;
    width: 190px;
    height: 236px;
    margin: 0 0 22px 20px; }
  .profile-company .the-team img,
  .profile-person .the-team img {
    display: block;
    width: 100%; }
  .profile-company .the-team span,
  .profile-person .the-team span {
   position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px;
    color: #fff;
    background-color: rgba(132, 99, 63, 0.91);
    opacity: 0;
    -webkit-transition: .1s all;
    transition: .1s all;}
    .profile-company .the-team span strong,
    .profile-person .the-team span strong {
      display: block; }
  .profile-company .the-team a:hover span,
  .profile-person .the-team a:hover span {
    opacity: .9; }
.profile-company .awards,
.profile-person .awards {
  margin-bottom: 60px; }
  .profile-company .awards .text,
  .profile-person .awards .text {
    margin-bottom: 40px; }
  .profile-company .awards ul li,
  .profile-person .awards ul li {
    font-size: 17px;
    display: block;
    padding-left: 38px;
    min-height: 34px;
    margin-bottom: 20px;
    background: url(../images/icon_award.png) 0 4px no-repeat;
    list-style-type: none; }
@media all and (min-width: 630px) {
  .profile-company .intro,
  .profile-person .intro {
    padding-top: 20px;
    overflow: hidden; }
    .profile-company .intro img,
    .profile-person .intro img {
      float: left; }
      .profile-company .intro img + img,
      .profile-person .intro img + img {
        margin-left: 20px; }
  .profile-company .history img,
  .profile-person .history img {
    float: left; }
    .profile-company .history img + img,
    .profile-person .history img + img {
      margin-left: 20px; }
  .profile-company .history .text,
  .profile-person .history .text {
    clear: both; }
  .profile-company .the-team li:nth-child(2n+1) a,
  .profile-person .the-team li:nth-child(2n+1) a {
    margin-left: 20px; }
  .profile-company .the-team li:nth-child(4n+1) a,
  .profile-person .the-team li:nth-child(4n+1) a {
    margin-left: 0; } }
@media all and (min-width: 930px) {
  .profile-company .intro,
  .profile-person .intro {
    margin-bottom: 40px;
    overflow: hidden; }
    .profile-company .intro .text,
    .profile-person .intro .text {
      float: left;
      width: 580px;
      margin-right: 20px; }
    .profile-company .intro img + img,
    .profile-person .intro img + img {
      display: none; }
  .profile-company .history,
  .profile-person .history {
    overflow: hidden; }
    .profile-company .history .text,
    .profile-person .history .text {
      clear: none;
      float: right;
      width: 580px;
      margin-left: 20px;
      padding-top: 0; }
    .profile-company .history img,
    .profile-person .history img {
      float: left; }
    .profile-company .history img + img,
    .profile-person .history img + img {
      display: none; }
  .profile-company .the-team,
  .profile-person .the-team {
    clear: both; }
    .profile-company .the-team li:nth-child(4n+1) a,
    .profile-person .the-team li:nth-child(4n+1) a {
      margin-left: 20px; }
    .profile-company .the-team li:nth-child(5n+1) a,
    .profile-person .the-team li:nth-child(5n+1) a {
      margin-left: 0; }
  .profile-company .awards ul,
  .profile-person .awards ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px; } }
@media all and (min-width: 1230px) {
  .profile-company .intro,
  .profile-person .intro {
    margin-bottom: 90px; }






    .profile-company .intro img + img,
    .profile-person .intro img + img {
      display: block; }
  .profile-company .history,
  .profile-person .history {
    margin-bottom: 90px; }
    .profile-company .history h2,
    .profile-person .history h2 {
      margin-top: 0; }
    .profile-company .history img + img,
    .profile-person .history img + img {
      display: block; }
  .profile-company .the-team,
  .profile-person .the-team {
    padding-bottom: 0px;
    margin-bottom: 0px;
    
    overflow: hidden; }
    .profile-company .the-team h2,
    .profile-person .the-team h2 {
      margin-top: 0; }
    .profile-company .the-team .text,
    .profile-person .the-team .text {
      float: left;
      width: 1163px;
      margin-right: 20px; }
    .profile-company .the-team ul,
    .profile-person .the-team ul {
      float: right;
      width: 1084px; }
  .profile-company .awards,
  .profile-person .awards {
    overflow: hidden; }
    .profile-company .awards .text,
    .profile-person .awards .text {
      float: right;
      width: 280px;
      margin-left: 20px; }
    .profile-company .awards h2,
    .profile-person .awards h2 {
      margin-top: 0; }
    .profile-company .awards ul,
    .profile-person .awards ul {
      float: left;
      width: 1180px; } }

.profile-person .person {
  overflow: hidden;
  border-bottom: 1px solid #dfdfdf; }
  .profile-person .person img {
    display: block;
    margin-bottom: 20px; }
  .profile-person .person .text p:first-child {
    font-weight: bold; }
@media all and (min-width: 630px) {
  .profile-person .person img {
    margin-bottom: 40px; } }
@media all and (min-width: 930px) {
  .profile-person .person img {
    margin-bottom: 40px; }
  .profile-person .person p {
    display: block; }
  .profile-person .person p:first-child {
    float: left;
    width: 280px;
    margin: 0 20px 20px 0; } }
@media all and (min-width: 1230px) {
  .profile-person .person {
    overflow: hidden;
    margin-bottom: 90px;
    padding-bottom: 40px; }
    .profile-person .person img {
      float: left;
      margin-right: 20px; }
    .profile-person .person .text {
      float: right;
      width: 280px; }
    .profile-person .person p:first-child {
      float: none;
      width: auto;
      margin: 0 0 20px 0; } }

/* error */
.error404 .page_intro + img {
  display: block;
  margin-bottom: 90px; }

/* =animations ----------------------------------------------------------------------------------------------------------
	NOTE:  CSS animations

	animate: animation-name (none)
	         animation-duration (0s)
	         animation-timing-function (ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier(0.1, 0.7, 1.0, 0.1)|step-start|step-end|steps(4,end))
	         animation-delay (0s)
	         animation-iteration-count (1)
	         animation-direction (normal|reverse|alternate|alternate-reverse)
	         animation-fill-mode (none|forwards|backwards|both)
	----------------------------------------------------------------------------------------------------------------------- */
@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fade-out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes slide-out-left {
  0% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(100%, 0, 0); } }
@keyframes slide-in-bottom {
  0% {
    transform: translate3d(0, 100%, 0); }
  100% {
    transform: translate3d(0, 0, 0); } }
@keyframes crush {
  0% {
    height: 100%; }
  100% {
    height: 0; } }


 .intro p {    
  text-align: center;
    color: #505050;
    font-size: 17px;
      font-size: 20px;}

.excerpt{font-size: 15px;}