@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400);
@import url(http://fonts.googleapis.com/css?family=Lobster);

html[lang=de] { hyphenate-dictionary:url(hyph_de.dic); }

body { font-family:'Arial', Helvetica, sans-serif; font-size:1em; line-height:1.2; word-wrap:normal; word-break:normal !important; text-rendering:optimizeLegibility; font-weight:normal; }

img, object, embed, video { max-width: 100%; border:0; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img { width:100%; }

#aboutme {}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		3;
	dw-num-cols-tablet:		3;
	dw-num-cols-desktop:	3;
	dw-gutter-percentage:	9;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */
html { font-size: 100%; }
.gridContainer { margin-left:auto; margin-right:auto; width:88%; }
#header { clear:both; float:left; margin-left:0; width:100%; display:block; }
#logo { clear:both; float:left; margin-left:0; width:100%; display:block; padding-top:2em; padding-bottom:2em; }
#menu { clear:both; float:left; margin-left:0; width:auto; display:block; height:auto; bottom:0px; }
#frohe { clear:both; float:left; margin-left:0; width:100%; display:block; }
#introduction { clear:both; float:left; margin-left:0; width:100%; display:block; }
#description { clear:both; float:left; margin-left:0; width:100%; display:block; }
#work-1, #work-2,#work-3, #work-4, #work-5, #work-6, #work-7, #work-8, #work-9 { clear:both; float:left; margin-left:0; width:100%; display:block; margin-bottom:1em; box-shadow:-3px 3px 5px #888888; }
#article { clear:both; float:left; margin-left:0; width:100%;  display:block; }
#about { clear:both; float:left; margin-left:0; width:100%; display:block; }
#column-1, #column-2, #column-3 { clear:both; float:left; margin-left:0; width:100%; display:block; }
#aco-1, #aco-2, #aco-3 { clear:both; float:left; margin-left:0; width:100%; display:block; margin-bottom:1em; }
#footer { clear:both; float:left; margin-left:0; width 100%; display:block; }
#together { clear:both; float:left; margin-left:0; width: 100%; display:block; background-color:#000000; }
#working { clear:both; float:left; margin-left:0; width:100%; display:block; border-top:thin solid #b2891b; }
#footer-col-1, #footer-col-2, #footer-col-3 { clear:both; float:left; margin-left:0; width:100%; display:block; padding-top:1em; color:#747474; }
#container-header { clear:both; float:left; margin-left:0; width:100%; display:block; }
#copy { clear:both; float:left; margin-left:0; width:100%; height:auto; display:block; background-color:#2b4549; color:#bfbcb9; }
#gradient { clear:both; float:left; margin-left:0; width:100%; display:block; }
#work-10 { clear:both; float:left; margin-left:0; width:100%; display:block; margin-top:2em; margin-bottom:1em; box-shadow:-3px 3px 5px #888888; }
#work-10, #work-11, #work-12 { clear:both; float:left; margin-left:0; width:100%; display:block; margin-bottom:1em; box-shadow:-3px 3px 5px #888888; }
/* 3D Text Shadow - code from http://codepen.io/juanbrujo/pen/yGpAK */
.elegantshadow { font-family:Arial, Helvetica, sans-serif; font-weight:700; text-transform:uppercase; font-size:3.2em; color:#131313; letter-spacing:0.12em;
    text-shadow: 
      1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a, 
      -5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585, 
      -8px 16px 1px #8b8a89, 
      -9px 18px 1px #8f8e8d, 
      -10px 20px 1px #949392, 
      -11px 22px 1px #999897, 
      -12px 24px 1px #9e9c9c, 
      -13px 26px 1px #a3a1a1, 
      -14px 28px 1px #a8a6a6, 
      -15px 30px 1px #adabab, 
      -16px 32px 1px #b2b1b0, 
      -17px 34px 1px #b7b6b5, 
      -18px 36px 1px #bcbbba, 
      -19px 38px 1px #c1bfbf, 
      -20px 40px 1px #c6c4c4, 
      -21px 42px 1px #cbc9c8, 
      -22px 44px 1px #cfcdcd, 
      -23px 46px 1px #d4d2d1, 
      -24px 48px 1px #d8d6d5, 
      -25px 50px 1px #dbdad9, 
      -26px 52px 1px #dfdddc, 
      -27px 54px 1px #e2e0df, 
      -28px 56px 1px #e4e3e2; }
.froh { font-size:3.1em; }
#weichnacht { clear: both; float: left; margin-left: 0; width: 100%; display: block; }
/* -------------------------------------------------------------------------- */


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
	html { font-size: 100%; }
	.gridContainer { width:90%; }
	#header { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#logo { clear:both; float:left; margin-left:0; width:100%; display:block; padding-top:2em; padding-bottom:2em; }
	#menu { clear:both; float:left; margin-left:0; width: 65.7232%; display:block; height:41px; bottom:0px; }
	#language { clear: none; float:left; margin-left: 2.8301%; width: 31.4465%; display:block; height:41px; bottom:0px; }
	#frohe { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#introduction { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#description { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#work-2,#work-3, #work-5, #work-6, #work-8, #work-9 { clear:none; float:left; margin-left:2.8301%; width:31.4465%; display:block; margin-bottom:1em; box-shadow:-3px 3px 5px #888888; }
	#work-1, #work-4, #work-7 { clear:both; float:left; margin-left:0; width:31.4465%; display:block; margin-bottom:1em; box-shadow:-3px 3px 5px #888888; }
	#article { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#about { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#aco-1, #aco-2, #aco-3 { clear:both; float:left; margin-left:0; width:100%; display:block; margin-bottom:2em; }
	#column-1, #column-2, #column-3 { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#footer { clear:both; float:left; margin-left:0;  width:100%; display:block; }
	#working { clear:both; float:left; margin-left:0; width:100%; display:block; border-top:thin solid #b2891b; }
	#together { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#footer-col-1 { clear:both; float:left; margin-left:0; width:31.4465%; display:block; }
	#footer-col-2, #footer-col-3 { clear:none; float:left; margin-left:2.8301%; width:31.4465%; display:block; }
	#footer-col-1, #footer-col-2, #footer-col-3 { padding-top:1em; color:#747474; }
	#container-header { clear:both; float:left; margin-left:0;  width:100%; display:block; }
	#copy { clear:both; float:left; margin-left:0; width:100%; height:auto; display:block; background-color:#2b4549; color:#bfbcb9; }
	#gradient { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#work-10 { clear: none; float:left; margin-left:0; width:31.4465%; display:block; margin-top:3em; margin-bottom:2em; }
	#work-11, #work-12 { clear: none; float:left; margin-left:2.8301%; width:31.4465%; display:block; margin-top:3em; margin-bottom:2em; }
	/* 3D Text Shadow - code from http://codepen.io/juanbrujo/pen/yGpAK */
	.elegantshadow { font-family:Arial, Helvetica, sans-serif; font-weight:700; text-transform:uppercase; font-size:4.5em; color:#131313; letter-spacing:0.13em;
		text-shadow: 
		  1px -1px 0 #767676, 
		  -1px 2px 1px #737272, 
		  -2px 4px 1px #767474, 
		  -3px 6px 1px #787777, 
		  -4px 8px 1px #7b7a7a, 
		  -5px 10px 1px #7f7d7d, 
		  -6px 12px 1px #828181, 
		  -7px 14px 1px #868585, 
		  -8px 16px 1px #8b8a89, 
		  -9px 18px 1px #8f8e8d, 
		  -10px 20px 1px #949392, 
		  -11px 22px 1px #999897, 
		  -12px 24px 1px #9e9c9c, 
		  -13px 26px 1px #a3a1a1, 
		  -14px 28px 1px #a8a6a6, 
		  -15px 30px 1px #adabab, 
		  -16px 32px 1px #b2b1b0, 
		  -17px 34px 1px #b7b6b5, 
		  -18px 36px 1px #bcbbba, 
		  -19px 38px 1px #c1bfbf, 
		  -20px 40px 1px #c6c4c4, 
		  -21px 42px 1px #cbc9c8, 
		  -22px 44px 1px #cfcdcd, 
		  -23px 46px 1px #d4d2d1, 
		  -24px 48px 1px #d8d6d5, 
		  -25px 50px 1px #dbdad9, 
		  -26px 52px 1px #dfdddc, 
		  -27px 54px 1px #e2e0df, 
		  -28px 56px 1px #e4e3e2; }
	.froh { font-size:4.1em; }
	#weichnacht { clear: both;  float: left;  margin-left: 0;  width: 100%;  display: block; }
}
/* --------------------------------------------------------------------- */


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
	html { font-size: 100%; }
	.gridContainer { width:88%; max-width:1232px; margin:auto;}
	#header { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#logo { clear:both; float:left; margin-left:0; width:100%; display:block; padding-top:2em; padding-bottom:2em; }
	#menu { clear:both; float:left; margin-left:0; width:65.7232%; display:block; height:41px; bottom:0px; }
	#language { clear:none; float:left; margin-left:2.8301%; width:31.4465%; display:block; height:41px; bottom:0px; }
	#frohe { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#introduction { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#description { clear:both; float:left; margin-left:11.2139%; width:77.572%; display:block; }
	#work-2, #work-3, #work-5, #work-6, #work-8, #work-9 { clear:none; float:left; margin-left:2.8301%; width:31.4465%; display:block; margin-bottom:1em; }
	#work-1, #work-4, #work-7 { clear:both; float:left; margin-left:0; width:31.4465%; display:block; margin-bottom:1em; }	
	#work-10 { clear:both; float:left; margin-left:0; width:31.4465%; display:block; margin-top:3em; margin-bottom:2em; }
	#work-11, #work-12 { clear:none; float:left; margin-left:2.8301%; width:31.4465%; display: block; margin-top:3em; margin-bottom:2em; }
	#article { clear:both; float:left; margin-left:0; width:100%; display:block; padding-bottom:1em; }
	#about { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#aco-1 { clear:both; float:left; margin-left:0; width:31.4465%; display:block; margin-bottom:2em; }
	#aco-2, #aco-3 { clear:none; float:left; margin-left:2.8301%; width:31.4465%; display:block; margin-bottom:2em; }
	#column-1 { clear:both; float:left; margin-left:0; width:31.4465%; display:block; }
	#column-2, #column-3 { clear:none; float:left; margin-left:2.8301%; width:31.4465%; display:block; }
	#footer { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#working { clear:both; float:left; margin-left:0; width:100%; display:block; padding-top:0.7em; border-top:thin solid #b2891b; }
	#together { clear:both; float:left; margin-left:0; width:100%; display:block; border-bottom:thin solid #b2891b; }
	#footer-col-1 { clear:both; float:left; margin-left:0; width:31.4465%; display:block; }
	#footer-col-2, #footer-col-3 { clear:none; float:left; margin-left:2.8301%; width:31.4465%; display:block; }
	#footer-col-1, #footer-col-2, #footer-col-3 { padding-top:1em; color:#747474; }
	#container-header { clear:both; float:left; margin-left:0; width:100%; display:block; }
	#copy { clear:both; float:left; margin-left:0; width:100%; height:auto; display:block; background-color:#2b4549; color:#bfbcb9; }
	#gradient { clear:both; float:left; margin-left:0; width:100%; display:block; }
	/* Portfolio Shadows */
	.shadow1, .shadow2, .shadow3 { position:relative; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset; }
	.shadow1:before { position:absolute; content:""; width:80%; top:140px; bottom:15px; left:5px; background-color:#8b8378; z-index:-1;
		-webkit-box-shadow:0 23px 17px 0 #8b8378;
		-moz-box-shadow:0 23px 17px 0 #8b8378;
		box-shadow:0 23px 17px 0 #8b8378;
		-webkit-transform:rotate(-4deg);
		-moz-transform:rotate(-4deg);
		transform:rotate(-4deg); }
	.shadow2:before { position:absolute; content:""; width:80%; top:140px; bottom:15px; right:5px; background-color:#8b8378; z-index:-1;
		-webkit-box-shadow:0 23px 17px 0 #8b8378;
		-moz-box-shadow:0 23px 17px 0 #8b8378;
		box-shadow:0 23px 17px 0 #8b8378;
		-webkit-transform:rotate(4deg);
		-moz-transform:rotate(4deg);
		transform:rotate(4deg); }
	.shadow3:before, .shadow3:after{ position:absolute; content:""; top:14px; bottom:14px; left:0;right:0; box-shadow:0 0 25px 3px #8b8378; border-radius:100px/10px; z-index:-1; }
	.shadow4:before { position:absolute; content:""; width:50%; top:140px; bottom:15px; left:5px; background-color:#8b8378; z-index:-1;
		-webkit-box-shadow:0 23px 17px 0 #8b8378;
		-moz-box-shadow:0 23px 17px 0 #8b8378;
		box-shadow:0 23px 17px 0 #8b8378;
		-webkit-transform:rotate(-4deg);
		-moz-transform:rotate(-4deg);
		transform:rotate(-4deg); }
	/* 3D Text Shadow - code from http://codepen.io/juanbrujo/pen/yGpAK */
	.elegantshadow { font-family:Arial, Helvetica, sans-serif; font-weight:700; text-transform:uppercase; font-size:4.5em; color:#131313; letter-spacing:0.13em;
		text-shadow: 
		  1px -1px 0 #767676, 
		  -1px 2px 1px #737272, 
		  -2px 4px 1px #767474, 
		  -3px 6px 1px #787777, 
		  -4px 8px 1px #7b7a7a, 
		  -5px 10px 1px #7f7d7d, 
		  -6px 12px 1px #828181, 
		  -7px 14px 1px #868585, 
		  -8px 16px 1px #8b8a89, 
		  -9px 18px 1px #8f8e8d, 
		  -10px 20px 1px #949392, 
		  -11px 22px 1px #999897, 
		  -12px 24px 1px #9e9c9c, 
		  -13px 26px 1px #a3a1a1, 
		  -14px 28px 1px #a8a6a6, 
		  -15px 30px 1px #adabab, 
		  -16px 32px 1px #b2b1b0, 
		  -17px 34px 1px #b7b6b5, 
		  -18px 36px 1px #bcbbba, 
		  -19px 38px 1px #c1bfbf, 
		  -20px 40px 1px #c6c4c4, 
		  -21px 42px 1px #cbc9c8, 
		  -22px 44px 1px #cfcdcd, 
		  -23px 46px 1px #d4d2d1, 
		  -24px 48px 1px #d8d6d5, 
		  -25px 50px 1px #dbdad9, 
		  -26px 52px 1px #dfdddc, 
		  -27px 54px 1px #e2e0df, 
		  -28px 56px 1px #e4e3e2; }
	.froh { font-size:4.1em; }
	#weichnacht { clear: both;  float: left;  margin-left: 0;  width: 100%;  display: block; }
}


h1 { font-family:Arial, Helvetica, sans-serif; font-size:2em; }
h2 { font-size:1.5em; }
h1, h2 { line-height:2.4em; font-weight:bold; padding-right:0.3em; }
h3 { font-family:Georgia, "Times New Roman", Times, serif; font-size: 1.17em; line-height:1.6em; font-weight:bold; padding-right:0.3em; padding-bottom:0.5em; }
p { padding-left:1em; padding-right:0.3em; font-size:100%;
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
		-ms-hyphens: auto;
			hyphens: auto; 
}
p.introduction::first-letter { font-family:Georgia, "Times New Roman", Times, serif; font-size:280%; font-weight:bold; float:left; width:1em; color:#282828; line-height:36px; padding-top:0.04em; padding-right:12px; }
@-moz-document url-prefix() {
	html { font-size: 100%; }
	p.introduction::first-letter {padding-top:0.06em;}
	small { font-size:80%; }
	h1 { font-size:100%;}
	}
small { font-size:80%; }
strong { line-height:1.3em; color:#b2891b;; }
span { position: relative; }
b { font-size:108%; }

.bgr { background-image:url(../builder/paper.jpg); background-repeat:repeat; }
.center { text-align:center; }
.rightalign { text-align:right; margin-right:21%; color:#bfbcb9; }
.leftalign { text-align:left; margin-left:9%; }
.justify { text-align:justify; text-justify:inter-character; text-justify:inter-word; }
.floatleft, .floatright { display:block; margin-right:auto; margin-left:auto; }
#about { content:overflow;}


.froh { transform:rotate(-5deg); }
.froh a { text-decoration:none; color:black; -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1))); }
.froh:after { content:'Frohe Ostern!'; color:#fec13f; text-shadow:0 1px 1px red; }


a { color:#b2891b; text-decoration:none; }
a:hover { color:#6B8E23; }
a:hover, a:active { outline:0; }


/* Carbon (944 B) by Atle Mo (design), Sébastien Grosjean (code) - See http://lea.verou.me/css3patterns/#carbon */
.bgr-braided {
	background-position: 0px 5px, 10px 0px, 0px 10px, 10px 5px, 0% 0%, 0% 0%;
	background-image:linear-gradient(27deg, rgb(21, 21, 21) 5px, transparent 5px), linear-gradient(207deg, rgb(21, 21, 21) 5px, transparent 5px), linear-gradient(27deg, rgb(34, 34, 34) 5px, transparent 5px), linear-gradient(207deg, rgb(34, 34, 34) 5px, transparent 5px), linear-gradient(90deg, rgb(27, 27, 27) 10px, transparent 10px), linear-gradient(rgb(29, 29, 29) 25%, rgb(26, 26, 26) 25%, rgb(26, 26, 26) 50%, transparent 50%, transparent 75%, rgb(36, 36, 36) 75%, rgb(36, 36, 36));
	background-attachment:scroll, scroll, scroll, scroll, scroll, scroll;
	background-repeat:repeat, repeat, repeat, repeat, repeat, repeat;
	background-size:20px 20px;
	background-origin:padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
	background-clip:border-box, border-box, border-box, border-box, border-box, border-box;
	background-color:rgb(19, 19, 19);
}
/* ---------------------------------------------- */


/* Divider */
.rainbow {
    height:2px;
    background:#b2891b; /* For browsers that do not support gradients */
    background:-webkit-linear-gradient(left, orange, yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
    background:-o-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
    background:-moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
	background:linear-gradient(to right, orange , yellow, green, cyan, blue, violet); /* Standard syntax */
}
/* ----------------------------------------------- */


/* Portfolio Fade in */
.container { position:relative; width:100%; }
.image { display:block; width:100%; height:auto; }
.overlay { position:absolute; top:0; bottom:0; left:0; right:0; height:100%; width:100%; opacity:0; transition:.5s ease; background-color:#b2891b; }
.container:hover .overlay { opacity:1; }
.text { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); }
/* --------------------------------------------------------- */


/* Ueber Mich - Text Shadow - Transform text with shadow By Chriseisenbraun - See http://codepen.io/chriseisenbraun/pen/upmDB */
#eff { width:280px; margin:0 auto; padding-top:0.5em; padding-bottom:0.7em; }
.cover { color:white; width:30%; margin:0; padding:1% 1% 1% 1%; float:left; margin-right:0; display:block; }
.stack { font-family:Arial, Helvetica, sans-serif; font-weight:700; text-transform:uppercase; font-size:4.5em; line-height:0.7em; word-wrap:break-word; overflow-wrap:break-word; }
.char1 /* Ue*/ { margin-left:-.2em; z-index:4;
	text-shadow:0.05em 0.05em 0.2em rgba(10,10,10,0.9); }
.char2 /* B */ { z-index:3; margin-left:-.175em; top:0.08em;
	text-shadow:-0.02em 0.02em 0.2em rgba(10,10,10,0.9); }
.char3 /* E */ { z-index:9; margin-left:-.125em;
	text-shadow:-0.05em 0.05em 0.2em rgba(10,10,10,0.9); }
.char4 /* R */ { z-index:5; margin-left:-.195em; top:0.05em;
	text-shadow:0.02em -0.02em 0.2em rgba(10,10,10,0.9); }
.char5 /* M */ { z-index:2; margin-left:-.125em; top:0.08em;
	text-shadow:-0.05em 0.05em 0.2em rgba(10,10,10,0.9); }
.char6 /* I */ { z-index:10; margin-left:-.125em; top:-0.04em;
	text-shadow:0em 0em 0.2em rgba(10,10,10,0.9); }
.char7 /* C */ { z-index:9; margin-left:-.2em; top:0em;
	text-shadow:-0.05em 0.05em 0.2em rgba(10,10,10,0.9); }
.char8 /* H */ { z-index:8; margin-left:-.2em; top:0.1em;
	text-shadow:-0.05em 0.05em 0.2em rgba(10,10,10,0.9); }
/* -------------------------------------------------------- */


/* Accordion Panels */
button.accordion { background-color:#747474; color:#bfbcb9; cursor:pointer; padding:18px; width:100%; text-align:center; border:none; outline:none; transition:0.4s;
	border-radius:3px;
	-moz-border-radius:3px;
	-o-border-radius:3px;
	-webkit-border-radius:3px;
}

button.accordion-1 { background-color:transparent; background-image:url(../builder/a_about-gri.png); background-repeat:no-repeat; background-position:center; height:60px; color:#bfbcb9; cursor:pointer; width:100%; text-align:left; border:none; outline:none; transition:0.4s; }
button.accordion-2 { background-color:transparent; background-image:url(../builder/a_contact.png); background-repeat:no-repeat; background-position:center; height:60px; color:#bfbcb9; cursor:pointer; width:100%; border:none; outline:none; transition:0.4s; }
button.accordion-3 { background-color:transparent; background-image:url(../builder/a_top.png); background-repeat:no-repeat; background-position:center; height:60px; color:#bfbcb9; cursor:pointer; width:100%; border:none; outline:none; transition:0.4s; }

button.accordion.active, button.accordion:hover {  background-color:#b2891b; color:white; }
button.accordion-1.active, button.accordion-1:hover { background-color:transparent; background-image:url(../builder/a_about-gri-1.png); background-repeat:no-repeat; background-position:center; }
button.accordion-2.active, button.accordion-2:hover { background-color:transparent; background-image:url(../builder/a_contact-gri.png); background-repeat:no-repeat; background-position:center; }

button.accordion:after { content:'\02795'; float:right; margin-left:5px; }
button.accordion-1:after { content:'\02795'; color:#747474; float:right; margin-left:5px; }
button.accordion-2:after { /*content:'\02795';*/ color:#747474; float:right; margin-left:5px; }

button.accordion.active:after { content: "\2796"; }
button.accordion-1.active:after { content:"\2796"; color:#b2891b; }
button.accordion-2.active:after { /*content:"\2796";*/ color:#b2891b; }
/* -------------------------------------------------- */


/* Note: hidden by default */
.panel { padding-left:0.3em; padding-right:0.3em; }
div.panel { max-height:0; overflow:hidden; transition:max-height 0.2s ease-out; }
div.panel.show { display:block; }
/* -------------------------------------------- */