/* CSS Document */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; 
height: 100%;
}

* { margin: 0; padding: 0;}

body, button, input, select, textarea { font-family: 'Hind', sans-serif; }
body {
background: #fff;
font-size: 1em;
line-height: 1.5em;
color: rgb(102,102,102);
height:100%;
}

.gridContainer {
width: 95%;
height: 100%;
margin: 0 auto;
}

#Links { 
display: none;
} 

main {
width: 100%;
height: 66%;
float: left;
margin: 1em 0 2em 0;
clear: right;
}

a { text-decoration: none; color: rgb(175,175,175); }
a:visited { color: rgb(102,102,102); }
a:hover { color: rgb(0,0,0); }
a:focus { text-decoration: none; }

/* Verbessert in allen Browsern die Lesbarkeit von Hyperlinks, die über die Tabulatortaste fokussiert werden (focus) und von Hyperlinks, auf die der Mauszeiger gerichtet ist (hover): h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typografie
   ========================================================================== */

p, ul {
margin-bottom: 1.5em;
}

#links { 
-ms-hyphens: auto; 
-moz-hyphens: auto; 
-webkit-hyphens: auto; 
hyphens: auto; 
} 

h1 {
font-weight: 400;
font-size: 1.5em;
line-height: 1.25em;
margin:0em 0 0.5em 0;
letter-spacing: 0.1em;
}
h2 {
  font-weight: 500;
  font-size: 1.25em;
margin-bottom: 1em;
}
h3 {
  font-weight: 600;
  font-size: 1.125em;
margin-bottom: 0.5em;
}

button {
margin: 0.5em 0 0 0;
}

input, textarea {
width:100%;
max-width: 600px;
margin: 0 0 0.5em 0;
}

#navigation li.last {
margin-right: 0em !important;
}

#navigation ul {
list-style: none;
padding: 0;
margin: 1em 0 0.5em 0;
}

#navigation .nav-child {
margin: 0em 0 0.5em 1em;
}

#logo a {
color: #ffffff;
}

#logo a:visited {
color: #fff;
}

#logo a:hover {
color: #fff;
}

/* Maximenu CK */

.maximenuckv {
font-size: 1rem !important;
line-height: 1.5rem !important;
}

/* Bilder */

.pull-right {
float:right;
margin: 0 0 1.5em 2em;
}
.pull-left {
float:left;
margin: 0 2em 1.5em 0;
}
figcaption {
font-size: 0.8175rem;
}

/* JOOMGALLERY */

.gallery {
height: 100%;
}
.jdGallery a.left, .jdGallery a.right {
background: none !important;
}
.jdGallery a.left:hover {
background: url(../grafik/pfeil-links.png) no-repeat center left !important;
}
.jdGallery a.right:hover {
background: url(../grafik/pfeil-rechts.png) no-repeat center right !important;
}
#jg_dtl_photo {
position: relative;
top: 0;
bottom: 0;
width: 100% !important;
height: 100% !important;
margin: 0 0 0 0 !important;
/*border: 1px solid #ccc; */
 border: none !important;
}
.slideElement {
left: 0px !important;
width: 100% !important;
background-size: contain;
background-position: top center !important;
background-color: #fff;
}
#JGInfo {
margin: 1em 0 0 0;
}
.jg_imgtitle {
padding: 0;
text-align: left;
}
.jg_details, .jg_photo_right {
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.jg-footer, .jg_photo_left {
display: none;
}
#jg_displaynone {

}
div.current {
border: none;
padding: 0;
margin: 0;
}


@media only screen and (min-width: 641px) {

#navigation .moduletable {
display:none;
}

#Links { 
width: 15%;
margin: 2em 5% 0 0;
float: left;
display: block;
} 
main {
width: 70%;
height: calc(100% - 4em);
float: left;
margin: 2em 0 2em 0;
clear: right;
}
#JGInfo {
position: absolute;
width: 15%;
left: 2.5%;
bottom: 1.5em;
}


} 



@media only screen and (min-width: 769px) {

h1 {
font-weight: 400;
font-size: 1.5em;
}
h2 {
  font-weight: 500;
  font-size: 1.25em;
margin-bottom: 1em;
}
h3 {
  font-weight: 500;
  font-size: 1em;
}
.slideElement {
left: 40px !important;
width: calc(100% - 80px) !important;
}
.jdGallery a.left {
background: url(../grafik/pfeil-links.png) no-repeat center left !important;
opacity: 0.7 !important;
}
.jdGallery a.right {
background: url(../grafik/pfeil-rechts.png) no-repeat center right !important;
opacity: 0.7 !important;
}
.jdGallery a.left:hover, .jdGallery a.right:hover {
opacity: 1 !important;
}
}