@charset "utf-8";

@font-face{ font-family: TitilliumExtraLight; src:url('../Fonts/TitilliumWeb-ExtraLight.ttf'); }
@font-face{ font-family: TitilliumLight; src:url('../Fonts/TitilliumWeb-Light.ttf'); }
@font-face{ font-family: TitilliumSemibold; src:url('../Fonts/TitilliumWeb-SemiBold.ttf'); }

/* reset css in all browsers start */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; }
/* reset css in all browsers end */

/* main css start */
html { overflow: -moz-scrollbars-vertical; overflow-y: scroll; }
body{ font-family:TitilliumExtraLight; font-size:22px; color:#777; line-height:1.4em; letter-spacing: 0.03em; background:#fff; /*background:#f5f5ed;*/ }
hr{ clear:both; border:0px; border-bottom:1px dotted #ccc; height:0px; padding:5px 0 5px 0; margin:0px; }
a{ text-decoration:none; color:#777; }
div.clear{ clear:both; line-height:1px; height:1px; }
div.csc-header{ clear:both; padding:0px; margin:0; }
h1, h2, h3, h4{ font-family:TitilliumSemibold; color:#777; margin-bottom:10px; }
h1{ font-size:2em; line-height:1.3em; margin-bottom:15px; font-weight:normal; }
h2{ font-size: 1.2em; line-height:1.4em; }
h3{ font-size:1em; line-height:1.2em; font-family:TitilliumExtraLight; }
h4{ font-size:0.9em; font-weight:normal; margin-bottom:5px; }
#content h1 a, #content h2 a, #content h3 a, #content h4 a{ text-decoration:none; }
ul{ list-style:none; }
input, textarea, select{ border:1px solid #d7d7d7; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset; padding:5px; font-family:TitilliumExtraLight; font-size:12px; }
input:focus, textarea:focus{ background:#fbfbfb; }
input.readonly, textarea.readonly, select.readonly{ background:#ddd; font-style:italic; }
sub, sup{ font-size:80%; line-height:0; position:relative; vertical-align:baseline; }
sup{ top: -0.5em; }
sub{ bottom: -0.25em; }
.f-left{ float:left; width:50%; }
.f-right{ float:right; width:50%; }
.notshow{ display:none; }
strong { font-family: TitilliumLight; font-weight: bold; }

#container { width: 1600px; margin: 0 auto; margin-top: 50px; margin-bottom: 50px; }
#header { width:60%; margin: 0 auto; }
.logoImg { width: 90%; float: left; text-align: right; } 
.logoImg img { width: 90%; height: auto; }
.logoImg img .st0 { fill: #fff; }
.naviImg { width: 10%; float: left; text-align: left; }
.naviImg img { width: 50px; height: auto; margin-left: 20px; margin-top: 15px; cursor: pointer; }

#breadcrumb { margin-top: 20px; text-align: center; background:; }
#breadcrumb a { font-family: TitilliumLight; border: 1px solid #3F2002; border-radius: 8px; color: #3F2002; padding: 3px 15px 3px 15px; margin-left: 15px; font-size: 14px; }
#breadcrumb a:first-child { margin-left: 0; }
#breadcrumb a:hover { background: #3F2002; color: #fff; } 

.navigation { display: none; }
.navigation.show { display: block; position: absolute; right: 0; top: 0; width: 22%; background: #eaebed; 
padding: 20px 20px 20px 20px; z-index: 2000; box-shadow: 5px 1px 15px 1px rgba(0,0,0,0.49); min-height: 100vh; }
.navigation .close { padding:10px; font-size: 1.4em; cursor: pointer; margin-top:-10px; }
nav { margin-top: 20px; margin-left: 10px; }
nav ul a { display: block; margin-bottom: 10px; border-bottom: 2px solid #fff; line-height: 50px; }
nav ul a:hover { color: #fff; }

#content{ margin-top:25px;  margin-bottom: 20px; }
#content ul { list-style: square; margin-top: 20px; margin-bottom: 20px; }
#content li { margin-left: 60px; }
#content a, .contactbanner a { text-decoration: underline; }
#content .menuList { list-style: none; margin:0; }
#content .menuList li { margin-left: 0; margin-bottom: 5px; }
#content .menuList li:hover .menulistOverlay { opacity:0; }
#content .menuList li a { display: block; line-height:1; }
#content .menuList, #content .ce-gallery--cols3 { display: flex; flex-wrap: wrap; }
#content .menuList li, #content .ce-gallery--cols3 figure{ flex: 0 0 32.9%; margin-right:0.6%; position: relative; }
#content .menuList li:nth-child(3n), #content .ce-gallery--cols3 figure:nth-child(3n){ margin-right: 0; }
#content .menuList li img, #content .ce-gallery--cols3 img { width: 100%; height: auto; }
#content .menuList li .menulistOverlay { flex: 1; position: absolute; top: 0; background:#000; opacity:0.6; width:100%; height:99%; }
#content .menuList li h3 { font-family: TitilliumLight; font-weight: normal; color:#fff; text-transform: uppercase; position: absolute; top: 50%; transform: translateY(-50%); text-align: center; width:100%; }
#content .ce-gallery figure figcaption { font-size: 24px; line-height: 26px; text-align: center; }
#meta-nav  { width: 100%; text-align: center; } 
#meta-nav li { display: inline; margin-right: 40px; }
#meta-nav li.last { margin-right: 0; }
#meta-nav li a { font-size: 24px; }
.socialmenu { text-align: center; margin-top: 30px; }
.socialmenu img { height: 30px; margin-right: 20px; }
.contactbanner { background: #777; color:#fff; padding: 20px 5% 20px 5%; margin-bottom: 20px; width: 90%; border-radius: 38px; }
.contactbanner h2, .contactbanner h3, .contactbanner a { color:#fff; }
.shopbanner { margin-bottom: 20px; }

#content .ce-textpic.ce-below .ce-bodytext { margin-bottom:20px; }
#content .ce-gallery--cols1 img { width: 99.8%; height: auto; }

#lightbox .lb-data .lb-number { font-size: 18px; color: #fff; }

#faqArea { padding: 30px 0 40px 0; }
#faqArea h2 { text-align: center; margin-bottom: 40px; }
#faqArea .faqEntry { border-bottom: 1px dotted #777; padding-bottom: 15px; cursor: pointer; }
#faqArea .faqEntry h3 { font-family:TitilliumSemibold; font-size: 0.9em; line-height: 1.2em; font-weight: normal; 
background: url("/typo3conf/ext/site_andre_weber/Resources/Public/Images/faq-arrow-down.png") left center no-repeat; padding-left: 40px; }
#faqArea .faqEntry.show h3 { background: url("/typo3conf/ext/site_andre_weber/Resources/Public/Images/faq-arrow-up.png") left center no-repeat; }
#faqArea .faqEntry .ce-bodytext { font-size:0.9em; line-height: 1.4em; padding-left: 40px; }
#faqArea .faqEntry .ce-textpic { display: none; }
#faqArea .faqEntry.show .ce-textpic { display: block; }

/* main css end */

/* frame styles start */
.txtBoxMargin { margin-top: 20px; margin-bottom: 40px; }
.txtBoxMarginTop { margin-top: 20px; }
.txtBoxMarginBtm { margin-bottom: 30px; }
.txtSmallBox { font-size: 1em; margin-top: 30px; margin-bottom: 40px; line-height: 1.4em; }
/* frame styles end */

@media screen and (max-width: 2000px){
	#container { width: 1200px; }
}
@media screen and (max-width: 1400px){
	#container { width: 1000px; }
	.navigation.show { width: 32%; }
}
@media screen and (max-width: 1200px){
	#container { width: 800px; }
	.naviImg img { margin-top: 5px; }
	#content .ce-gallery--cols1 img { width: 99.5%; height: auto; }
	#content .menuList li, #content .ce-gallery--cols3 figure{ flex: 0 0 32.5%; margin-right:1%; position: relative; }
}
@media screen and (max-width: 900px){
	#container { width: 92%; }
	body{ font-size:18px; }
	.navigation.show { width: 45%; }
	nav ul a, .navigation .close { font-weight: bold; }
	.ce-bodytext { font-size: 1.1em; line-height: 1.4em; }
	.txtSmallBox { font-size: 1em; line-height: 1.6em; margin-top: 20px; margin-bottom: 30px; }
	#faqArea { padding: 20px 0 20px 0; }
	#faqArea .faqEntry h3 { font-size: 1em; line-height: 1.4em; font-weight: normal; }
	#faqArea .faqEntry .ce-bodytext { font-size:0.9em; line-height: 1.4em; }
}
@media screen and (max-width: 700px){
	.naviImg img { margin-top: -8px; }
	#content { margin-top: 20px; }
	#content .ce-gallery--cols1 img { width: 99%; height: auto; }
	#content .menuList li, #content .ce-gallery--cols3 figure{ flex: 0 0 48.5%; margin-right:1.8%; }
	#content .menuList li:nth-child(3n), #content .ce-gallery--cols3 figure:nth-child(3n) { margin-right:1.8%; }
	#content .menuList li:nth-child(2n), #content .ce-gallery--cols3 figure:nth-child(2n) { margin-right:0; }
	#meta-nav li a { font-size: 20px; }
	.navigation.show { width: 95%; position: fixed; }
	#breadcrumb { display: none; }
}
@media screen and (max-width: 480px){
	.naviImg img { margin-top: -10px; }
	.navigation.show { width: 92%; }
	#meta-nav li a { font-size: 16px; }
	#meta-nav li { margin-right: 15px; }
	.contactbanner { width: 89%; }
}
@media screen and (max-width: 420px){
	.naviImg img { margin-top: -12px; }
}
@media screen and (max-width: 380px){
	.naviImg img { margin-top: -16px; }
}