@import url('https://fonts.googleapis.com/css?family=Parisienne|Roboto:300,400,700,900&subset=latin-ext');

/*********************************************
*
* BASE LAYOUT
*
**********************************************/
body {
  font-family: "Roboto";
  font-weight: 400;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}

/* white right hand border */
.whiteback {
  background-image: url('../img/shadow_right.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

/* grey right hand image border */
.greyback{
  background-image: url('../img/gray_right.png');
  background-repeat: repeat-y;
  background-position: right top;
  background-attachment: fixed;
}

.imageback {
  background-image: url('../img/shadow_right.png');
  background-repeat: no-repeat;
  background-position: 600px top;
  background-attachment: fixed;
}

#framecontent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 225px;/*Width of frame div*/
  height: 100%;
  overflow: hidden;/*Disable scrollbars. Set to "scroll" to enable*/
  background-color: #fff;
}

#maincontent {
  position: fixed;
  top: 0;
  left: 225px;/*Set left value to WidthOfFrameDiv*/
  right: 0;
  bottom: 0;
  overflow: auto;
  overflow-x: hidden;
}

.whitecontent {
  /* background shadow image */
  background-image: url('../img/shadow_left.png');
  background-repeat: no-repeat;
  background-position: 226px top;/* Set one pixel more than width of nav to be safe */
  background-attachment: fixed;
}

.greycontent {
  /* background shadow image */
  background-image: url('../img/gray_left.png');
  background-repeat: no-repeat;
  background-position: 226px top;/* Set one pixel more than width of nav to be safe */
  background-attachment: fixed;
  background-color: #2a4c58;
}

* html body {/*IE6 hack*/
  padding: 0 0 0 225px;/*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent {/*IE6 hack*/
  height: 100%;
  width: 100%;
}

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

::selection {
background: #FFF8AB;
color: #fff;
text-shadow: none;
}

/*********************************************
*
* NAVIGATION STYLES
*
**********************************************/

#logo {
  margin: 30px 0 0 20px;
}

#nav {
  width: 190px;/* width of column minus margins */
  margin: 50px 15px 0 20px;
  padding-bottom: 5px;
  overflow: visible;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 300;
  color: #858789;
}

#nav .futer {/* email link */
  margin-top: 2.688em;
  font-size: 0.8em;
  bottom: 20px;
  position: fixed;
}

#nav a:link,
#nav a:visited {
  display: block;
  font-size: 1em;
  text-decoration: none;
  color: #a8a8a3;
}

#nav a:hover,
#nav a:active {
  text-decoration: none;
  color: #04b0bb;
}

#navlist, #reflist {
  font-size: 1.5em;
}

#navlist li {
  margin-bottom: 0;
  letter-spacing: -1px;
}

#reflist li p img {
  float: right;
  color: #808080;
  font-size: 10px;
  margin-right: 4px;
}

#reflist li h5, #reflist li h6, #reflist li p {
  letter-spacing: 0px;
}

#reflist li h5 {
  font-weight:bold;
}

#reflist li h5, #reflist li h6 {
  overflow: hidden;
  white-space: nowrap;
  width: 293px;
}

#subnavlist {
  margin: 1em 0;
  font-size: 0.85em;
  background:white;
  position:relative;
  z-index:100;
}

#subnavlist li {
  margin-bottom: 0.2em;
}

#subnavlist li a,
#subnavlist li.selected {
  font-weight: 400;
}

.selected {
  color: #04b0bb;
}

/*********************************************
*
* HOMEPAGE STYLES - CASE STUDIES GRID BOXES
*
**********************************************/

#gridcontainer {
  float: left;
  padding: 20px 20px 0 30px;
  min-width: 750px;
}

#gridcontainer a:link, #gridcontainer a:visited {
  text-decoration: none;
  color: #a8a8a3;
}

#gridcontainer a:hover, #gridcontainer a:active {
  text-decoration: none;
  color: #04b0bb;
}

.boxgrid {
  width: 180px;
  height: 180px;
  margin: 1px;
  float:left;
  background: #fff;
  border: 1px solid #cccccc;
  overflow: hidden;
  position: relative;
}

.boxgrid img {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
  border: 0;
}

.boxcaption { /* cross browser opacity */
  float: left;
  position: absolute;
  background: #fff;
  height: 180px;
  width: 100%;

  opacity: .9;
  /* For IE 5-7 */
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  /* For IE 8 */
  -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}

/*
.boxcaption a {
  display: block;
  margin-left: 10px;
  margin-top: 0.25em;
  font-size: 0.8em;
}
*/

.boxcaption h3 {
  margin: 20px 10px 10px 10px;
  font-weight: normal;
  font-size: 1em;
  color: #04b0bb;
}

.boxcaption p {
  margin-left: 10px;
  margin-bottom: 0.25em;
  margin-right:8px;
  font-size: 0.8em;
  color: #858789;
}

.captionfull .boxcaption {
  top: 0px;
  left: -180px;
}

/*********************************************
*
* NEWS/PRESS/TALKS/AWARDS LISTINGS LAYOUT
*
**********************************************/

#newswrapper {
  float: left;
  width: 100%;
}

#contentcolumn {
  margin-left: 320px;/*Set left margin to LeftColumnWidth*/
}

#listcolumn {
  float: left;
  width: 320px;/*Width of left column*/
  margin-left: -100%;
  background: #2a4c58 url(../img/gray_shadow.png) right top repeat-y;
  color: white;
  min-height: 100%;
}

* html #listcolumn {
  height: 100%;
}

/*** News item list ***/
#navcontainer {
  width: 100%;
}

#navcontainer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}

#navcontainer li {
  border-top: 1px solid #375762;
  border-bottom: 1px solid #213c45;
  margin: 0;
  padding: 0;
}

#navcontainer li a {
  display: block;
  padding: 0.5em 10px 0 0.5em;
  border-left: 4px solid #0e303c;
  text-decoration: none;
  width: 100%;
  height: 75px;
  margin: 0;
  color: #d5d6d7;
}

.reference #navcontainer li {
  padding: 0.5em 10px 0.4em 0.5em;
  border-left: 4px solid #0e303c;
  width: 294px;
  transition: background .2s ease-out .1s;
}

.reference #navcontainer li:hover, .reference #navcontainer li.active {
  border-left: 4px solid #04b0bb;
  background: #fff url("../img/list_shadow.png") left center no-repeat;
  color: #04b0bb;
  cursor: hand;cursor: pointer;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #eee;
}

html>body #navcontainer li a {
  width: auto;
}

#navcontainer li div {/* for the awards and press section */
  padding: 0.5em 10px 10px 0.5em;
  border-left: 5px solid #404040;
  width: 100%;
  margin: 0;
  color: #d5d6d7;
}

#navcontainer li a:hover {
  border-left: 5px solid #04b0bb;
  background-color: #fff;
  color: #04b0bb;
}

#navcontainer h5 {
  color: #b9d1cf;
  font-weight: normal;
  font-size: 0.53em;
  margin-bottom: 0.3em;
}

.reference #navcontainer li:hover h5 {
  color: #9a9c9b;
}

#navcontainer h6 {
  color: #04b0bb;
  margin-bottom: 0.3em;
}

#navcontainer p {
  margin-bottom: 0.2em;
}

#web {
  max-width: 225px;
  overflow: hidden;
  width: 225px;
}

#web a {
  font-size: 1.4vw;
}

/* .web #navcontainer h5 {
  color: white;
  font-weight: bold;
  font-size: 0.5em;
  margin-bottom: 0.5em;
}*/

#navcontainer h6 {
  font-weight: bold;
  font-size: 0.5em;
}

/* .web #navcontainer h6 {
  color: #9a9c9b;
}*/

#navcontainer p {
  font-weight: normal;
  font-size: 0.5em;
}

/*********************************************
*
* CASE STUDY DETAIL LAYOUT
*
**********************************************/

#imagewrapper {
  float: left;
  width: 100%;
}

#imagecolumn {
  margin-left: 370px;/*Set left margin to LeftColumnWidth*/
}

#casestudy {
  float: left;
  width: 370px;/*Width of left column*/
  padding-top: 30px;
  margin-left: -100%;
}

/*********************************************
*
* PAGE-SPECIFIC STYLES
*
**********************************************/

/*** casestudy detail page ***/
/*
#casestudy p {
  font-size: 0.75em;
  line-height: 1.5em;
  color: #4e4e50;
  margin-bottom: 1.5em;
  margin-left: 30px;
}
*/

#casestudy div {
  font-size: 0.75em;
  line-height: 1.5em;
  color: #4e4e50;
  margin-bottom: 1.5em;
  margin-left: 30px;
}

#casestudy p {
  margin-bottom: 1.5em;
}

#casestudy h3 {
  color: #04b0bb;
  font-weight: normal;
  font-size: 2em;
  margin-left: 30px;
  margin-bottom: 0.5em;
}

#casestudy h2 {
  color: #04b0bb;
  font-weight: normal;
  font-size: 0.75em;
  margin-left: 30px;
  margin-bottom: 0.25em;
}

#casestudy h1 {
  color: #4e4e50;
  font-weight: normal;
  font-size: 0.75em;
  margin-left: 30px;
  margin-bottom: 0.25em;
}

#casestudy strong {
  font-weight: normal;
  font-size: 1.25em;
  color: #a8a8a3;
}

#casestudy blockquote {
  color: #858789;
  font-style: normal;
  font-size: 1.5em;
  /*float: right;*/
  line-height: 1.25em;
  margin-top: 1em;
  margin-bottom: 0;
}

#casestudy blockquote strong {
  display: block;
  font-size: 1em;
  margin-top: 1em;
}

#casestudy blockquote:before {
  display: block;
  content: url(../img/n_quote_top.gif);
  margin-bottom: 0.3em;
}

#casestudy blockquote:after {
  display: block;
  content: url(../img/n_quote_btm.gif);
  margin-top: 0;
  margin-left: 85%;
}

#casestudy h6 {
  margin-top: -1em;
}

#backlink {
  display: block;
  margin-left: 30px;
  margin-bottom: 6.5em;
  font-size: 0.75em;
}

#backlink a:link, #backlink a:visited {
  text-decoration: none;
  color: #858789;
}

#backlink a:hover, #backlink a:active {
  text-decoration: none;
  color: #04b0bb;
}

#toplink {
  display: block;
  margin-left: 30px;
  margin-bottom: 1.5em;
  margin-top: 5em;
  font-size: 0.75em;
}

#toplink a:link, #toplink a:visited {
  text-decoration: none;
  color: #858789;
}
#toplink a:hover, #toplink a:active {
  text-decoration: none;
  color: #04b0bb;
}

#relatedlink {
  display: block;
  margin-left: 30px;
  margin-bottom: 1.5em;
  margin-top: 1em;
  font-size: 0.75em;
}

#relatedlink a:link, #relatedlink a:visited {
  text-decoration: none;
  color: #858789;
}
#relatedlink a:hover, #relatedlink a:active {
  text-decoration: none;
  color: #04b0bb;
}

/*** company page ***/
#company {
  padding: 90px 15px 60px 0;
  margin-left: 35px;
  margin-right: 200px;
  min-height: 570px;
  background-color: #fff;
}

#company h1 {
  color:#4E4E50;
  font-size: 1.7em;
  font-weight: 300;
  margin: 1.5em 0 1em;
  position: relative;
  z-index: 1;
}

#company h2 {
  color: #04b0bb;
  margin: -1em 0 1em;
  font-size: 1.3em;
  font-weight: 400;
  position: relative;
  z-index: 1;
}

#company h3 {
  color: #4E4E50;
  font-size: 1.3em;
  margin: 2.5em 0 1em;
  font-weight: 300;
  text-decoration: none;
}

#company h3 a {
  color: #4E4E50;
  font-size: 1.3em;
  text-decoration: none;
}

#company h3 a:hover {
  color: #7d9a9f;
}

#company p {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5em;
  color: #4e4e50;
  margin-bottom: 1.5em;
  position: relative;
  z-index: 1;
}

#company p span {
  color: #ddd;
}

#company p span strong {
  color: #808080;
}

#company img {
  margin-bottom: 1.5em;
  border: 1px solid #e1e1e1;
  padding: 5px;
  -webkit-box-shadow: 0 8px 7px -7px #8ba3ac;
  -moz-box-shadow: 0 8px 7px -7px #8ba3ac;
  box-shadow: 0 8px 7px -7px #8ba3ac;
}

#company.linkovi img {
  border: none;
  margin-bottom: 0;
  padding:0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

#company img.left {
  float: left;
  margin: 0 40px 20px 0;
}

#company img.webdiz {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  padding: none;
  margin: 2em 0 1.5em 3em;
}

#company small {
  color: #b0b2b5;
  font-size: 0.75em;
}

#company ul,
#company ol {
  color:#4E4E50;
  font-size: 1em;
  line-height: 2em;
  margin-bottom: 1.5em;
}

#company ul li {
  color: #4E4E50;
  padding-left: 30px;
  background: url("../img/li.gif") 15px 9px no-repeat;
  line-height: 1.5em;
}

#company li strong {
  color: #808080;
}

#company ol li {
  color: #4E4E50;
  padding-left: 40px;
  line-height: 1.5em;
  list-style: inside decimal;
  text-indent: -19px;
}

/*** contact us page ***/
#contact {
  padding: 125px 0 0 35px;
  font-size: 0.75em;
  line-height: 1.5em;
}

#contact h1 {
  color: #fff;
  font-size: 1.5em;
  font-weight: 300;
  padding: 0.5em 0 0.2em;
}

#contact h2 {
  color: #dddede;
  font-size: 1.3em;
  font-weight: 300;
  padding: 0.5em 0 0.2em;
}

#contact p {
  margin-bottom: 1.5em;
  color: #b0b2b5;
  font-size: 1.2em;
}

#contact p span {
  color: #fafafa;
}

#contact a:link,
#contact a:visited,
#contact a:link span {
  text-decoration: none;
  color: #b0b2b5;
}

#contact a:hover,
#contact a:active,
#contact a:hover span,
#contact a:active span {
  text-decoration: none;
  color: #04b0bb;
}

#contact hr {
  color: #4e4e50;
  background-color: #4e4e50;
  border: 1px solid #375762;
  border-style: none none solid;
  margin: 2em 35px 2em 0;
  height: 1px;
  display: block;
}

.rightcol {
  float: left;
  width: 320px;
}

.leftcol {
  float: left;
  width: 320px;
}

.arrowlink {
  background: url("../img/bullet.gif") no-repeat center left;
  padding-left: 12px;
}

.arrowleft {
  background: url("../img/bk.gif") no-repeat center left;
  padding-left: 12px;
}

/*** news/press/talks article ***/
#article {
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 67px;
}

#article h1 {
  font-size: 1.5em;
  color: #858789;
  font-weight: normal;
  margin-bottom: 0;
}

#article h2 {
  color: #04b0bb;
  font-weight: normal;
  font-size: 0.875em;
  margin-bottom: 1em;
}
#article h3 {
  color: #858789;
  font-weight: normal;
  font-size: 0.875em;
  margin-bottom: 0.125em;
}

#article p {
  color: #4e4e50;
  font-size: 0.813em;
  margin-top: 0.813em;
}

#article li {
  color: #4e4e50;
  font-size: 0.813em;
  background-image: url('../img/bullet.gif');
  background-repeat: no-repeat;
  background-position: 0em 0.4em;
  padding-left: 1em;
  margin-bottom: 0.5em;
}

#article ul{
  /*list-style-image: url('/img/bullet.gif');*/
  list-style-type: none;
  margin: 0;
  padding: 0;
/*  margin-left: 0.5em;*/
}

#article a {
  text-decoration: none;
  color: #858789;
  padding-left: 15px;
  background: #fff url(../img/linkbullet.gif) left center no-repeat;
}

#article a:link, #article a:visited {
  color: #858789;
}

#article a:hover, #article a:active {
  color: #04b0bb;
}

#article blockquote {
  color: #858789;
  font-style: italic;
  font-weight: normal;
  font-size: 0.875em;
  line-height: 1.25em;
  margin-top: 0.813em;
}

/*
#article blockquote:before {
  display: block;
  content: url(/img/n_quote_top.gif);
  margin-bottom: 0.3em;
}

#article blockquote:after {
  display: block;
  content: url(/img/n_quote_btm.gif);
  margin-top: 0.3em;
  margin-left: 85%;
}
*/
#pressquote {
  max-width: 400px;
}

#pressquote blockquote {
  font-size: 1.5em;
  color: #858789;
  line-height: 1.25em;
  font-weight: normal;
  margin-bottom: 0;
}

#pressquote blockquote:before {
  display: block;
  content: url(../img/n_quote_top.gif);
  margin-bottom: 0.3em;
}

#pressquote blockquote:after {
  display: block;
  content: url(../img/n_quote_btm.gif);
  margin-top: 0.3em;
  margin-left: 85%;
}

/*** newsletter subscribe page ***/
#newsletter {
  padding: 68px 15px 25px 0;
  margin-left: 35px;
  margin-right: 200px;
  min-height: 570px;
  background-color: #fff;
}

/*** join the team page ***/
#join {
  padding: 120px 15px 25px 0;
  margin-left: 35px;
  margin-right: 200px;
  min-height: 570px;
  background-color: #fff;
}

#join h3 {
  color: #858789;
  font-weight: normal;
  font-size: 1.5em;
  margin-bottom: 1em;
}

#join h2 {
  font-weight: normal;
  font-size: 1em;
  margin-bottom: 1em;
  color: #04b0bb;
}

#join h1 {
  color: #858789;
  font-weight: normal;
  font-size: 1em;
}

#join p, #newsletter p {
  font-size: 0.813em;
  line-height: 1.5em;
  color: #4e4e50;
  margin-bottom: 1.5em;
}

.pagelink {
  display: block;
  margin-bottom: 1.5em;
  font-size: 0.75em;
}

a.pagelink:link, a.pagelink:visited {
  text-decoration: none;
  color: #858789;
}
a.pagelink:hover, a.pagelink:active {
  text-decoration: none;
  color: #04b0bb;
}

#join a:link, #join a:visited {
  text-decoration: none;
  color: #858789;
}
#join a:hover, #join a:active {
  text-decoration: none;
  color: #04b0bb;
}

#join hr, #message hr {
  color: #fff;
  background-color: #fff;
  border: 1px dotted #858789;
  border-style: none none dotted;
  margin-bottom: 1em;
  height: 1px;
  display: block;
}

#join form.applyform  fieldset, #newsletter form.subscribeform fieldset {
  margin-bottom: 1em;
  padding-top: 1em;
}

#join form.applyform legend, #newsletter form.subscribeform legend {
  color: #858789;
  padding: 0;
  font-weight: bold;
}

#join form.applyform label, #newsletter form.subscribeform label {
  color: #4e4e50;
  font-size: 0.813em;
  display: inline-block;
  line-height: 1em;
  vertical-align: top;
}

#join form.applyform fieldset ol, #newsletter form.subscribeform fieldset ol {
  margin: 0;
  padding: 0;
}

#join form.applyform fieldset li, #newsletter form.subscribeform fieldset li {
  list-style: none;
  padding: 0;
  margin: 0 0 1em 0;
}

#join form.applyform label, #newsletter form.subscribeform label {
  width: 120px;/* Width of labels */
}

#join form.applyform input, #newsletter form.subscribeform input  {
  color: #4e4e50;
}

#join form.applyform select, #newsletter form.subscribeform select  {
  color: #4e4e50;
}

#join form.applyform select option, #newsletter form.subscribeform select option {
  color: #4e4e50;
}

#newsletter {
  padding: 120px 15px 25px 0;
  margin-left: 35px;
  margin-right: 200px;
  min-height: 570px;
  background-color: #fff;
}

#newsletter h3 {
  color: #858789;
  font-weight: normal;
  font-size: 1.5em;
  margin-bottom: 1em;
}

#message {
  margin: 20px 0 0 20px;
}

#message h3 {
  font-size: 1.5em;
  font-weight: normal;
  margin-bottom: 0.5em;
  color: #858789;
}

#loading{
  text-align: center;
  visibility: hidden;
  position:absolute;
  margin: 30% 0 0 53%;
}

.ref {
  padding:80px 0 0 40px;
}

#contentcolumn h1 {
  color: #a8a8a3;
  font-size: 24px;
  font-weight: 300;
}

#contentcolumn h2 {
  color: #04b0bb;
  font-size: 20px;
  font-weight: 400;
}

#contentcolumn p {
  font-size: 0.9em;
  letter-spacing: 0;
  margin: 10px 0;
  color: #4E4E50;
}

#contentcolumn p a,
#company p a,
#company p a span,
#company ul li a {
  color: #04b0bb;
  text-decoration: none;
}

#contentcolumn p a:hover,
#company p a:hover,
#company p a:hover span,
#company ul li a:hover {
  color: #7D9A9F;
  text-decoration: underline;
}

#company.linkovi p a {
  display: block;
}

#contentcolumn .ref img {
  margin:40px 0 30px;
  border: none;
}

#contentcolumn .ref p img {
  margin: 5px 0 ;
  display: block;
}

#company p.opis {
  font-size: 0.7em;
  color: #a8a8a3;
  padding-left: 5px;
}

#company p.opis:before {
  content: "\002A";
  padding-right: 3px;
}

.cover.boxcaption {
  z-index: 3
}

.flash {
  margin: 5px 25px 0 0;
}

.fb-like {
  height: 20px;
  overflow: hidden;
  margin-bottom: 4px;
}

.obfuscate {
  unicode-bidi: bidi-override;
  direction: rtl;
}

h3.description {
  color: #f7faf9 !important;
  font-family: "Parisienne";
  font-size: 7em !important;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 35px;
  line-height: 0.8;
  margin: 0 !important;
  max-width: calc(100% - 170px);
  text-transform: lowercase;
  -ms-transform: rotate(-6deg);/* IE 9 */
  -webkit-transform: rotate(-6deg);/* Chrome, Safari, Opera */
  transform: rotate(-6deg);
}

.mg-none {
  margin: 0 !important;
}

.mg-btm5 {
  margin-bottom: 5px !important;
}

@media(max-width: 820px) {
  #company {
    margin-right: 0;
  }
}

@media(max-width: 520px) {
  h3.description {
    display: none;
  }
}