/* Abridged version of Normalize.css
   ========================================================================== */
/* original authors: Nicolas Gallagher and Jonathan Neal - http://necolas.github.com/normalize.css/ */

/* corrects block display not defined in IE7-9, Firefox3 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/* corrects inline-block display not defined in IE7-9, Firefox3 */
audio,
canvas,
video {
  display: inline-block;
  /* display and zoom IE7 fix for display:inline-block */
  *display: inline;
  *zoom: 1;
}

/* prevents modern browsers from displaying 'audio' without controls, remove excess height in iOS5 devices */
audio:not([controls]) {
  display: none;
  height: 0;
}

/* addresses styling for 'hidden' attribute not present in IE7-9, Firefox3, Safari4 */
[hidden] {
  display: none;
}

html {
  /* corrects text resizing oddly in IE7 when body font-size is set using em units -
     http://clagnut.com/blog/348/#c790 */
  font-size: 100%;
  /* always force scrollbar padding so we don't get 'jumping' */
  overflow-y: scroll;
  /* prevents iOS text size adjust after orientation change, without disabling user zoom -
     http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
  -webkit-text-size-adjust: 100%;
  /* as above, for Windows Phone */
  -ms-text-size-adjust: 100%;
}

/* Addresses margins set differently in IE7 */
p,
pre {
  margin: 1em 0;
}

/* addresses style set to 'bolder' in Firefox3-4, Safari4-5, Chrome */
b,
strong {
  font-weight: bold;
}

/* addresses CSS quotes not supported in IE7, addresses quote property not supported in Safari4 */
q {
  quotes: none;
}

q:before,
q:after {
  content: "";
  content: none;
}

/* prevents sub and sup affecting line-height in all browsers */
sub,
sup {
  /* 12px */
  font-size: .85714285714286em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* removes border when inside 'a' element in IE7-9, Firefox3, improves image quality when scaled in IE7 -
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}

/* consistent tables */
table {
  margin-bottom: 1em;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* make table cells align top and left by default */
th,
td {
  vertical-align: top;
  text-align: left;
}

/* addresses margins set differently in IE7 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}
dd {
  margin: 0 0 0 2em;
}

/* remove margins from nested lists */
dl dl,
ul ul,
ol ol {
  margin: 0;
}

/* addresses paddings set differently in IE7 */
menu,
ol,
ul {
  padding: 0 0 0 2em;
}


/* Clearfix
   ========================================================================== */
/* updated to prevent margin-collapsing on child elements in most situations -
   http://nicolasgallagher.com/micro-clearfix-hack/ */

.clearfix,
header,
nav ul,
.container,
footer,
#paginator,
#monthly-list {
  /* zoom IE7 fix */
  *zoom: 1;
}

.clearfix:before,
.clearfix:after,
header:before,
header:after,
nav ul:before,
nav ul:after,
.container:before,
.container:after,
footer:before,
footer:after,
#paginator:before,
#paginator:after,
#monthly-list:before,
#monthly-list:after {
  content: "";
  display: table;
}

.clearfix:after,
header:after,
nav ul:after,
.container:after,
footer:after,
#paginator:after,
#monthly-list:after {
  clear: both;
}


* { margin: 0px ; padding: 0px ; }
body { height: 100%; font-size: 1.1rem; line-height: 1.6rem; color: #444444; background: #a1ccd0; font-family: univers-next-pro-condensed, sans-serif; font-weight: 400; font-style: normal; }

#thegreatwrapper { width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#wrapper { width: 1080px; margin: 0 auto; }

#wrapper_header { position: fixed; top: 60px; z-index: 24; }
#header { width: 1040px; height: auto; padding: 0 20px; }
#logo { height: auto; float: left; margin-left: -4px;}
#logo img { height: 100px; }
.navigation { letter-spacing: 0.01rem; }
#navigation_top { height: 100px; float: right; font-family: univers-next-pro-condensed, sans-serif; font-weight: 400; font-style: normal;font-size: 1.05rem; line-height: 1.4rem; }
#navigation_top li { list-style-type: none; display: inline-block; margin-left: 2rem; }
#navigation_top_1 { height: 48px; float: right; border-bottom: 1.5px solid #444444; }
#navigation_top_2 { height: 50px; width: auto; max-width: 530px; margin-top: 48px; padding-top: 0.5rem; border-top: 1.5px solid #444444; text-align: end; } 
.fadeIn {
      -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#navigation_top_2.nav_top_2_info { padding-top: 1.9rem; }

.navigation a:link, .navigation a:visited { text-decoration:none; color: #444444; }
#navigation_top_1 a:link { margin-left: 2rem; }
.navigation a:hover, .navigation a:active, .navigation a.active { text-decoration:none; color: #E6332A; }
.active { color: #E6332A; }
/*nur bei aktivem fadeIn aktivieren: .fadeIn.active { text-decoration:none; color: #E6332A; }*/

#content { width: 96%; height: auto; padding: 0 2%; margin-top: 230px; }
#content a { text-decoration: none; color: #E6332A; }
.article_img_kl li { list-style: none; display: inline; margin-right: 10px; }
.article_img_kl img { max-height: 300px; width: auto; max-width: 500px; height: auto; margin-bottom: 15px; }
#article_img_gr img { height: 400px; width: auto; margin-bottom: 15px; }
.posted { font-size: 0.9rem; }
.title { font-size: 1.4rem; margin-bottom: -0.2rem; }
.heading { display: block; margin-bottom: 15px; margin-left: 10px; letter-spacing: 0.03rem; }
#text { font-family: adobe-caslon-pro, serif; font-weight: 400; font-style: normal; margin-left: 1px; margin-bottom: 6rem; }
#text:last-of-type { margin-bottom: 0rem; }
#instagram_logo { background-image: url("images/135.png"); background-repeat:no-repeat; background-size:100%; width: 20px; height: 20px; vertical-align: text-bottom; }

#content div#contain_the_containers { margin-left: -10px; }
#content div.container_teaser { height: 180px; position: relative; margin-left: 10px; margin-bottom: 15px; display: inline-block; }
#content div.quadrat { width: 180px; }
#content div.quer { width: 270px; }
#content div.hoch { width: 120px; }
#content div.container_teaser div.teaser_img { height: 100%; width: 100%; z-index: 0; position: absolute; }
#content div.container_teaser div.teaser_img img { height: 100%; width: 100%; }
#content div.container_teaser div.teaser_text { display: none; z-index: 1; position: absolute; width: 100%; text-align: center; padding-top: 81px; margin: auto; }
#content div.container_teaser div.teaser_text_alot { display: none; z-index: 1; position: absolute; width: 100%; text-align: center; padding-top: 55px; margin: auto;}
#content div.container_teaser a { color: #444444; font-size: 1.6rem; }
#content div.container_teaser a:hover div.teaser_img { opacity: 0.3; }
#content div.container_teaser a:hover div.teaser_text { display: block; }
#content div.container_teaser a:hover div.teaser_text_alot { display: block; }

h2 { font-family: univers-next-pro-condensed, sans-serif; font-weight: 400; font-style: normal;font-size: 1.2rem; }
b { font-weight: normal; }
i { font-family: adobe-caslon-pro, serif; font-weight: 400; font-style: italic; }

img.ringe { height: 180px; margin-left: 10px; margin-bottom: 15px; }
img.ketten { height: 240px; margin-left: 10px; }
img.armschmuck { height: 180px; margin-left: 10px; margin-bottom: 15px; }
img.ohrschmuck { height: 180px; margin-left: 10px; margin-bottom: 15px; }
img.broschen { height: 180px; margin-left: 10px; margin-bottom: 15px; }
img.manschettenknoepfe { height: 180px; margin-left: 10px; margin-bottom: 15px; }
img.glh { height: 180px; margin-left: 10px; margin-bottom: 15px; }

img.news_zusatz { height: 180px; margin-left: 0px; }

audio { width: 290px; }

.row { display: flex; }
.column_2 { flex: 50%; }

.tab_wide { width: 160px; }
.tab_narrow { width: 80px; }


#footer { width: 96%; height: auto; padding: 0 2%; background: yellow; }
#navigation_bottom { margin-top: 50px; margin-bottom: 24px; padding-left: 2rem; padding-top: 20px; float: right; border-top: 1.5px solid #444444; font-size: 1.05rem; line-height: 1.4rem; }
#navigation_bottom li { list-style-type: none; display: inline; }
#navigation_bottom a:link { margin-left: 2rem; }



@media only screen and (max-width: 1080px) {

#wrapper { width: 90%; }
#wrapper_header { width: 90%;}
#header { width: 96%; padding: 0 2%; }
#logo { margin-left: -6px; }
}


@media only screen and (max-width: 1020px) {

#logo img { height: 80px; }
#navigation_top { height: 80px; font-size: 0.95rem; line-height: 1.2rem; }
#navigation_top_1 { height: 36px; }
#navigation_top_2 { height: 30px; max-width: 450px; padding-top: 0.45rem; margin-top: 36px; }
#navigation_top_2.nav_top_2_info { padding-top: 1.7rem; }
#navigation_bottom { font-size: 0.95rem; line-height: 1.2rem; }
#content { margin-top: 210px; }
}


@media only screen and (max-width: 850px) {

#logo { margin-left: -4px; }
#logo img { height: 70px; }
#navigation_top { height: 70px; font-size: 0.85rem; line-height: 1.1rem; }
#navigation_top_1 { height: 30px; }
#navigation_top_1 a:link { margin-left: 1.5rem; }
#navigation_top_2 { height: auto; max-width: 405px; padding-top: 0.45rem; margin-top: 30px; }
#navigation_top li { margin-left: 1.5rem; }
#navigation_top_2.nav_top_2_info { padding-top: 1.5rem; }
#navigation_bottom { font-size: 0.85rem; line-height: 1.1rem; }
#content { margin-top: 190px; }
}

@media only screen and (max-width: 760px) {

#wrapper { width: 100%; }
#wrapper_header { width: 100%; top: 30px; }
#header { width: 100%; top: 30px; padding: 0; }
#logo { width: 70%; clear: both; float: none; padding-bottom: 1.5rem; padding-left: 5%; }
#logo img { width: 100%; height: auto; }
#navigation { 100%; }
#navigation_top { width: 100%; float: none; clear: both; height: 70px; font-size: 1rem; line-height: 1.3rem; }
#navigation_top_1 { width: 100%; float: none; clear: both; height: auto; padding-bottom: 0.3rem; }
#navigation_top_1 li:first-of-type { padding-left: 5%; }
#navigation_top_1 a:link { margin-right: 1.5rem; margin-left: 0px; }
#navigation_top_2 { width: 90%; margin: 0 auto; float: none; clear: both; max-width: none; text-align: left; border-top: 0; padding-top: 0.6rem; }
#navigation_top li { margin-right: 1.5rem; margin-left: 0px; }
#navigation_top_2.nav_top_2_info { padding-top: 0.6rem; }
#content { width: 90%; margin: 0 auto; margin-top: 350px; } 
#article_img_gr img { width: 100%; height: auto; }
.article_img_kl img { height: 250px; }
#footer { width: 90%; margin: 0 auto; } 
#navigation_bottom { font-size: 1rem; line-height: 1.3rem; }
}

@media only screen and (max-width: 700px) {

#content { margin-top: 320px; } 
}

@media only screen and (max-width: 580px) {

body { font-size: 1rem; line-height: 1.5rem; }
#navigation_top_1 a:link { margin-right: 1rem; }
#content { margin-top: 300px; } 
.heading { margin-left: 5px; margin-top: -40px; }
.heading:first-of-type { margin-top: 0px; }
.heading_inbetween { margin-top: 0px; }
#text { margin-bottom: 4rem; }
#text:last-of-type { margin-bottom: 0rem; }
#content div#contain_the_containers { margin-left: -5px; }
#content div.container_teaser { height: 90px; margin-left: 5px; margin-bottom: 5px; }
#content div.quer { width: 135px; }
#content div.hoch { width: 60px; }
#content div.quadrat { width: 90px; }
#content div.container_teaser div.teaser_text { display: none; z-index: 1; position: absolute; width: 100%; text-align: center; padding-top: 40.5px; margin: auto;}
#content div.container_teaser div.teaser_text_alot { display: none; z-index: 1; position: absolute; width: 100%; text-align: center; padding-top: 27.5px; margin: auto; line-height: 0.8rem; }
#content div.container_teaser a { color: #444444; font-size: 0.8rem; }
img.ringe, img.armschmuck, img.ohrschmuck, img.broschen, img.manschettenknoepfe, img.glh { height: 90px; margin-left: 5px; margin-bottom: 5px; }
img.ketten { height: 120px; margin-left: 5px; }
.article_img_kl img { width: 100%; height: auto; }
img.news_zusatz { width: 100%; height: auto; }
}

@media only screen and (max-width: 414px) {

#logo { width: 75%; }
#navigation_top { font-size: 0.9rem; line-height: 1.2rem; }
#content { margin-top: 270px; } 
#navigation_bottom { font-size: 0.9rem; line-height: 1.2rem; }
audio { width: 100%; }
.row { display: block; }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
#wrapper_header { position: static; margin-top: 60px; z-index: 24; }
#content { margin-top: 30px; } 
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
#wrapper_header { position: static; margin-top: 60px; z-index: 24; }
#content { margin-top: 30px; } 
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
#wrapper_header { position: static; margin-top: 60px; z-index: 24; }
#content { margin-top: 30px; } 
}

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
#wrapper_header { position: static; margin-top: 60px; z-index: 24; }
#content { margin-top: 30px; } 
}