@charset "UTF-8";
/* CSS Document */

			#history {
			}
			#history {
				box-sizing: border-box;
			}
			#history h2 {
				color: white;
				position: relative;
				padding-bottom: 25px;
				/* text-transform: uppercase; */
				padding-top: 75px;
			}
			#history .mirror {
				display: block;
				height: auto;
			}
			#history .background {
				background-color: var(--brand_blue);
				padding-bottom: 150px;
			}			
			#history {
				.titles {
					position: relative;
					outline: 1px solid orange;
					outline: none;
				}
				.copies {
					height: var(--copies);
					background-color: teal;
					background-color: transparent;
					position: relative;
					overflow: visible;
				}
			}
			
			#history .columns {
				margin: 0; padding: 0;
				font-size: 0; line-height: 0;
				white-space: nowrap;			
			}
			#history .columns .column {
				display: inline-block;
				position: relative;
				white-space: normal;
				vertical-align: top;
				/* font-size: 1rem; */
				/* line-height: 1.3; */
			}
			#history .columns[data-split="1"] .column {
				display: block;
				width: 100%;
			}
			#history .columns[data-split="1-1"] .column {
				width: 50%;
			}
			#history .columns[data-split="1-2"] .column:nth-child(1) { width: 33.3%; }
			#history .columns[data-split="1-2"] .column:nth-child(2) { width: 66.6%; }

			#history .lead {
			}
			#history .lead p {
				font-size: var(--copy_size);
				line-height: var(--copy_line_height);
				text-wrap: balance;
			}
			#history .bubble {
				width: 800px;
				margin-top: 75px;
				margin-bottom: 50px;
				border-radius: 60px;
				border-top-left-radius: 0;
				background-color: var(--brand_orange);
				background-color: var(--brand_green);
				padding: 50px 25px;
				/* box-shadow: 5px 5px 5px 0 var(--brand_green); */
			}
			#history .bubble:after {
				position: absolute;
				top: 0;
				left: 0;
				border: solid transparent;
				content: "";
				height: 0;
				width: 0;
				/* position: relative; */
				pointer-events: none;
				border-left-color: var(--brand_green);
				border-width: 50px;
				margin-top:-50px;
			}
			#history .bubble figure {
				display: block;
				position: relative;
				width: 200px;
				height: 200px;
				margin: 0 0 -200px 0;
				top: 10px;
				background-size: cover;
				background-image: url("../../images/page/our-history/charles-handy.jpg");
				border-radius:200px;
				left: 20px;
			}
			#history .bubble figcaption {
				display: block;
				position: relative;
				margin: 0 0 0 250px;
			}
			#history .bubble blockquote p:before,
			#history .bubble blockquote p:after {
				position: absolute;
				display: inline-block;
				font-size: var(--quote_sign_size);
				line-height: var(--quote_sign_size);
				width: var(--quote_sign_size);
				height: var(--quote_sign_size);
				margin: 0 0 calc(-1 * var(--quote_sign_size)) 0;
				overflow: hidden;
				outline: 1px dashed orange;
				outline: none;
				opacity: 0.5;
			}
			#history .bubble blockquote p:before {
				content:"„";
				margin-left: -10px;
				transform:translate(-30%,-80%);
			}
			#history .bubble blockquote p:after {
				content:"”";
				transform:translate(0%,0%);
			}
			#history .bubble p {
				display: inline-block;
				font-weight: 700;
				font-size: 1.5rem;
				line-height: 1.5;
				text-shadow: 0 2px 6px rgba(0,0,0,0.18);
			}

			@media screen and (min-width:960px)                         {
			}
  			@media screen and (min-width:440px) and (max-width:959.8px) { 
			}
			@media screen and (min-width:  0px) and (max-width:439.8px)   {
			}




	/*   DESKTOP    */ @media screen and (min-width: 960px)                          { 
	}
	/*   TABLET     */ @media screen and (min-width: 520px) and (max-width: 959.8px) {
		#history  {min-height:0;}
		#history .copies { height: auto; }
	}
	/*   MOBILE     */ @media screen and (min-width:   0px) and (max-width: 519.8px) { 
		#history  {min-height: 0;}
		#history .titles { height:auto; }
		#history h2 {padding-top: 40px;padding-bottom: 15px;text-align: center;}
		#history .copies { height: auto; }
		#history .background { padding-bottom:25px; }
	}


			/* wide    DESKTOP */ @media screen and (min-width:1600px)                          {}
			/* average DESKTOP */ @media screen and (min-width:1040px) and (max-width:1599.8px) {}
			/* average TABLET  */ @media screen and (min-width: 960px) and (max-width:1039.8px) {}
			/* large   MOBILE  */ @media screen and (min-width: 440px) and (max-width: 959.8px) {}
			/* average MOBILE  */ @media screen and (min-width:   0px) and (max-width: 439.8px) {}
			
			/*          XXXL   */ @media screen and (min-width:1440px) and (max-width:1599.8px) {}
			/*           XXL   */ @media screen and (min-width:1240px) and (max-width:1439.8px) {}
			/*            XL   */ @media screen and (min-width:1040px) and (max-width:1239.8px) {}
			/*             L   */ @media screen and (min-width: 960px) and (max-width:1039.8px) {}
			/*            -M   */ @media screen and (min-width:   0px) and (max-width: 959.8px) {
				#history .bubble {width: 100%;border-radius: 40px;padding-top: 25px;}
				#history .bubble figure { display: block; margin: 0 0 25px 0; left: 50%; transform:  translateX(-50%); }
				#history .bubble figcaption { margin: 0; }
			}
			/*          XS-M   */ @media screen and (min-width: 520px) and (max-width: 959.8px) {
				#history .background { padding-bottom: 50px; }
			}
			/*             M   */ @media screen and (min-width: 860px) and (max-width: 959.8px) {
			}
			/*            MS   */ @media screen and (min-width: 700px) and (max-width: 859.8px) {}
			/*             S   */ @media screen and (min-width: 580px) and (max-width: 699.8px) {}
			/*            XS   */ @media screen and (min-width: 520px) and (max-width: 579.8px) {}
			/*           XXS   */ @media screen and (min-width: 440px) and (max-width: 519.8px) {
				#history .bubble blockquote p:before,
				#history .bubble blockquote p:after { --quote_sign_size:100px; }
				#history .bubble p {font-size: var(--copy_size);line-height: var(--copy_line_height);}
			}
			/*          XXXS   */ @media screen and (min-width: 330px) and (max-width: 439.8px) {
				#history .bubble blockquote p:before,
				#history .bubble blockquote p:after { --quote_sign_size:90px; }
				#history .bubble p {font-size: var(--copy_size);line-height: var(--copy_line_height);}
			}
			/*         XXXXS   */ @media screen and (min-width:   0px) and (max-width: 329.8px) {
				#history .bubble blockquote p:before,
				#history .bubble blockquote p:after { --quote_sign_size:80px; }
				#history .bubble p {font-size: var(--copy_size);line-height: var(--copy_line_height);}
			}

			/* XXL       XXL4  */ @media screen and (min-width:1400px) and (max-width:1439.8px) {}
			/* XXL       XXL3  */ @media screen and (min-width:1340px) and (max-width:1399.8px) {}
			/* XXL       XXL2  */ @media screen and (min-width:1300px) and (max-width:1339.8px) {}
			/* XXL       XXL1  */ @media screen and (min-width:1240px) and (max-width:1299.8px) {}
			/* XL         XL4  */ @media screen and (min-width:1200px) and (max-width:1239.8px) {}
			/* XL         XL3  */ @media screen and (min-width:1140px) and (max-width:1199.8px) {}
			/* XL         XL2  */ @media screen and (min-width:1100px) and (max-width:1139.8px) {}
			/* XL         XL1  */ @media screen and (min-width:1040px) and (max-width:1099.8px) {}
			/* M           M2  */ @media screen and (min-width: 900px) and (max-width: 959.8px) {}
			/* M           M1  */ @media screen and (min-width: 860px) and (max-width: 899.8px) {}
			/* XXXS     XXXS2  */ @media screen and (min-width: 400px) and (max-width: 439.8px) {}
			/* XXXS     XXXS1  */ @media screen and (min-width: 330px) and (max-width: 399.8px) {}