/* font import from Google Font */

@import url(http://fonts.googleapis.com/css?family=Anaheim|Noticia+Text|Marcellus+SC);

/*
  TODO

  > NORMAL * meta-tags/keywords einbauen
  > NORMAL ** Bildergalerie-Startbilder und Header-Bilder
  > MINOR *** Bildergalerie-Bedienung für Touch verbessern (imagelightbox)
  - Google Webmaster Tools: hreflang & sitemap

*/

/* GENERAL FORMATS */

body {color: black; background-color: white; font-family: 'Anaheim'; margin: 0;overflow-x:hidden;}

h1 {font-family:'Noticia Text';font-size:1.4em;text-align:center; letter-spacing: 2px; text-transform: uppercase; font-weight: 400;}
h2 {font-family:'Noticia Text';font-size:1.1em;text-align:center; letter-spacing: 2px; text-transform: uppercase; font-weight: 400;}

p {text-align: justify; font-size: 1em;}

a:link {color:#CB5E00; text-decoration:none; text-transform: uppercase;letter-spacing: .06em;}
a:visited {color:#CB5E00; text-decoration:none;}
a:active {color:#CB5E00; text-decoration:none;}
a:hover {color:#000000; text-decoration:none; border-bottom: 1px solid;}

.presentsite:visited,.presentsite:link {color:#000000;}

.nientespaam {display:none;}

.centered{text-align:center;}

/* FORMAT NAVBAR (MOBILE-DEFAULT) */

#menu {display:none;}

#navbarlabel {z-index: 100;
  position:fixed;
  top:7.5px;right:10px;width: 40px;
  height: 40px;
  text-align: right;
  background: rgba(255, 255, 255, 0.9) url('img/mobile.svg') no-repeat center center;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;}
  
#navbar {z-index:80;
  display: block;
  position: fixed;
  top:-200px;right:0;
  padding:0;margin:0;
  width: 100%;height:auto;
  text-align: center;
  background-color:white;
  border-bottom: 1px solid #CB5E00;
  transition: top 0.5s ease-in-out;
  -webkit-transition: top 0.5s ease-in-out;
  -moz-transition: top 0.5s ease-in-out;}

#navbar ul {display:block;margin:0;padding:0;list-style-type:none;}
  
#navbar li {width:100%;margin:0;margin-top:1em;text-align:center;}

#navbar li:last-child {margin-bottom:1em;}
  
#navbar a {text-decoration: none;text-transform:uppercase;
  letter-spacing:2px;margin:10px auto 20px auto;padding:0;}

nav a span{font-weight:700;}

input:checked ~ nav {top:50px !important;}

/* FORMAT HEADER-FOOTER */

#header {display: block; z-index:90;
  position:fixed; left:0px; top:0px; width: 100%; padding-bottom: 5px; height: 50px;
  background-color:white;
  border-bottom: solid 1px #CB5E00;
  text-align: center;}
  #header a:hover{border:none;}
  .header-logo {width:100px;height:50px;}

/* FORMATS MAIN CONTENT (MOBILE-DEFAULT) */

#container {z-index:1;padding-left: 20px; padding-right: 20px;}

  #content {width: 100%;margin-top: 70px;}

  #footer {padding-top: 0px; height: 40px; width: 100%;border-top: solid 1px #CB5E00; background-color: white;/* opacity:0.8; */}
    #footer p {font-size: .8em; text-align: center; color: #CB5E00; letter-spacing: .1em;}

/* FORMAT SITE-SPECIFIC AREAS */

#reference {display:table;border-collapse:collapse;width:100%;margin-bottom: 20px;
     word-wrap: break-all; word-wrap: break-word;-ms-word-break: break-all;
     -moz-hyphens: auto;-webkit-hyphens: auto;-o-hyphens: auto;-ms-hyphens: auto;hyphens: auto;}
  #reference-row {display:table-row;width:inherit;white-space: normal;}
  #reference-row:first-child{font-family:'Noticia Text';font-size:1em;letter-spacing: 1px; text-transform: uppercase; font-weight: 400;}
    #reference-cll-prj, #reference-cll-plc, #reference-cll-tme {display:table-cell;overflow: hidden;text-align: left; border-bottom: 1px solid #CB5E00;}
      #reference-cll-prj {width: 49%;}
      #reference-cll-plc {width: 29%;}
      #reference-cll-tme {width: 19%; text-align: right;}

#gallerybanner{border:1px solid #000000;width:100%; height:250px;}
    #gallerybanner:hover{border:1px solid #CB5E00;}
    #gallerylink:hover{border:none;}

/* .artbutton {z-index:4; position: fixed; left:40px; padding-left: 15px; padding-right: 15px; padding-top: 7.5px; padding-bottom: 7.5px; bottom: 80px; font-family:"Montserrat"; font-size: 12px; letter-spacing: 1px; word-spacing: 3px; text-align: left; border: black solid 2px;}

.artbutton:hover {background-color:#909090; color:#FFFFFF;border: black solid 2px;}*/

/* FORMAT CONTACT FORM */

.formarea{display: block;width: calc(100% - 20px);margin: 0px auto;}
#contact-form {margin-top: 0;}
#contact-form p {margin-bottom: 0;}

.contact-name,.contact-email,.contact-phone, .contact-fax {margin:0px 0px 20px 0px !important;}

#contact-form input {width:calc(100% - 20px);height: auto;margin: 0;padding: 5px;
  font-family:'Anaheim';font-size:1em;letter-spacing:.05rem;text-transform: uppercase;color: #CB5E00;
  border:0;border-bottom:1px solid #CB5E00;background:none;resize: none;
  -webkit-border-radius:0;-moz-border-radius:0;border-radius:0;
  -webkit-appearance: none; -moz-appearance: none;
  -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
 
 #contact-form textarea {width:calc(100% - 40px);height:auto;margin:0;padding:15px;
  font-family:'Noticia Text';font-size:1em;color: #CB5E00;
  border:1px solid #CB5E00; background: none;resize: none;
  -webkit-border-radius:0;-moz-border-radius:0;border-radius:0;
  -webkit-appearance: none; -moz-appearance: none;
  -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}

#contact-form input:focus {border-bottom:1px solid #000; color:#000;}
#contact-form textarea:focus {border:1px solid #000; color:#000;}

#contact-form .clear,#contact-form .submit{display: inline-block;width:calc((100% - 20px)/2);
  padding: 15px 15px;margin-top: 20px;margin-bottom: 20px;
  border:1px solid #CB5E00;background: transparent;cursor: pointer;
  font-family: 'Anaheim';letter-spacing:.1rem;text-transform: uppercase;color: #CB5E00;text-align: center;
  -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;
  -webkit-appearance: none; -moz-appearance: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;}

#contact-form .clear:hover,.clear:focus {color: #ffffff; border:1px solid #000;background-color: #909090;}
#contact-form .submit:hover,.submit:focus {color: #ffffff; border:1px solid #000;background-color: #CB5E00;}

/* FORMAT NAVIGATION FOR DESKTOP */

@media screen and (min-width: 52em) and (orientation: landscape){

#header{height:100px;
  background-repeat: no-repeat;
  background-position: center bottom;
  -webkit-background-size: cover;
  -moz-background-size: cover;  
  -o-background-size: cover;
  background-size: cover;}

  .header-impressum{background: url(img/impressum.jpg);}
  .header-index{background-image:url(img/gallery/massiv/23.jpg);}
  .header-kontakt{background-image:url(img/gallery/massiv/7.jpg);}
  .header-massiv{background-image:url(img/gallery/massiv/2.jpg);}
  .header-referenzen{background-image:url(img/gallery/restaurierung/12.jpg);}
  .header-restaurierung{background-image:url(img/restaurierung.jpg);}

  .header-logo{width:200px;height:100px;}

#container{width: calc(100% - 520px); margin: 0 auto; padding-left: 40px; padding-right: 40px; bottom: 40px; border-right: 1px solid #CB5E00; border-left: 1px solid #CB5E00;}

#navbarlabel {display: none;}
#navbar{position: fixed; top:120px;background:transparent;border: 0;display: block;width: 100%;}
  #navbar ul {width: 180px;}
    #navbar ul:first-child {float:left;}
    #navbar ul:last-child {float:right;}
    .navbarleft li {float:left;text-align: right !important;line-height: 120%;}
    .navbarright li {float:right;text-align: left !important;line-height: 120%;}

a:link,a:visited {color:#000;}
a:hover,a:active,a:focus{color:#CB5E00;}
.presentsite:visited,.presentsite:link {color:#CB5E00;}

  #content{margin-top:120px;margin-bottom: 80px;}

  #footer {position:fixed;left:0px; bottom:0px;}

  #reference {margin-bottom:0;}
    #reference-cll-prj, #reference-cll-plc, #reference-cll-tme{padding: 10px 20px;}
    #reference-cll-prj {padding-left: 40px;}
    #reference-cll-tme {padding-right: 40px;}

  .formarea {padding-top: 20px;}
    .contact-name,.contact-email,.contact-phone, .contact-fax {width:45%;}
    #contact-form input {padding: 15px;}
    #contact-form .clear,#contact-form .submit{width:calc(40% - 4px);margin-bottom:0;}
}