/* ------------------------ COMMON ------------------------ */
.backgroundPanel{
    background: url("img/patroon.jpg") repeat scroll left top #FFFFFF;
    display: block;
    height: 50%;
    position: absolute;
    top: 50%;
    width: 100%;
}

.wrapper{
    position:absolute;
    top:50%;
    height:550px;
    width: 100%;
    margin-top:-275px;
    overflow: hidden;
}

.panel{
  position: absolute;
  left: 50%;
  width: 975px;
  margin-left: -463px;
}

.left{
  float: left;
}

.right{
  float: right;
}

.topPanel{
  height: 100px;
  margin-top: -275px;
  background: #FFFFFF;
}

.topPanel .logo {
  float: left;
  height: 70px;
  width: 150px;
  background: url(img/damme-bouw.x1.jpg);
  text-indent: -9999px;
  margin-top: 2px;
  margin-right: 20px;
}

header div.logo a{
  display: block;
  height: 100%;
}

header h1{
  display: block;
  height: 100%;
}

.navigation ul li a, .navigation ul li a:active, .navigation ul li a:visited{
  color: #D8BF45;
  text-transform: uppercase;
  font-size: 14px;
  font-family: HelvNeueLTBdCon;
  text-decoration: none;
}

.navigation ul li a:hover{
  color: #387357;
}

.navigation ul li {
  float: left;
  margin-left: 15px;
  margin-top: 50px;
}

.navigation ul li.active {
  border-bottom: 1px solid #387357;
}

.navigation.bottom {
  bottom: 50px;
  position: absolute;
}

.middlePanel{
  height: 400px;
  margin-top: -175px;
  background: #ECEFEE;
}

.footerPanel{
  height: 50px;
  margin-top: 225px;
  background: none;
}

.footerPanel h2{
  margin-top: 25px;
  float: left;
}

.footerPanel .panel > a {
    text-decoration: none;
}

.footerPanel .copyright{
  color: #C3C3C3;
  float: left;
  font-family: HelvNeueLTMd;
  font-size: 8px;  margin-left: 275px;
  margin-top: 30px;
}


.footerPanel .copyright > a, .footerPanel .copyright > a:hover, .footerPanel .copyright > a:visited {
    color: #C3C3C3;
    text-decoration: none;
}
.overlay{
  top: 50%;
  margin-top: -276px;
  padding-left: 25px;
  padding-right: 25px;
  position: absolute;
  left: 50%;
  background: none repeat scroll 0% 0% #FFFFFF;
  height: 550px;
  margin-left: 136px;
  width: 250px;
  box-shadow: 5px 5px 5px 5px rgba(40, 40, 40, 0.1);
  border: 1px solid #EEEEEE;
}

h2, h3{
  margin-top: 50px;
  text-transform: uppercase;
  color: #387357;
  font-size: 14px;
  font-family: HelvNeueLTBdCon;
}

h3{
  color: #FFFFFF;
  margin-top: 0px;
  margin-bottom: 15px;
}

.text{
  color: #888888;
  font-family: HelvNeueLTMd;
  font-size: 12px;
  height: 400px;
  margin-top: 32px;
}

.text p{
   padding-bottom: 15px;;
}

.text p a, .text p a:active, .text p a:visited
{
  color: #387357;
  text-decoration: none;
}

.text p a:hover
{
  color: #D8BF45;
  text-decoration: none;
}

.text .box{
  background: #D8BF45;
  display: block;
  position: absolute;
  bottom: 50px;
  color: white;
  padding: 15px;
  width: 220px;
}

.text .navigation li {
  margin-left: 0;
  margin-top: 5px;
  width: 250px;
}

.table{
  height: 100px;
}

.table .day {
  clear: both;
  float: left;
  width: 35px;
}

.table div {
  float: left;
  width: 210px;
}

.contactForm {
  float: left;
}

.clearer{
  clear: both;
  padding-top: 5px;
}

label {
  float: left;
}

input, textarea{
  clear: both;
  float: left;
  width: 555px;
}

textarea{
  height: 80px;
}

.homeSlider {
  width: 600px;
}

.realisaties .overlay,
.realisaties .topPanel,
.realisaties .middlePanel .panel > img  {
  display: none;
}

.realisaties .middlePanel {
  height: 500px;
  margin-top: -275px;
}

.realisaties .homeSlider {
  text-align: center;
  width: 975px;
}

.realisaties .left {
  float: none;
}

.realisaties .footerPanel .panel {
  margin-left: -87px;
  width: 214px;
}

.realisaties .footerPanel .panel .navigation ul li {
  margin-top: 24px;
}

.realisaties .footerPanel h2{
  width: 45px;
  text-align: right;
}

.realisaties img {
  position: relative !important;
}

.jspVerticalBar{
  width: 10px !important;
}

.jspDrag{
  background: #D8BF45 !important;
}

.jspTrack{
  background: #FFFFFF !important;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) {

.topPanel .logo {
    background: #fff url(img/damme-bouw.x2.jpg) no-repeat left top;
    background-size: 100% 100%;
  }

}