/* COLORS
#000    - Black
#333    - Dark grey
#BBB    - Light grey */

div.contentProject {
  max-width: 900px;
  margin: 0 auto 60px;
  padding: 10px;
  font-size: 0;
  white-space: nowrap;
}
  
div.about {
  box-sizing: border-box;
  display: inline-block;
  height: 320px;
  width: 47%;
  width: -webkit-calc(50% - 5px);
  width: calc(50% - 5px);
  margin: 0 0px 10px 0;
  padding: 10px;
  font-size: medium;
  background: #DDD;
  vertical-align: top;
  white-space: normal;
}

div.services {
  box-sizing: border-box;
  display: inline-block;
  height: 320px;
  width: -webkit-calc(50% - 5px);
  width: calc(50% - 5px);
  margin: 0 10px;
  padding: 10px;
  text-align: right;
  font-size: medium;
  background: #DDD;
}

div.services ul {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  margin: auto 0;
  padding-left: 20px;
  text-align: right;
  list-style-type: circle;
  list-style-position: inside;
  direction: rtl; }
div.services ul li {line-height: 200%;}

div.contact {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  border: solid 3px #000;
  padding: 10px;
  background: #DDD;
}

table.contact {
  margin: 0;
}

table.contact td {
}

#map-canvas {
  box-sizing: border-box;
  display: block;
  height: 300px;
  width: 100%;
  padding: 10px;
  background: #BBB;
}

div.employees {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  margin: 10px auto 0px;
  padding: 10px;
  font-size: medium;
  background: #DDD;
}
div.employees a:hover {font-weight: bold;}

div.employees table {
  margin: 0 auto;
  border: none;
}
div.employees table tr {
  margin: 60px 0 !important;
  background: transparent;
}

div.aboutHumans {
  display: inline;
  position: relative;
  float: right;
  bottom: 0;
  font-size: small;
  font-family: monospace;
}

div.aboutHumans a {
  text-decoration: none;
  color: black;
}

div.aboutHumans a:hover {font-weight: bold;}

/* EMPLOYEES */
div.employeeDetails {
  display: table;
  position: relative;
  margin: 20px auto 0;
  padding: 20px;
  background: #DDD;
}

div.employeeDetails p {padding: 5px;}

img.employee {
  float: left;
  padding: 10px 50px;
  background: #DDD;
}

span.name {
  font-size: xx-large;
  font-weight: bold;;
}

span.position {font-size: large;}

span.contactTitle {
  display: none;
  font-size: small;
  color: #333;
}

p.contact {
  padding: 10px;
  line-height: 1.5;
  background: #BBB;
}

img.jerko {
  display: inline;
  float: right;
  margin-left: 10px;
}

/* RESPONSIVE */
@media screen and (max-width: 750px) {
  div.about, div.services {
    display: block;
    width: 100%;
    margin: 0 0 10px 0; }
}