/*         
Hauptfarben
#785340-dark color
#7d282b-medium color
#c38501-light color
#827376-accent color
*
  1. Allgemeine Regeln
  2. Typography
  3. Listen
  4. Absätze
  5. Horizontale Linien and Clearfix
  6. Verschiedenes
  7. Buttons
  9. Font Icon Styles
 10. Layout Rules
 11. Section Blocks
 12. Footer Area
 13. Image Styles
 14. Ticker Block
 15. Media Queries
*/

/* 1. ==================== Neue Regeln =================== */

.aaa {
	line-height: inherit;
}

/* 1. ==================== Allgemeine Regeln =================== */

table.center {
    margin-left:auto; 
    margin-right:auto;
  }
table {padding: 0; border-collapse: collapse; font-size: 1.0625em; width: 100%;}


/* 2. ====================== TYPOGRAPHY ========================= */
a {
	color: #0000FF;
	font-weight: normal;
	text-decoration: none;
	outline: none;
}
a:hover {
	color: #c38501;
	text-decoration: underline;
	font-weight: normal;
	outline: none;
}
h1 {
	font: 36px Verdana, Helvetica, sans-serif;
	color: #7d282b;
	margin: .3em 0 .3em 0;
	letter-spacing: -1px;
}
h2 {
	font: 34px Verdana, Helvetica, sans-serif;
	color: #7d282b;
	margin: .3em 0;
	letter-spacing: 1px;
	text-align: center;
   	overflow: hidden;}
h2:before,
h2:after {
    border-bottom: 1px solid #7d282b;
    content: "";
    display: inline-block;
    height: .1em;
    position: relative;
    vertical-align: middle;
    width: 50%;
    margin-bottom: .15em;
}
h2:before {right: 0.2em; margin-left: -50%;}
h2:after {left: 0.2em; margin-right: -50%;}

h3 {
	font: 32px 'Jura', Verdana, Helvetica, sans-serif;
	color: #7d282b;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin: 30px 0 25px 0;
	padding: 5px 0;
}
h4 {
	font: normal 28px 'Jura', Verdana, Helvetica, sans-serif;
	color: #7d282b;
	margin: .3em 0;
}
h5 {
	font: normal 24px 'Raleway', Verdana, Helvetica, sans-serif;
	color: #7d282b;
	margin: .3em 0;
}
h6 {
	font: normal 20px 'Raleway', Verdana, Helvetica, sans-serif;
	color: #7d282b;
	margin: .3em 0;
}
.pagename {
	font: 36px Georgia, "Times New Roman", Times, serif;
	color: #d04245;
	margin: .3em 0 .5em 0;
	letter-spacing: -1px;
	text-align:center;
}

/* Classes of Heading Fonts */
.h1 {
	font: 36px Georgia, "Times New Roman", Times, serif;
	color: #7d282b;
	margin: 0 0 .3em 0;
	letter-spacing: -1px;
}
.h2 {
	font: 32px Verdana, Helvetica, sans-serif;
	color: #7d282b;
	margin: .3em 0;
	letter-spacing: 1px;
   	overflow: hidden;}
.h2:before,
.h2:after {
    border-bottom: 1px solid #7d282b;
    content: "";
    display: inline-block;
    height: .1em;
    position: relative;
    vertical-align: middle;
    width: 50%;
    margin-bottom: .15em;
}
.h2:before {
    right: 0.2em;
    margin-left: -50%;
}
.h2:after {
    left: 0.2em;
    margin-right: -50%;
}
.h3 {
	font: 30px 'Jura', Verdana, Helvetica, sans-serif;
	color: #7d282b;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin: 30px 0 25px 0;
	padding: 5px 0;
	border-bottom: 1px solid #7d282b;
}

/* 3. ============== LISTEN ============ */
ul {
	margin: 10px 0 20px 0;
	padding: 0 15px 0 15px;
}
ul li a {color: #7d282b; font-weight: normal; padding: 0;}
ul li a:hover {color: #404040; font-weight: normal; text-decoration: underline;}
ul.list1 li {list-style-type: none; position: relative; margin-left: -10px; margin-bottom: 5px; padding-left: 20px;}
ul.list1 li:before {position: absolute; font-size: 14px; top: 3px; left: 0; content: ""; color: #888;}
ol.leadingzero {background: none; list-style-position: outside; list-style-type: decimal-leading-zero;}

/* 4. ============== Absätze ============ */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.tiny {font-size: 65%; text-align: center; padding-bottom: 10px;}
.small {font-size: 85%;}
.medium {font-size: 90%;}
.large {font-size: 120%;}
.xlarge {font-size: 180%;}
.wide {letter-spacing: 3px;}
.lead {font-size: 1.4em; line-height: 1.5em; font-variant: small-caps; padding-top: 20px; padding-bottom: 20px; }

/* 5. ========== HORIZONTAL RULES AND CLEAR FLOATS ========== */
hr {background-color: #fff; border: none; color: #7d282b; height: 1px; clear: both;}
hr.fancy {padding: 0; border: none; border-top: 1px solid #7d282b; color: #7d282b; text-align: center; margin: 30px 0; clear: both;}
hr.fancy-eng {padding: 0; border: none; border-top: 1px solid #7d282b; color: #7d282b; text-align: center; margin: 10px 0; clear: both;}
hr.fancy-bold {padding: 0; border: none; border-top: 2px solid #7d282b; color: #7d282b; text-align: center; margin: 30px 0; clear: both;}
hr.noshow {background-color: transparent; border: none; color: #fff; height: 0; clear: both; visibility: hidden;}
.clearfix:before, .clearfix:after, .breadcrumbs:before, .breadcrumbs:after, .group:before, .group:after,
.container:before, .container:after {display: table; content: "";}
.clearfix:after, .container:after, .breadcrumbs:after, .group:after {clear: both;}.white * {color: #ffffff;}


/* 7. =========== Verschiedenes =========== */
.color1 {color: #785340;}
.color2 {color: #7d282b;}
.color3 {color: #c38501;}
.color4 {color: #827376;}

.shadow {text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);}
.shadow-light {text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}

.alignleft {float: left; padding: 0; margin: 0;}
.alignright {float: right; padding: 0; margin: 0;}

.dropcap {overflow: hidden;}
.dropcap:first-letter {color: #7d282b;	display: block; float: left; font: 60px/50px Georgia, Garamond, serif;	padding: 6px 4px 0 0;}


.scroll-to-top {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 10px;
	z-index: 5;
	width: 30px;
	height: 30px;
	padding: 8px;
	text-align: center;
	color: #ffffff;
	text-decoration: none;
	background-color: #7d282b;
	box-shadow: inset 0 0 10px #202020, 0 1px 1px rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
	border-radius: 50%;
}
.scroll-to-top:hover {
   text-decoration: none;
	background-color: #c38501;
	box-shadow: inset 0 0 15px #000000, 0 1px 1px rgba(0, 0, 0, 0.5);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.scroll-to-top a, 
.scroll-to-top a:hover {text-decoration: none;}

.authorDate {
	color: #333; 
	font-size: 0.95em; 
	text-transform: uppercase;
	border-bottom: 1px #333 solid; 
	font-weight: lighter; 
	letter-spacing: 2px;
	margin: 0 0 15px 0; 
	padding: 0;
}
.author {
	color: #333; 
	font-size: 0.90em; 
	letter-spacing: 1px;
	margin: 0 0 15px 0; 
	padding: 0;
	font-style:italic;
}


/* 9. ======== ICON STYLES ======== */

.icon-shadow {text-shadow: 1px 2px 3px rgba(0,0,0,0.3);}
.icon-logo {font-size: 140%; display: inline-block;}
.icon-left {margin: 5px 10px 0 0; float: left;}
.icon-right {margin: 5px 0 0 10px; float: right;}
.icon-circle {width: 120px; height: 120px; color: #ffffff; background-color: #b5a275; border-radius: 50%; line-height: 120px; box-shadow: 0 0 0 4px #9e5219 inset, 0 0 0 5px rgba(255, 255, 255, 0.5) inset;}

/* 10. ======== LAYOUT REGELN ======== */
.container {
	max-width: 1200px;
	width: 95%;
	margin: 0 auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}
.inside {width: 96%;	padding: 0 2%;}
.row1, .row2, .row3 {width: 100%;}

/* ======== Row 1 is the dark area used as the header and .footer backgrounds ======== */
.row1 {
	width: 100%;
	background: #202020 url('../images/background.jpg');
	color: #ffffff;
	border-top: 5px solid #7d282b;
	border-bottom: 2px solid #7d282b;
}
/* ======== Top Section Boxes ======== */
#topsection {
    width: 90%;
    padding: 50px 0;
    margin: auto auto 20px auto;
    text-align: center;
}
#mainimage1block, #mainimage2block, #mainimage3block {
	float: left;
  	width: 32%;
  	text-align: center;
}
#mainimage4block {
	float: none;
  	width: 96%;
  	margin-top: 10px; margin-left:1%; margin-right:3%;
}

#mainimage5block, #mainimage6block {
	float: none;
  	width: 96%;
  	margin-top: 5px; margin-left:1%; margin-right:3%;
}
#mainimage4block img, #mainimage5block img, #mainimage6block img {
	border: 2px solid gainsboro;
}

#mainimage1block img  {
	border: 6px #f0f0f0 solid;
	transform: rotate(-9deg);
	box-shadow: 0 0 10px #7d282b;

}
#mainimage2block img {
	border: 6px #f0f0f0 solid;
	transform: rotate(1deg);
	box-shadow: 0 0 10px #7d282b;

}
#mainimage3block img {
	border: 6px #f0f0f0 solid;
	transform: rotate(10deg);
	box-shadow: 0 0 10px #7d282b;

}

/* 11. ======== SECTION BLOCKS ======== */
.topcontentBox2a {float: left; width: 48%; padding: 0; margin: 0 2% 0 0;}
.topcontentBox2b {float: left; width: 48%; padding: 0; margin: 0 0 0 2%;}

.contentBox2a {float: left; width: 48%; padding: 0; margin: 0 2% 0 0;}
.contentBox2b {float: left; width: 48%; padding: 0; margin: 0 0 0 2%;}

.contentBox2afooter {float: left; width: 48%; padding: 0; margin: 0 2% 0 0;}
.contentBox2bfooter {float: left; width: 48%; padding: 0; margin: 0 0 0 2%;}

.contentBox3a {float: left; width: 31.33333%; padding: 0; margin: 0 2% 5px 0;}
.contentBox3b {float: left; width: 31.33333%; padding: 0; margin: 0 1% 5px 1%;}
.contentBox3c {float: left; width: 31.33333%; padding: 0; margin: 0 0 5px 2%;}

.contentBox4a {float: left; width: 23.5%; padding: 0; margin: 0 1% 0 0;}
.contentBox4b, .contentBox4c {float: left; width: 23.5%; padding: 0; margin: 0 1% 0 1%;}
.contentBox4d {float: left; width: 23.5%; padding: 0; margin: 0 0 0 1%;}

.sidebarLeft {float: left; width: 31.3333%; padding: 0; margin: 0 2% 0 0;}
.contentRight {float: right; width: 64.666%; padding: 0; margin: 0 0 0 2%;}

.sidebarRight {float: right; width: 31.3333%; padding: 0; margin: 0 0 0 2%;}
.contentLeft {float: left; width: 64.666%; padding: 0; margin: 0 2% 0 0;}

.contentBox75left  {float: left; width: 73%; padding: 0; margin: 0 2% 0 0;}
.contentBox75right {float: left; width: 73%; padding: 0; margin: 0 0 0 2%;}

.group {
	padding: 0;
	margin-bottom: 0;
	clear: both;
}
#rahmen1  {
	border: 1px black solid;
	box-shadow: 0 0 10px #7d282b;
}


/* 12. ======== FOOTER AREA ======== */
.footer {
	clear: both;
	width: 100%;
	margin: 0 auto;
	color: #ffffff;
	line-height: 1em;
	padding: 0.5em 0 0 0;
}
.footer h3 {
	font: 26px 'Jura', Verdana, Helvetica, sans-serif;
	text-align:center;
	border-top: none;
	border-bottom: 1px solid #fff;
}
.footer a {color: #eee6ed;}
.footer a:hover {color: #ccc;}
.footer ul {
	list-style-type: none; 
	line-height: normal; 
	margin: 0 0 10px 0; 
	padding: 0;
}
.footer ul li {
	margin: 0 20px 0 0; 
	background: url(../images/bullet03.png) no-repeat 0 7px; 
	padding: 4px 0 2px 20px;
}
.footer ul li a {
	color: #eee6ed; 
	text-decoration: none; 
	font-weight: normal; 
	letter-spacing: 2px;
}
.footer ul li a:hover {color: #ccc; }
.footer hr {
	background-color: rgba(0, 0, 0, 0.3); 
	border: none; 
	color: #fff; 
	height: 1px; 
	display: block; margin: 20px 0;
}
.copyright {
	letter-spacing: 3px; 
	text-align: center; 
	color: #fff; 
	font-size: 0.85em; 
	margin: 0; 
	padding:0;
}


/* 13. ======== IMAGE STYLES ======== */
img {
	border: none;
	max-width: 98%;
	box-sizing: inherit;
}
.img-border {margin: 5px 10px 0 0; float: left; border: 1px #777 solid;}
.img-catalog {border: 1px #d0d0d0 solid; max-width: 94%; padding: 1%; margin: 2%;	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);}
.img-curved {border-radius: 10px; margin: 4px 2px; border: 1px #444 solid;	box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-zufall {border-radius: 10px; margin: 4px 2px; border: 1px #444 solid;	box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-right {margin: 5px 0 0 10px; float: right;}
.img-left {margin: 5px 10px 0 0; float: left;}
.img-round {border-radius: 50%; border: 1px #ffffff solid; background-color: #ffffff; padding: 3px; border: 1px #c0c0c0 solid;}


/* 15. ================================ MEDIA QUERIES =============================== */

/* ========================================================== */
/* ====================== SMALL DEVICE 01 ==================== */
/* ========================================================== */
@media screen and (max-width: 60em) {

/* 1. ==================== Neue Regeln =================== */
.aaa {	line-height: 0;}
/* 1. ==================== Neue Regeln =================== */

.container {width: 95%; margin: auto;}
.row1 {width: 100%;}
.infoline {width: 98%; margin-bottom: 10px;}

/* === content box coding ==== */
.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b {width: 98%; margin: 1%; padding: 0;}
.contentBox3a, .contentBox3b, .contentBox3c, 
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 48%; margin: auto; padding: 0;}
/* === miscellaneous coding ==== */
img {max-width: 98%;}
h1 {font-size: x-large;}
h2 {font-size: small;}

}
/* ========================================================== */
/* ===================== SMALL DEVICE 02 ==================== */
/* ========================================================== 
@media screen and (min-width: 321px) and (max-width: 480px) {
.container {width: 95%; margin: 0 auto;}
.row1 {width: 100%;}


.slogan {text-align: center;}

/* === content box coding ==== 
.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b, 
.contentBox3a, .contentBox3b, .contentBox3c, 
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; margin: 1%; padding: 0;}
/* === miscellaneous coding ====
img {max-width: 98%;}
h1 {font-size: x-large;}
}
/* ========================================================== */
/* ================== SMALL DEVICE 03 ================= */
/* ========================================================== 
@media screen and (min-width: 481px) and (max-width: 623px) {
.container {width: 96%; margin: 0 auto;}


/* === content box coding ==== 
.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b, 
.contentBox3a, .contentBox3b, .contentBox3c, 
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 48%; margin: 1%; padding: 0;}
/* === miscellaneous coding ==== 
.contentBox75left {float: none; width: 90%; margin: 0 auto;}
.contentBox75right {float: none; width: 90%; margin: 0 auto;}
/* === miscellaneous coding ==== 
img {max-width: 98%;}
h1 {font-size: x-large;}
}
/* ========================================================== */
/* ================== MID DEVICE 01 ================= */
/* ==========================================================
@media screen and (min-width: 624px) and (max-width: 669px) {
.container {width: 97%; margin: 0 auto;}

/* === content box coding ==== 
.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b, 
.contentBox3a, .contentBox3b, .contentBox3c, 
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 48%; margin: 1%; padding: 0;}
/* === miscellaneous coding ==== 
img {max-width: 98%;}
h1 {font-size: x-large;}
}
/* ========================================================== */
/* ================== MID DEVICE 02 ================ */
/* ==========================================================
@media screen and (min-width: 670px) and (max-width: 768px) {
.container {width: 97%; margin: 0 auto;}

/* === content box coding ====
.contentBox2a, .contentBox2b, 
.contentBox3a, .contentBox3b, .contentBox3c {width: 98%; margin: 1%; padding: 0;}
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 48%; margin: 1%; padding: 0;}
/* === miscellaneous coding ====
img {max-width: 98%;}
h1 {font-size: x-large;}
}
/* ========================================================== */
/* ================== MID DEVICE 03 ================= */
/* ==========================================================
@media screen and (min-width: 769px) and (max-width: 800px) {
.container {width: 97%; margin: 0 auto;}

/* === content box coding ====
.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
.contentBox3a, .contentBox3b, .contentBox3c {width: 98%; margin: 1%; padding: 0;}
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 48%; margin: 1%; padding: 0;}
/* === miscellaneous coding ====
img {max-width: 98%;}
h1 {font-size: x-large;}
}
/* ========================================================== */
/* ================== LG DEVICE 01 ================= */
/* ========================================================== 
@media screen and (min-width: 801px) and (max-width: 1024px) {
.container {width: 97%; margin: 0 auto;}

/* === miscellaneous coding ==== 
img {max-width: 98%;}
h1 {font-size: x-large;}
}
/* ========================================================== */
/* ================== LG DEVICE 02 ================= */
/* ========================================================== 
@media screen and (min-width: 1025px) and (max-width: 1199px) {
.container {width: 97%; margin: 0 auto;}
img {max-width: 98%;}
h1 {font-size: x-large;}

} */