html { 

}

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(/img/werratal.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@font-face {
    font-family: 'hind';
    src: url('fonts/hind-light-webfont.eot');
    src: url('fonts/hind-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/hind-light-webfont.woff2') format('woff2'),
         url('fonts/hind-light-webfont.woff') format('woff'),
         url('fonts/hind-light-webfont.ttf') format('truetype'),
         url('fonts/hind-light-webfont.svg#hindlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'muli';
    src: url('fonts/muli-light-webfont.eot');
    src: url('fonts/muli-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/muli-light-webfont.woff2') format('woff2'),
         url('fonts/muli-light-webfont.woff') format('woff'),
         url('fonts/muli-light-webfont.ttf') format('truetype'),
         url('fonts/muli-light-webfont.svg#mulilight') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
  font-size:24px;
  padding-bottom:24px;
}
h3 {
  font-weight:500;
  font-size:16px;
  padding-bottom:4px;
}

.alltops {
}
.allbots {
      -webkit-transform: translateZ(0);
}

.top {
    position: fixed;
    width: 100%;
    font-family: muli, Helvetica;
    z-index: 1;
    background:#000;
    opacity: 0.9;
}
.top2 {
    position: fixed;
    width: 100%;
    font-family: muli, Helvetica;
    color:#eee;
    z-index: 1;
    background:#000;
    opacity: 0.8;
    margin-top:41px;
}
.top3 {
    width: 100%;
    font-family: muli, Helvetica;
    color:#eee;
    z-index: 1;
    background:#000;
    opacity: 0.6;
    padding-top:77px;
}

.bar {
    background:#000;
    opacity: 0.8;
}
.logobarleft {
  width:50%;
}
.logobarright {
    width:50%;
    text-align: right;
  }
.logo, .logo a, .logo a:hover, .logo a:active, .logo a:visited {
  font-family: muli;
  padding-left:4px;
  font-size: 24px;
  line-height: 28px;
  color:#097aa0; /*#08376d; /*#0c9fa4;*/
}
.logo a:hover {
  color:#138eb3;
}
.bigscreen {
    display: block;
}
  .mobile {
    display: none;
}
#zoek {
    margin: 0px;
    text-align: right;
}
#zimg {
    height:18px;
    width:18px;
    vertical-align: middle;
}
#zoek input[type="text"] {
    margin:0px;
    height:24px;
    padding:0px 4px 2px 8px;
    font-family: muli, Helvetica;
    font-size: 14px;
    background:#333;
    color:#eee;
    opacity: 0.5;
    border:0px;
    border-radius:4px;
    min-width:20%; 
}
#zoek input[type="text"]:focus {
    background:#097aa0;
    opacity: 0.9;
}
.home {
  float:right;
  max-width:20%;
  font-size: 14px;
  line-height:21px;
  color:#ddd;
  font-family: Helvetica, muli;
}
.homefront {
  height:77px;
}
.homedown {
  padding: 12px;
  background: #000;
  opacity: 0.8;
  padding-bottom:36px;
}
.homedivider {
  background:#000;
  opacity: 0.8;
  border-bottom:1px dotted #097aa0;
  padding-top:4px;
  padding-bottom:8px;
  margin-bottom:4px;
  margin-top:4px;
}
#homeimg {
  float:left;
  height:60px;
  width:50px;
  margin-right:8px;
  background-repeat:no-repeat;
  background-position: center center;
  background-color:#000;
  z-index: 2;
}
.catje {
  font-size:12px;
  color:#999;
}

.zoek {
    max-width:1200px;
    margin:0 auto;
    font-family: Helvetica;
    padding-top:77px;
}
.zoekinner {
    line-height: 24px;
    font-size:16px;
    color:#ddd;
    background:#000;
    opacity: 0.7;
    font-family: Helvetica, muli;
    padding:12px 8px 36px 10px;
}

.l {
	float:left;
}
.c { 
	clear:both;
}

.h { 
	display:none;
}

.content {
    width:100%;
    z-index: 1;
}
.contentinner {
    max-width:1200px;
    margin:0 auto;
    font-family: Helvetica;
    line-height: 24px;
    font-size:16px;
}
.contentleft {
  width:50%;
  float:left;
}
.contentright {
  width:30%;
  float:right;
}
.cleft, .cright { /*inner*/
    /*background:#000;
    opacity: 0.7;*/
    z-index: 2;
}
.cleft { margin: 24px 12px 36px 0px; }
.cright { margin: 24px 0px 36px 12px; }

.article, .artheads {
  color:#efefef;
  padding: 22px;
  padding-top:22px;
  color:#ddd;
  background:#000;
  -webkit-transition: all 2s; /* Safari */
  transition: all 2s;
  opacity: 0.7;
}
.article:hover, .reactions:hover, .artheads:hover {
  -webkit-transition: all 2s; /* Safari */
  transition: all 2s;
  opacity: 0.9;
}

.reactions {
  margin-top:24px;
  padding-top:24px;
  padding: 22px;
  color:#888;
  background:#000;
  -webkit-transition: all 2s; /* Safari */
  transition: all 2s;
  opacity: 0.7;
}
.reasin {
  border-top:1px solid #111;
  padding-top:12px;
}
#reag input[type="text"] {
    margin:0px;
    height:24px;
    padding:2px 4px 0px 8px;
    font-family: Helvetica, muli;
    width:50%;
    font-size: 16px;
    background:#333;
    color:#eee;
    opacity: 0.5;
    border:0px;
    border-radius:4px;
    border:1px solid #444;
}
#reag input[type="text"]:hover {
    border:1px solid #097aa0;
}

#reag input[type="text"]:focus {
    background:#097aa0;
    opacity: 0.9;
}

#reag input[type="submit"] {
    font-size: 16px;
    background:#333;
    color:#eee;
    opacity: 0.5;
    border:0px;
    border-radius:4px;
    border:1px solid #444;
}
#reag input[type="submit"]:hover {
    border:1px solid #097aa0;
}
#reag input[type="submit"]:focus {
    background:#097aa0;
    opacity: 0.9;
}

#reagtext {
    margin:0px;
    padding:8px;
    font-family: Helvetica, muli;
    font-size: 16px;
    background:#333;
    color:#eee;
    opacity: 0.5;
    border:0px;
    border-radius:4px;
    width:50%;
    min-height: 150px;
    border:1px solid #444;
}
#reagtext:hover {
    border:1px solid #097aa0;
}
#reagtext:focus {
    background:#097aa0;
    opacity: 0.9;
}
#reagans {
    max-width:20px;
    text-align:center;
}
.footer {
    position:fixed;
    bottom:0px;
    height:36px;
    width: 100%;
    font-family: muli, Helvetica;
    color:#555;
    background:#000;
    opacity: 0.7;
}
.footerinner {
    max-width:1200px;
    margin:0 auto;
    padding:8px;
    text-align: right;  
}

/*contactform */
#cform, #cform textarea, #cform input[type='text'], #cform input[type='submit'] {
  font-family: hind, muli, Helvetica;
  font-size: 16px;
  color:#eee;
}
#cform input[type='text'], #cform textarea, #cform input[type='submit'] {
  margin:0px;
  padding:4px;
  border-radius: 2px;
  background: #222;
  width:250px;
  margin-top:4px;
  margin-bottom:4px;
  border:0px;
}
#cform input[type='text']:hover, #cform textarea:hover, #cform input[type='submit']:hover {
  background:#333;
}
#cform textarea {
  height:150px;
}
#cform input[type='submit'] {
  width:258px;
}
#cform input[type='submit']:hover {
  background:#333;
  cursor: pointer;
}

/* tablets */
@media screen and (max-width: 880px){
  .home {
    float:none;
    max-width:100%;
  }
  .contentleft {
    width:60%;
    float:left;
  }
  .contentright {
    width:40%;
    float:right;
  }
}

/* mobiles */
@media screen and (max-width: 480px){
  .logobarleft {
    width:20%;
  }
  .logobarright {
    width:80%;
    text-align: right;
  }
  .bigscreen {
    display: none;
  }
  .mobile {
    display: block;
  }
  .contentleft {
    width:100%;
    float:none;
  }
  .contentright {
    width:100%;
    float:none;
  }
  .cleft, .cright { /*inner*/
    margin: 0px;
    margin-top:24px;
  }
  .menuinner {
    padding-top:10px;
    padding-bottom:10px;
  }
  .menuitem {
    width:20%;
    padding:0;
  }
  .menuiteminner {
    transition: all 0.2s ease;
    color:#c5ecda;
    font-size:16px;
    text-decoration: none;
    text-align: center;
    width: 100%;
    padding:0px;
  }
  .menuiteminner a {
    transition: all 0.2s ease;
    color:#0c9fa4;
    font-size:16px;
    text-decoration: none;
  }
  
  #wdkig {
    text-align: center;
    padding-top:10px;
  }
  #room {
    padding-pottom:37px; /*for downbar*/
  }
}