@charset "utf-8";
/*
  Project: DesignHub
  Date: September 2011
*/

/* adapted from html5boilerplate reset/normalize
----------*/

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 62.5%; line-height: 1.25; }

::-moz-selection { background: #69c; color: #fff; text-shadow: none; }
::selection { background: #69c; color: #fff; text-shadow: none; } 

a:focus, a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

pre, code, kbd, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 0 0 1em; padding: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
li ul, li ol { margin: 0; }

dd { margin: 0 0 0 40px; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }

legend { border: 0; padding: 0; }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }

button, input { line-height: normal; }

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; resize: vertical; }

input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

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

p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 1em; }



/* helpers
----------*/

.l { text-align: left; }
.r { text-align: right; }
.c { text-align: center; }
.hidden { display: none !important; visibility: hidden; }
.invisible { visibility: hidden; }
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }


.cf:before, .cf:after,
#header:before, #container:before, #container2:before, #container3:before, #container-in:before, #content:before, #side1:before, #side2:before, #footer:before, .wrap:before,
#header:after, #container:after, #container2:after, #container3:after, #container-in:after, #content:after, #side1:after, #side2:after, #footer:after, .wrap:after
{ content: ""; display: table; }
.cf:after,
#header:after, #container:after, #container2:after, #container3:after, #container-in:after, #content:after, #side1:after, #side2:after, #footer:after, .wrap:after
{ clear: both; }



/* custom styles
----------*/

#container h2,
#container h3,
#container h4,
#about .tagline,
.list-cloud ul,
#approach .slider,
#home .box-1 h2,
#home .box-2,
#x
{
  font-weight: 100;
}

a:link, a:visited {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
a:visited {
  color: #000;
}
a:link:hover, a:visited:hover {
  color: #00a261;
  text-decoration: underline;
}

button, input, select, textarea {
  font-family: sans-serif;
  color: #666;
}

html {
  height: 100%;
}
body {
  font-family: 'Helvetica Neue', 'HelveticaNeue', proxima-nova-alt, sans-serif;
  background: #FFF;
  height: 100%;
}

#skip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0;
}
  #skip a:link, #skip a:visited {
    position: absolute;
    z-index: 99;
    top: -99em;
    left: 0;
    width: 99.99%;
    font-size: 200%;
    line-height: 3;
    text-align: center;
    background: #FFF;
  }
  #skip a:link:focus, #skip a:visited:focus {
    top: 0;
  }




#page {
  position: relative;
  font-size: 1.2em;
  color: #666;
  padding: 100px 0 0;
  min-width: 1236px;
}

.wrap {
  width: 1236px;
  margin: 0 auto;
}

  #header {
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    min-width: 1236px;
    background: #fff url(../img/header-b.gif) repeat-x 0 100%;
  }
    #logo {
      float: left;
      padding: 18px 0 0 30px;
    }
    #menu-header {
      float: right;
      text-transform: uppercase;
      padding: 0 60px 0 0;
    }
      #menu-header ul {
      }
        #menu-header li {
          float: left;
          margin-right: 40px;
        }
          #menu-header a:link, #menu-header a:visited {
            float: left;
            color: #333;
            text-decoration: none;
            line-height: 22px;
            padding: 30px 0 36px;
          }
          #menu-header a:link:hover, #menu-header a:visited:hover {
            color: #00a261;
          }
          #menu-header .active a:link, #menu-header .active a:visited {
            color: #00a261;
            padding-bottom: 32px;
            background: url(../img/icon/arrow-t1.gif) no-repeat 50% 100%;
            border-bottom: solid 4px #00a261;
          }
        #menu-header .home {
          margin: 0 0 0 15px;
        }
          #menu-header .home a:link, #menu-header .home a:visited {
            width: 58px;
            text-indent: -999em;
            background: url(../img/icon/home.gif) no-repeat 50% 30px;
          }
          #menu-header .home a:link:hover, #menu-header .home a:visited:hover {
            padding-bottom: 25px;
            background-image: url(../img/icon/home-active.gif);
          }
          #menu-header .home.active a:link, #menu-header .home.active a:visited {
            padding-bottom: 32px;
            background-image: url(../img/icon/home-active.gif);
          }
    
  #container {
    position: relative;
    z-index: 50;
    font-size: 108.33%;
    line-height: 1.7;
    padding: 40px 0 0;
  }
    #container p {
      margin: 0 0 1.2em;
    }
    #container p:last-child {
      margin-bottom: 0;
    }
  
    #container h2 {
      float: left;
      width: 60%;
      font-size: 338.46%;
      font-weight: 100;
      line-height: 1;
      letter-spacing: -.05em;
      color: #333;
      text-transform: uppercase;
      margin: 0 0 30px;
    }
    #container h3 {
      font-size: 307.69%;
      font-weight: 100;
      line-height: 1.2;
      letter-spacing: -.05em;
      color: #333;
      margin: 0 0 5px;
    }
    #container h4 {
      font-size: 215.38%;
      font-weight: 100;
      line-height: 1.2;
      letter-spacing: -.05em;
      margin: 0 0 5px;
    }
  
      #content {
        clear: both;
        position: relative;
        z-index: 5;
      }
    
      #side1 {
      }


      #menu-content {
        clear: both;
        font-size: 92.3%;
        text-transform: uppercase;
        position: relative;
        z-index: 99;
        top: -10px;
        height: 45px;
        margin: 0 0 -2px;
        border-bottom: solid 1px #ededed;
      }
        #menu-content li {
          float: left;
          margin-right: 5px;
        }
          #menu-content a:link, #menu-content a:visited {
            float: left;
            color: #00a261;
            height: 45px;
            padding: 0 15px;
            text-decoration: none;
          }
          #menu-content a:link:hover, #menu-content a:visited:hover {
            color: #333;
            line-height: 45px;
          }
          #menu-content .active a:link, #menu-content .active a:visited {
            color: #fff;
            line-height: 45px;
            height: 53px;
            background: url(../img/btn/1-active.png) no-repeat 50% 0;
          }
      #menu-content.side {
        top: -40px;
        margin-bottom: 8px;
      }
        #menu-content.side ul {
          float: right;
        }


    
  #footer,
  .is-projects #page #footer {
    font: 91.67%/1.2 Arial, Helvetica, sans-serif;
    height: 120px;
    padding: 54px 0 0 0;
    background: url(../img/footer-bg.png) repeat-x 0 30px, -webkit-gradient(linear, 0 0, 0 100%, from(#00a261), to(#009056));
    background: url(../img/footer-bg.png) repeat-x 0 30px, -webkit-linear-gradient(#00a261 18px, #009056 30px);
    background: url(../img/footer-bg.png) repeat-x 0 30px,    -moz-linear-gradient(#00a261 18px, #009056 30px);
    background: url(../img/footer-bg.png) repeat-x 0 30px,     -ms-linear-gradient(#00a261 18px, #009056 30px);
    background: url(../img/footer-bg.png) repeat-x 0 30px,      -o-linear-gradient(#00a261 18px, #009056 30px);
    background: url(../img/footer-bg.png) repeat-x 0 30px,         linear-gradient(#00a261 18px, #009056 30px);
  }
    #footer .widget {
      float: left;
      color: #9d9ea1;
      margin-right: 60px;
    }
      #footer .widget h5 {
        font-size: 100%;
        font-weight: bold;
        color: #00a261;
        text-transform: uppercase;
        margin: 0 0 8px;
      }
    #contact-info {
      padding-left: 40px;
    }
    #social {
      width: 140px;
    }
      .social li {
        float: left;
        margin-right: 2px;
        display: inline; 
      }
    .social-media{
      width: 140px;
     }
  
      .social-media li {
        float: left;
        margin-right: 5px;
        display: inline !important; 
      }
        .social a:link, .social a:visited {
          float: left;
          text-indent: -999em;
          width: 27px;
          height: 27px;
          background: url(../img/icon/social.png) no-repeat 0 0;
        }
        .twitter a:link, .twitter a:visited { background-position: 0 0; }
        .twitter a:link:hover, .twitter a:visited:hover { background-position: 0 100%; }
        .linkedin a:link, .linkedin a:visited { background-position: -32px 0; }
        .linkedin a:link:hover, .linkedin a:visited:hover { background-position: -32px 100%; }
        .flickr a:link, .flickr a:visited { background-position: -64px 0; }
        .flickr a:link:hover, .flickr a:visited:hover { background-position: -64px 100%; }
        .vimeo a:link, .vimeo a:visited { background-position: -96px 0; }
        .vimeo a:link:hover, .vimeo a:visited:hover { background-position: -96px 100%; }
        .facebook a:link, .facebook a:visited { background-position: -96px 0; }
        .facebook a:link:hover, .facebook a:visited:hover { background-position: -96px 100%; }
    
        #footer  #certified {
            margin-right: 0;

        }
    
    #certified {
      
    }
      #certified li {
        float: left;
        margin-right: 20px;
      }
        #certified .thumb {
          height: 50px;
        }
    #copyright {
      float: right;
      font-weight: bold;
      color: #b4b6ba;
      /*padding: 0 30px;*/
      padding: 0 30px 0 0;
    }
    
    

  #button-footer {
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 0;
    height: 30px;
    margin: 0;
  }
    #button-footer a:link, #button-footer a:visited {
      display: block;
      color: #fff;
      line-height: 30px;
      text-decoration: none;
      padding: 0 30px 0 10px;
      background: #00A261 url(../img/icon/arrow-u1.png) no-repeat 92% 0;
    }
    #button-footer a:link:hover, #button-footer a:visited:hover {
      background-position: 92% 100%;
    }
  
  
  
/* common elements
----------*/

.thumb {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
  .thumb * {
    vertical-align: middle;
  }

#connect {
 /* float: right; 
  padding: 6px 12px !important;*/
}
  #connect p {
    float: left;
    color: #999;
    line-height: 27px;
    margin-right: 15px;
  }
  #connect .social {
    float: left;
  }
#connect .social-media {
    float: left;
    padding: 6px 12px !important;
  }

.button-map {
  width: 100%;
  overflow: hidden;
}
  .button-map a:link, .button-map a:visited {
    float: left;
    color: #2a2a2a;
    text-decoration: none;
    padding: 6px 20px 6px 35px;
    background: #e3e3e3 url(../img/icon/map.png) no-repeat 12px 50%;
    -moz-border-radius: 14px;
         border-radius: 14px;
  }
  .button-map a:link:hover, .button-map a:visited:hover {
    color: #00a261;
  }
  
  
  
/* plugins
----------*/

.slideshow {
  position: relative;
  clear: both;
}
  .slideshow .slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: 69px;
  }
    .slideshow .slider ul {
      list-style: none;
      padding: 0;
    }
      .slideshow .slider li {
        float: left;
        position: relative;
      }
  .slideshow .nav {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
    .slideshow .nav a.disabled:link, .slideshow .nav a.disabled:visited {
      display: none;
    }

.slideshow-fade {
  position: relative;
}
  .slideshow-fade ul {
    position: relative;
    list-style: none;
    margin: 0;
  }
    .slideshow-fade li {
      position: absolute;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #FFF;
    }
    .slideshow-fade li.next {
      z-index: 4;
    }
    .slideshow-fade li.active {
      z-index: 5;
    }



/* home
----------*/

.home #page {
  padding-top: 87px;
}
.home #header {
  background: #fff;
  height: 100px;
  background:#fff  url(../img/header-b.gif) repeat-x 0 100%;
}

#home {
 /* visibility: hidden;*/
  position: relative;
}  
  #home .intro-message {
    
    
  }
  #home .intro-message h1 {
    margin-bottom: 0;
    font-size: 280%;
    padding: 20px;
    margin: 0 0 10px;
    font-weight: 100;
    text-align: center;
  }
  #home section {
    position: relative;
    z-index: 5;
    overflow: hidden;
    width: 1236px;
    margin: 0 auto;
  }
    #home .box-1 {
      position: absolute;
      z-index: 9;
      left: 0;
      top: 0;
      width: 256px;
      height: 50px;
      padding: 302px 15px;
      color: #333;
      text-transform: uppercase;
      background: url(../img/home-1.png) no-repeat 0 0;
    }
      #home .box-1 h2 {
        float: none;
        width: auto;
        font-size: 138.46%;
        line-height: 1.4;
        margin: 0;
        font-weight: 900;
      }
      #home .box-1 p {
        font-weight: bold;
        letter-spacing: -.1em;
        margin: 0;
      }
@-moz-document url-prefix() {
      #home .box-1 p {
        letter-spacing: 0;
      }
}
    #home .box-2 {
      position: absolute;
      z-index: 5;
      left: 0;
      top: -25px;
      width: 280px;
      height: 145px;
      padding: 480px 0 0 185px;
      font-size: 292.3%;
      line-height: 1.1;
      color: #fff;
      text-transform: uppercase;
      background: url(../img/home-2.png) no-repeat 0 0;
    }
    #home .bg {
      /*position: absolute;*/
      top: 0;
      left: 50%;
      z-index: 1;
      width: 105%; 
    }

    #home a:hover {
        text-decoration: none;
    }
    #home a:hover h2 {
        color: #00A261!important;
    }
    #home a .more {
      position: absolute;
      z-index: 6;
      width: 45px;
      height:81px;
      color: white;
      background-color: #00A261;
      top: 286px;
      left: 286px;
      background:  url(../img/icon/arrow-r4.png) no-repeat 50% 50%, url(../img/stripes-3.png) repeat 0 0;
      text-indent: -9999px;
      opacity: .8;
      -ms-filter: "alpha(opacity=80)";
      filter: alpha(opacity=80);
    }
    
    #home a:hover .more {
      background: #00A261 url(../img/icon/arrow-r4.png) no-repeat 50% 50%;
      opacity: .8;
      -ms-filter: "alpha(opacity=80)";
      filter: alpha(opacity=80);      
    }

  #home .nav {
    position: fixed;
    z-index: 9;
    right: 0;
    top: 150px;
    list-style: none;
    padding: 0;
    font-weight: bold;
  }
    #home .nav li {
      margin-bottom: 3px;
    }
      #home .nav a:link, #home .nav a:visited {
        display: block;
        position: relative;
        color: #333;
        width: 35px;
        line-height: 35px;
        text-align: center;
        text-decoration: none;
        background: #fff;
      }
        #home .nav a:link em, #home .nav a:visited em {
          position: absolute;
          display: none;
          top: 0;
          left: -150px;
          width: 150px;
          color: #fff;
          font-style: normal;
          line-height: 35px;
          text-align: center;
          background: #60bd5e;
        }
      #home .nav a:link:hover, #home .nav a:visited:hover,
      #home .nav .active a:link, #home .nav .active a:visited {
        color: #fff;
        background: #00a261;
      }
        #home .nav a:link:hover:after, #home .nav a:visited:hover:after,
        #home .nav a:link:hover .after, #home .nav a:visited:hover .after,
        #home .nav .active a:link:after, #home .nav .active a:visited:after,
        #home .nav .active a:link .after, #home .nav .active a:visited .after {
          content: '';
          position: absolute;
          left: -6px;
          top: 11px;
          width: 0;
          height: 0;
          border-right: solid 6px #00a261;
          border-top: solid 6px transparent;
          border-bottom: solid 6px transparent;
        }


.module {
  position: relative;
}
  #page .module h4 {
    font-size: 115.38%;
    line-height: 27px;
    color: #333;
    padding: 0 0 15px 40px;
    border-bottom: solid 1px #e6e6e6;
    margin-bottom: 20px;
  }
  .module .nav a:link, .module .nav a:visited {
    position: absolute;
    z-index: 5;
    top: -55px;
    right: 0;
    width: 31px;
    height: 17px;
    text-indent: -1000em;
    background: url(../img/btn/prev-next-4.png) no-repeat 0 0;
  }
  .module .nav a.prev:link, .module .nav a.prev:visited {
    width: 33px;
    background-position: 100% 0;
  }
  .module .nav a.prev:link:hover, .module .nav a.prev:visited:hover {
    background-position: 100% 100%;
  }
  .module .nav a.next:link, .module .nav a.next:visited {
    right: 33px;
    background-position: 0 0;
  }
  .module .nav a.next:link:hover, .module .nav a.next:visited:hover {
    background-position: 0 100%;
  }

.module.blog {
}
  .module.blog h4 {
    background: url(../img/icon/quote.gif) no-repeat 0 0;
  }
  .module.blog .slider {
    height: 71px;
    overflow: hidden;
  }
  .module.blog li {
    float: none;
  }
    .module.blog .item {
      position: relative;
      padding: 0 30px 10px 85px;
      min-height: 60px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
    .module.blog li span {
      font-weight: bold;
    }
    .module.blog .date {
      position: absolute;
      left: 0;
      top: 0;
      width: 60px;
      height: 60px;
      font-weight: bold;
      color: #60bd5e;
      line-height: 1.4;
      text-align: center;
      text-transform: uppercase;
      background: url(../img/stripes-2.gif) repeat;
    }
      .module.blog .date span {
        display: block;
        font-size: 192.3%;
      }
    #page .module.blog .title {
      clear: both;
      font-size: 115.38%;
      line-height: 1.3;
      margin: 0 0 3px;
    }
    #page .module.blog .tags {
      font-size: 84.61%;
      font-style: italic;
      margin: 0;
    }
      .module.blog .tags span {
        font-style: normal;
      }

.module.twitter {
}
  .module.twitter h4 {
    background: url(../img/icon/twitter.gif) no-repeat 0 0;
  }
  .module.twitter .slideshow-fade {
    margin-bottom: 20px;
  }
    .module.twitter ul,
    .module.twitter li {
      height: 108px;
    }
    .module.twitter .date {
      float: left;
      font-size: 84.61%;
      padding: 3px 12px;
      background: #f4f4f4;
      -moz-border-radius: 12px;
           border-radius: 12px;
    }
      .module.twitter .date span {
        font-weight: bold;
      }
    .module.twitter .tweet {
      clear: both;
      position: relative;
      color: #000;
      font-size: 115.38%;
      padding-left: 28px;
      line-height: 24px;
    }
      .module.twitter .tweet:after,
      .module.twitter .tweet .after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 21px;
        height: 21px;
        background: url(../img/icon/arrow-r3.png) no-repeat 0 0;
      }
      .module.twitter .tweet a:link, .module.twitter .tweet a:visited {
        text-decoration: underline;
      }
      .module.twitter .tweet a:link:hover, .module.twitter .tweet a:visited:hover {
        text-decoration: none;
      }
  .module.twitter .join {
    font-size: 92.3%;
  }
    .module.twitter .join a:link, .module.twitter .join a:visited {
      display: block;
      padding-left: 16px;
      text-decoration: underline;
      background: url(../img/icon/arrow-r1a.gif) no-repeat 0 50%;
    }
    .module.twitter .join a:link:hover, .module.twitter .join a:visited:hover {
      text-decoration: none;
    }

#home-footer {
  position: relative;
  padding: 50px 40px 60px;

  background: #fff -webkit-gradient(linear, 0 0, 0 100%, from(#00a261), color-stop(.5, #009056), to(#fff));
  background: #fff -webkit-linear-gradient(#00a261 8px, #009056 20px, #fff 20px);
  background: #fff    -moz-linear-gradient(#00a261 8px, #009056 20px, #fff 20px);
  background: #fff     -ms-linear-gradient(#00a261 8px, #009056 20px, #fff 20px);
  background: #fff      -o-linear-gradient(#00a261 8px, #009056 20px, #fff 20px);
  background: #fff         linear-gradient(#00a261 8px, #009056 20px, #fff 20px);
  -pie-background: #fff    linear-gradient(#00a261 8px, #009056 20px, #fff 20px);
  
}
  #home-footer .twitter {
    width: 450px;
  }
  #home-footer .blog {
    position: absolute;
    left: 530px;
    top: 50px;
    right: 40px;
    min-width: 450px;
  }
  .ie7 #home-footer .blog {
    top: 30px;
  }
    #home-footer .blog .item {
      float: left;
      width: 450px;
    }
    .ie7 #home-footer .blog .item {
      width: 335px;
    }
    #home-footer .blog .item:nth-child(2n) {
      display: none;
    }
    .width-1500 #home-footer .blog .item:nth-child(2n) {
      display: block;
    }

.home #button-footer a {
  display: none;
}
.home #button-footer a.footer:link, .home #button-footer a.footer:visited {
  background-image: url(../img/icon/arrow-d1.png);
}
.home #button-footer .visible {
  display: block;
}




/* projects
----------*/

.full #container {
  padding: 0;
}
.full #content {
  width: 1236px;
  padding-top: 40px;
  margin: 0 auto;
}
.full #footer {
  padding-top: 24px;
  background: url(../img/footer-bg.png) repeat-x 0 0;
}

.projects {
  width: 100%;
  overflow: hidden;
  list-style: none;
  padding: 0;
}
#projects-other {
  display: none;
}
  .projects li {
    float: left;
    position: relative;
    margin: 0 18px 30px 0;
  }
  .projects li.nth-3n {
    margin-right: 0;
  }
  .projects li:nth-child(3n) {
    margin-right: 0;
  }
    .projects a:link, .projects a:visited {
      display: block;
      position: relative;
    }
      .projects span {
        display: block;
        position: relative;
        margin-bottom: 10px;
      }
        .projects span i {
          position: absolute;
          display: none;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: url(../img/icon/arrow-r4.png) no-repeat 90% 50%, url(../img/stripes-3.png) repeat 0 0;
          opacity: .9;
          -ms-filter: "alpha(opacity=90)";
          filter: alpha(opacity=90);
        }
        .ie7 .projects span i {
          display: block;
        }
      .projects em {
        display: block;
        font-style: normal;
        line-height: 21px;
        color: #333;
        text-decoration: none;
        padding-left: 25px;
        background: url(../img/icon/arrow-r3.png) no-repeat 0 0;
      }
    .projects a:link:hover, .projects a:visited:hover {
      text-decoration: none;
    }
      .projects a:link:hover span, .projects a:visited:hover span {
      }
      .projects a:link:hover em, .projects a:visited:hover em {
        color: #666;
        background-position: 0 100%;
      }



/* project
----------*/

#project-photos {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 30px;
  overflow: hidden;
}
  #project-photos ul {
    position: relative;
    z-index: 5;
    list-style: none;
    padding: 0;
  }
    #project-photos li {
      float: left;
      width: 800px;
      padding: 0 3px;
      overflow: hidden;
      position: relative;
      background: url(../img/stripes-4.png) repeat 0 0;
    }
      #project-photos .photo {
        opacity: .3;
        -ms-filter: "alpha(opacity=30)";
        filter: alpha(opacity=30);
      }
      #project-photos .prev .preloader {
        left: auto;
        right: 20px;
        margin-left: 0;
      }
      #project-photos .next .preloader {
        right: auto;
        left: 20px;
        margin-left: 0;
      }
  #project-photos .nav {
  }
    #project-photos .nav a:link, #project-photos .nav a:visited {
      position: absolute;
      z-index: 99;
      top: 50%;
      width: 38px;
      height: 73px;
      text-indent: -1000em;
      margin-top: -36px;
      background-repeat: no-repeat;
      background-position: 0 0;
    }
    #project-photos .nav a:link:hover, #project-photos .nav a:visited:hover {
      background-position: 0 100%;
      
    }
    #project-photos .nav a.prev:link, #project-photos .nav a.prev:visited {
      left: 20px;
      background-image: url(../img/btn/prev-2.png);
      background-color:#00A261;
      filter: alpha(opacity=50);
      -moz-opacity:0.5;
    opacity: 0.5;
    }
    #project-photos .nav a.next:link, #project-photos .nav a.next:visited {
      right: 20px;
      background-image: url(../img/btn/next-2.png);
      background-color:#00A261;
      filter: alpha(opacity=50);
      -moz-opacity:0.5;
    opacity: 0.5;
    }
    #project-photos .nav a.next:hover,  #project-photos .nav a.prev:hover {
        background-color:#FFF;
        
    }
  
.preload-area {
  position: absolute;
  left: -999em;
}

.preloader {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 100px;
  font-size: 84.61%;
  font-weight: bold;
  line-height: 1.4;
  color: #b4b6ba;
  text-transform: uppercase;
  text-align: center;
  margin: -50px 0 0 -70px;
}
  .preloader .star {
    opacity: .8;
    -ms-filter: "alpha(opacity=80)";
    filter: alpha(opacity=80);
    width: 28px;
    height: 28px;
    padding: 10px;
    background: #f9f9f9;
    margin: 0 auto 10px;
  }
    .preloader .star img {
      -webkit-animation: rotate1 3s linear infinite;
         -moz-animation: rotate1 3s linear infinite;
              animation: rotate1 3s linear infinite;
    }
@-webkit-keyframes rotate1 {
  0%   {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100%   {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-moz-keyframes rotate1 {
  0%   {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100%   {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate1 {
  0%   {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100%   {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

#project-info {
  position: relative;
  z-index: 9;
}
  #project-info .bar {
    position: relative;
    z-index: 9;
    height: 30px;
    background: #00a261;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#00a261), to(#009056));
    background: -webkit-linear-gradient(#00a261 18px, #009056 30px);
    background:    -moz-linear-gradient(#00a261 18px, #009056 30px);
    background:     -ms-linear-gradient(#00a261 18px, #009056 30px);
    background:      -o-linear-gradient(#00a261 18px, #009056 30px);
    background:         linear-gradient(#00a261 18px, #009056 30px);
    -pie-background:    linear-gradient(#00a261 18px, #009056 30px);
  }
    #project-info nav {
      float: left;
      width: 480px;
      height: 50px;
      background: #fff;
      margin: -20px 0 0;
    }
      #project-info nav h3 {
        float: left;
        font-size: 153.84%;
        line-height: 50px;
        color: #333;
        width: 250px;
        white-space: nowrap;
        padding: 0 0 0 40px;
      }
      #project-info nav ul {
        float: right;
      }
        #project-info nav li {
          float: left;
          margin-right: 15px;
        }
          #project-info nav a:link, #project-info nav a:visited {
            position: relative;
            z-index: 20;
            display: block;
            height: 50px;
            width: 15px;
            text-decoration: none;
            background-repeat: no-repeat;
            background-position: 0 0;
          }
            #project-info nav a:link em, #project-info nav a:visited em {
              position: absolute;
              z-index: 99;
              left: -999em;
              top: -34px;
              padding: 0 6px;
              line-height: 25px;
              white-space: nowrap;
              font-style: normal;
              color: #333;
              background: #ebebeb;
            }
              #project-info nav a:link em:after, #project-info nav a:visited em:after,
              #project-info nav a:link em .after, #project-info nav a:visited em .after {
                content: '';
                position: absolute;
                left: 0;
                top: 22px;
                width: 0;
                height: 0;
                border-left: solid 10px transparent;
                border-right: solid 10px transparent;
                border-top: solid 9px #ebebeb;
              }
          #project-info nav a:link:hover, #project-info nav a:visited:hover {
            background-position: 0 100%;
          }
            #project-info nav a:link:hover em, #project-info nav a:visited:hover em {
              left: 0;
            }
          #project-info nav .prev a:link, #project-info nav .prev a:visited {
            background-image: url(../img/btn/prev-3.png);
          }
          #project-info nav .next a:link, #project-info nav .next a:visited {
            background-image: url(../img/btn/next-3.png);
          }
          #project-info nav .close a:link, #project-info nav .close a:visited {
            width: 20px;
            background-image: url(../img/btn/close.png);
          }
    #project-info .states {
      float: left;
      list-style: none;
      padding: 0;
      line-height: 30px;
      text-transform: uppercase;
    }
      #project-info .states li {
        float: left;
        width: 165px;
        position: relative;
      }
        #project-info .states a:link, #project-info .states a:visited {
          display: block;
          color: #fff;
          text-align: center;
          text-decoration: none;
        }
          #project-info .states a:link:after, #project-info .states a:visited:after,
          #project-info .states a:link .after, #project-info .states a:visited .after {
            content: '';
            display: none;
            position: absolute;
            z-index: 9;
            left: 50%;
            top: -12px;
            width: 0;
            height: 0;
            border-left: solid 12px transparent;
            border-right: solid 12px transparent;
            border-bottom: solid 12px #383838;
            margin-left: -12px;
          }
        #project-info .finished a:link, #project-info .finished a:visited {
          background: #383838;
        }
        #project-info .design a:link, #project-info .design a:visited {
          background: #00a261;
        }
        #project-info .build a:link, #project-info .build a:visited {
          background: #60bd5e;
        }
        #project-info .states a:link:hover, #project-info .states a:visited:hover,
        #project-info .states li:hover a:link, #project-info .states li:hover a:visited,
        #project-info .states .active a:link, #project-info .states .active a:visited {
          background: #383838;
        }
          #project-info .states a:link:hover:after, #project-info .states a:visited:hover:after,
          #project-info .states a:link:hover .after, #project-info .states a:visited:hover .after,
          #project-info .states li:hover a:link:after, #project-info .states li:hover a:visited:after,
          #project-info .states li:hover a:link .after, #project-info .states li:hover a:visited .after,
          #project-info .states .active a:link:after, #project-info .states .active a:visited:after,
          #project-info .states .active a:link .after, #project-info .states .active a:visited .after {
            display: block;
          }
          #project-info .states a:link:hover span, #project-info .states a:visited:hover span,
          #project-info .states li:hover a:link span, #project-info .states li:hover a:visited span,
          #project-info .states .active a:link span, #project-info .states .active a:visited span,
          #project-info .finished a:link span, #project-info .finished a:visited span {
            color: #00a261;
          }
        #project-info .thumbs {
          position: absolute;
          z-index: 1;
          left: -999em;
          bottom: 30px;
         /* padding: 20px 10px;*/
          list-style: none;
          background: #fff;
          background: rgba(255, 255, 255, .5);
        }
        #project-info li:hover .thumbs {
          left: 0;
        }
          #project-info .thumbs li {
            width: auto;
            padding: 0 10px;
          }
            #project-info .thumbs a:link, #project-info .thumbs a:visited {
              border: solid 2px #fff;
            }
            #project-info .thumbs a:link:hover, #project-info .thumbs a:visited:hover {
              border-color: #00a261;
            }
              #project-info .thumbs a:link:after, #project-info .thumbs a:visited:after,
              #project-info .thumbs a:link .after, #project-info .thumbs a:visited .after {
                left: -999em;
              }
  #project-info .content {
    position: relative;
    padding: 30px 40px;
    background: #fff;
  }
    #project-info .detail {
      float: left;
      width: 745px;
    }
      #project-info .detail h4 {
        background: url(../img/icon/info.gif) no-repeat 0 0;
      }
        #project-info .detail .meta {
          float: left;
          width: 35%;
        }
          #project-info .meta dl {
            width: 100%;
            overflow: hidden;
            margin: 0;
          }
            #project-info .meta dt {
              display: inline;
              font-weight: bold;
              color: #00a261;
              margin: 0 5px 0 0;
            }
            #project-info .meta dd {
              display: inline;
              margin: 0;
            }
          #project-info .meta .location {
            margin: 15px 0 10px;
          }
        #project-info .description {
          float: right;
          width: 60%;
        }
          #project-info .description h5 {
            font-size: 100%;
            font-weight: bold;
            color: #00a261;
            margin: 0;
          }
    #project-info .module.blog {
      position: absolute;
      left: 825px;
      top: 30px;
      right: 40px;
      min-width: 415px;
      margin: 0;
    }
      #project-info .module.blog .item {
        float: left;
        width: 450px;
      }
      .ie7 #project-info .module.blog .item {
        width: 335px;
      }
      #project-info .module.blog .item:nth-child(2n) {
        display: none;
      }
      .width-1800 #project-info .module.blog .item:nth-child(2n) {
        display: block;
      }




#loading , #loading-home {
  position: absolute;
  z-index: 99;
  left: 0;
  top: 100px;
  width: 100%;
  height: 85%;
  background: #fff;
  display: none;
}
  #loading-home {
    display: block;
    top: 0;
    height:1200px;
  }
  
  #loading .preloader {
    top: 50%;
  }
  
  #loading-home .preloader {
    top: 275px;
  }





/* capabilities
----------*/

.boxes-1 {
  width: 100%;
  overflow: hidden;
}
  .boxes-1 nav,
  .boxes-1 .box {
    float: left;
    width: 608px;
    min-height: 260px;
    border: solid 1px #e3e3e3;
    margin: 0 0 16px;
  }
  .boxes-1 nav:nth-child(2n),
  .boxes-1 .box:last-child {
    float: right;
  }
  #page .boxes-1 h3 {
    font-size: 323.07%;
    line-height: 89px;
    padding: 0 30px;
    background: url(../img/icon/star-1.png) no-repeat 100% 0, url(../img/stripes-1.gif) repeat 0 0;
    border-bottom: solid 1px #e3e3e3;
    margin: 0 0 20px;
  }

#capabilities {
}
  #capabilities ul {
    font-size: 115.38%;
    list-style: none;
    padding: 0;
    margin: 0 30px;
  }
    #capabilities li {
      float: left;
      width: 50%;
      margin-bottom: 5px;
    }
      #capabilities a:link, #capabilities a:visited {
        display: block;
        color: #666;
        text-decoration: none;
        padding-left: 16px;
        background: url(../img/icon/arrow-r1.gif) no-repeat 0 .6em;
      }
      #capabilities a:link:hover, #capabilities a:visited:hover {
        color: #00a261;
      }
      #capabilities li ul {
        font-size: 86.67%;
        margin: 5px 0 0 16px;
      }
        #capabilities li li {
          float: none;
          width: 100%;
          margin-bottom: 1px;
        }
          #capabilities li li a:link, #capabilities li li a:visited {
            padding-left: 12px;
            background: url(../img/icon/arrow-r2.gif) no-repeat 0 .5em;
          }



/* blog
----------*/

.columns-2 #container h2 {
  float: none;
  width: 100%;
}
.columns-2 #content {
  float: right;
  width: 820px;
  padding-bottom: 30px;
}
.columns-2 #side1 {
  float: left;
  width: 370px;
  padding-bottom: 30px;
}

.post {
  margin-bottom: 35px;
}
.post:last-child {
  margin: 0;
}
  .post header {
    position: relative;
    height: 60px;
    padding-left: 85px;
    margin-bottom: 20px;
  }
    #page .post header h3 {
      font-size: 130.76%;
      line-height: 60px;
    }
    .post .date {
      position: absolute;
      left: 0;
      top: 0;
      width: 60px;
      height: 60px;
      font-weight: bold;
      color: #60bd5e;
      line-height: 1.4;
      text-align: center;
      background: url(../img/stripes-2.gif) repeat;
    }
      .post .date span {
        display: block;
        font-size: 192.3%;
      }
  .post .content {
    margin-bottom: 20px;
  }
  .post footer {
    padding-bottom: 15px;
    border-bottom: solid 1px #e6e6e6;
  }
    .post .category {
      font-size: 84.61%;
      font-style: italic;
      color: #666;
    }
      .post .category span {
        font-weight: bold;
        font-style: normal;        
      }
      .post .category a:link, .post .category a:visited {
        color: #666;
      }

#side1 .widget {
  padding: 10px 0 20px;
  border-top: solid 1px #e6e6e6;
}
  #side1 .widget h4 {
    font-size: 115.38%;
    text-transform: uppercase;
    color: #00a261;
    margin-bottom: 10px;
  }

.list-1 {
}
  .list-1 li {
    margin-bottom: 10px;
  }
  .list-1 li:last-child {
    margin: 0;
  }
    .list-1 a:link, .list-1 a:visited {
      color: #000;
      padding-left: 15px;
      text-decoration: none;
      background: url(../img/icon/arrow-r1a.gif) no-repeat 0 .3em;
    }
    .list-1 a:link:hover, .list-1 a:visited:hover {
      color: #666;
      background-image: url(../img/icon/arrow-r1.gif);
    }
    .list-1 .active a:link, .list-1 .active a:visited {
      color: #00a261;
    }

.list-cloud {
}
  .list-cloud li {
    display: inline;
    padding-right: 5px;
    line-height: 1.2;
  }
    .list-cloud a:link, .list-cloud a:visited {
      color: #666;
    }
    .list-cloud a:link:hover, .list-cloud a:visited:hover {
      color: #00a261;
      text-decoration: none;
    }

#connect.widget {
  float: none;
}




/* contact
----------*/

.contact #container h2 {
  margin-bottom: 20px;
}
#contact-map {
  width: 100%;
  height: 300px;
}
#contact-popup {
  display: none;
}
#contact-map-popup {
  min-width: 220px;
  min-height: 170px;
}




/* about
----------*/

#about {
}
  #about .item {
    font-size: 115.38%;
    height: 162px;
    padding: 0 0 0 30px;
    border: solid 1px #e3e3e3;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 100% 0;
    margin: 0 0 12px;
  }
    #about .item h3 {
      font-size: 280%;
      padding: 30px 0 0;
      margin: 0 0 10px;
    }
  #about-1 {
    background-image: url(../img/misc/about-1.png);
  }
  #about-2 {
    background-image: url(../img/misc/about-2.png);
  }
  #about-3 {
    background-image: url(../img/misc/about-3.png);
  }
  #about .box .content {
    font-size: 115.38%;
    padding: 0 30px;
  }

.button-1 {
}
  .button-1 a:link, .button-1 a:visited {
    float: left;
    color: #666;
    text-decoration: none;
    padding-left: 25px;
    line-height: 21px;
    background: url(../img/icon/arrow-r3.png) no-repeat 0 0;
  }
  .button-1 a:link:hover, .button-1 a:visited:hover {
    color: #00a261;
    background-position: 0 100%;
  }


/* team
----------*/

#who {
  padding-top: 30px;
}
  #who h3 {
    margin-bottom: 15px;
  }
  #who .tagline {
    font-size: 200%;
    line-height: 1.1;
    color: #00a261;
    text-transform: uppercase;
    margin-bottom: 15px;
  }
  #who p {
    font-size: 115.38%;
    line-height: 1.45;
  }

#team {
  padding-top: 30px;
}
  #team .person {
    float: left;
    width: 400px;
  }
  #team .person:last-child {
    float: right;
  }
    #team .photo {
      margin-bottom: 10px;
    }
    #team .person h4 {
      margin: 0;
    }
    #team .title {
      color: #00a261;
      padding: 0 0 12px;
      border-bottom: solid 1px #ededed;
    }
    #team .contact {
    }
      #team .contact a:link, #team .contact a:visited {
        color: #00a261;
      }
      #team .contact span {
        color: #00a261;
      }


/* approach
----------*/

#approach {
  z-index: 20;
  top: -17px;
  height: 674px;
}
  #approach .slider,
  #approach .slider ul,
  #approach .slider li {
    height: 600px;
  }
    #approach .box {
      position: absolute;
      color: #fff;
      background: url(../img/stripes-3.png) repeat 0 0;
      border: solid 1px #000;
    }
      #approach .box .content {
        position: relative;
        z-index: 5;
      }
    #approach .info {
      z-index: 4;
      max-width: 300px;
    }
      #approach .info .content {
        font-size: 261.53%;
        line-height: 1.1;
        text-transform: uppercase;
        padding: 20px 15px;
      }
    #approach .icon {
      z-index: 5;
    }
      #approach .icon .content {
        font-size: 153.84%;
        line-height: 1.2;
        padding: 10px 10px 20px;
      }
        #approach .icon .number {
          color: #00a261;
          margin: 0 0 10px;
        }
        #approach .icon .title {
          text-align: center;
          margin: 0 20px 10px;
        }
        #approach .icon .image {
          width: 100%;
          text-align: center;
        }
  #approach .nav a:link, #approach .nav a:visited {
    position: absolute;
    z-index: 5;
    top: 300px;
    width: 38px;
    height: 73px;
    text-indent: -1000em;
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  #approach .nav a:link:hover, #approach .nav a:visited:hover {
    background-position: 0 100%;
  }
  #approach .nav a.prev:link, #approach .nav a.prev:visited {
    left: -60px;
    background-image: url(../img/btn/prev-1.png);
  }
  #approach .nav a.next:link, #approach .nav a.next:visited {
    right: -60px;
    background-image: url(../img/btn/next-1.png);
  }
  #approach .buttons {
    position: relative;
    z-index: 99;
    font-size: 92.3%;
    line-height: 1;
    list-style: none;
    padding: 0;
    height: 74px;
    background: #e7e6e6;
  }
    #approach .buttons li {
      float: left;
      position: relative;
      z-index: 1;
      width: 125px;
      height: 74px;
      margin-right: -24px;
    }
      #approach .buttons a:link, #approach .buttons a:visited {
        display: block;
        height: 74px;
        padding-left: 30px;
        text-decoration: none;
        background: url(../img/btn/approach-1.png) no-repeat 0 0;
      }
    #approach .buttons li:hover,
    #approach .buttons li.active {
      z-index: 99;
    }
      #approach .buttons a:link:hover, #approach .buttons a:visited:hover,
      #approach .buttons .active a:link, #approach .buttons .active a:visited {
        background-image: url(../img/btn/approach-2.png);
      }
        #approach .buttons span {
          display: block;
          color: #666;
          padding: 8px 0 0;
        }
        #approach .buttons em {
          display: none;
          position: absolute;
          left: 2px;
          top: -34px;
          font-style: normal;
          line-height: 34px;
          padding: 0 12px;
          white-space: nowrap;
          color: #373737;
          background: #d5d5d5;
        }
        #approach .buttons a:link:hover em, #approach .buttons a:visited:hover em {
          display: block;
        }
        #approach .buttons i {
          display: block;
          height: 45px;
          text-align: center;
          background-repeat: no-repeat;
          background-position: 50% 0;
          margin-right: 15px;
        }
        #trigger-approach-1 i { background-image: url(../img/icon/approach-2-1.png); }
        #trigger-approach-2 i { background-image: url(../img/icon/approach-2-2.png); }
        #trigger-approach-3 i { background-image: url(../img/icon/approach-2-3.png); }
        #trigger-approach-4 i { background-image: url(../img/icon/approach-2-4.png); }
        #trigger-approach-5 i { background-image: url(../img/icon/approach-2-5.png); }
        #trigger-approach-6 i { background-image: url(../img/icon/approach-2-6.png); }
        #trigger-approach-7 i { background-image: url(../img/icon/approach-2-7.png); }
        #trigger-approach-8 i { background-image: url(../img/icon/approach-2-8.png); }
    #approach .buttons .title {
      padding: 0 55px 0 40px;
      line-height: 74px;
      background: none;
      width: auto;
    }
















/* IE 6, 7, 8, 9
----------*/

/* relative elements */
.ie9 #home-footer,
.ie8 #home-footer,
.ie9 #project-info .bar,
.ie8 #project-info .bar,
.ie .button-map a:link, .ie .button-map a:visited,
.ie .module.twitter .date,
.ie #x {
  position: relative;
/*
  The URL to the .htc file is relative to the CSS file URL in IE 6-8, eg: url(PIE.htc)
  The URL to the .htc file is relative to the HTML file URL in IE 9, eg: url(css/PIE.htc)
  To make all IE versions behave the same you MUST set the path as an absolute path. For example:
  behavior: url(/path/to/css/PIE.htc);
  If you don't see rounded corners or transparency on your pages in IE, replace "PIE.htc" with "PIE.php"
  If there are any references to images in this file, edit those paths to absolute paths also.
*/
  behavior: url(/css/PIE.htc);
}


/* absolute elements */
.ie  #footer,
.ie .projects span i,
.ie #y {
/*
  See comments above referring to PIE.htc
*/
  behavior: url(/css/PIE.htc);
}


.ie #footer,
.ie .is-projects #page #footer {
  -pie-background: url(/img/footer-bg.png) repeat-x 0 30px, linear-gradient(#00a261 18px, #009056 30px);
}
.ie .full #footer {
  padding-top: 24px;
  -pie-background: url(/img/footer-bg.png) repeat-x 0 0;
}

.ie .projects span i {
  -pie-background: url(/img/icon/arrow-r4.png) no-repeat 90% 50%, url(/img/stripes-3.png) repeat 0 0;
}






/* IE 7
----------*/

.ie7m .cf,
.ie7m #header, .ie7m #container, .ie7m #container2, .ie7m #container3, .ie7m #container-in, .ie7m #content, .ie7m #side1, .ie7m #side2, .ie7m #footer
{
  zoom: 1;
}

.ie7 audio, .ie7 canvas, .ie7 video { display: inline; zoom: 1; }

.ie7 legend { margin-left: -7px; }

.ie7 button, .ie7 input, .ie7 select, .ie7 textarea { vertical-align: middle; }
.ie7 button, .ie7 input { overflow: visible; }

.ie7 table button, .ie7 table input { overflow: auto; }

.ie7 input[type="radio"], .ie7 input[type="checkbox"] { vertical-align: middle; }

.ie7 .thumb em {
  display: inline-block;
  height: 100%;
}


.ie7 #approach {
  top: -8px;
}
.ie7 #approach .icon {
  width: 270px;
}

.ie7 #home-footer {
  padding-top: 30px;
  border-top: solid 20px #009056;
}



/* print
----------*/

@media print {

  @page { margin: 0.5cm; }

  * { 
    background: transparent !important;
    color: #000 !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
    -webkit-box-shadow: none !important;
       -moz-box-shadow: none !important;
            box-shadow: none !important;
  }

  a:link, a:visited { text-decoration: underline; }

  abbr[title]:after { content: " (" attr(title) ")"; }

  pre, blockquote { border: solid 1px #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }

  h2, h3 { page-break-after: avoid; }
  p, h2, h3 { orphans: 3; widows: 3; }

  #page, #header, #container, #container2, #container3, #container-in, #content, #side1, #side2, #footer {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-left: 0;
  }

}



/* mobile
----------*/

@media screen and (max-device-width: 480px) {
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
}

@media screen and (max-device-width: 768px) {
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
}











/* project - thumbnailscroller
----------*/
.jThumbnailScroller{position:relative;  height:82px; width: 425px; margin:0 auto 0 auto; border:3px solid #eee; background:#bbb; padding:0; overflow:hidden; }
.jThumbnailScroller .jTscrollerContainer{position:absolute;}
.jThumbnailScroller .jTscroller{position:relative; height:82px; margin:0; left:0; top:0; display:inline-block; *display:inline;}
.jThumbnailScroller .jTscrollerNextButton,.jThumbnailScroller .jTscrollerPrevButton{position:absolute; display:block; width:40px; height:40px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; opacity:0.7;}
.jThumbnailScroller .jTscrollerNextButton{background:#000 url(nextArrow.png) center center;}
.jThumbnailScroller .jTscrollerPrevButton{background:#000 url(prevArrow.png) center center;}
.jThumbnailScroller .jTscrollerNextButton:hover,.jThumbnailScroller .jTscrollerPrevButton:hover{background-color:#d56916; opacity:1;}
.jThumbnailScroller .jTscroller a{display:block; float:left; border:5px solid #ddd; margin:6px 10px 6px 0; background:#fff; }
.jThumbnailScroller .jTscroller a:hover{border-color:#fff;}
.jThumbnailScroller .jTscroller a:first-child{margin-left:10px;}
.jThumbnailScroller .jTscroller a img{border:none;}










































































/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */