/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
* {
  box-sizing: border-box;
}

body {
  font-family: 'Noto Serif TC', serif;
  font-weight: 200;
  font-size: 0.9em;
  background-color: rgba(230,230,230,1);
  color: rgba(30,30,30,1);
  width: calc(70%); 
  text-align: left; 
  margin-left:auto;
  margin-right:auto;

}

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0em 1.2em;
  margin-top: 5em;

}

/* Remove extra left and right margins, due to padding */
.row {
   margin: 0 -0.5em;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  
}
hr
	{
  display:block;
	}

/* Style the counter cards */
.card {
  /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
  padding-bottom: 1em;
  padding-right: 0.2em;
  text-align: left;
  /*background-color: #f1f1f1;*/
  text-align: justify;
  border-top:0.2em solid black;
  max-height:25em;
  overflow: hidden;


  hyphens: auto;
	 -webkit-hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
     -webkit-hyphenate-limit-chars: 6 3 3;
     -webkit-hyphenate-limit-lines: 2;
     -webkit-hyphenate-limit-last: always;
     -webkit-hyphenate-limit-zone: 8%;
     -moz-hyphens: auto;
     -moz-hyphenate-limit-chars: 6 3 3;
     -moz-hyphenate-limit-lines: 2;
     -moz-hyphenate-limit-last: always;
     -moz-hyphenate-limit-zone: 8%;
     -ms-hyphens: auto;
     -ms-hyphenate-limit-chars: 6 3 3;
     -ms-hyphenate-limit-lines: 2;
     -ms-hyphenate-limit-last: always;
     -ms-hyphenate-limit-zone: 8%;
     hyphens: auto;
     hyphenate-limit-chars: 6 3 3;
     hyphenate-limit-lines: 2;
     hyphenate-limit-last: always;
     hyphenate-limit-zone: 8%;
}

.textcard{
  /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
  padding-bottom: 1em;
  padding-right: 0.2em;
  text-align: left;
  /*background-color: #f1f1f1;*/
  text-align: justify;
  /*border-top:0.2em solid black;*/
  overflow: hidden;
  
  hyphens: auto;
     -webkit-hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
     -webkit-hyphenate-limit-chars: 6 3 3;
     -webkit-hyphenate-limit-lines: 2;
     -webkit-hyphenate-limit-last: always;
     -webkit-hyphenate-limit-zone: 8%;
     -moz-hyphens: auto;
     -moz-hyphenate-limit-chars: 6 3 3;
     -moz-hyphenate-limit-lines: 2;
     -moz-hyphenate-limit-last: always;
     -moz-hyphenate-limit-zone: 8%;
     -ms-hyphens: auto;
     -ms-hyphenate-limit-chars: 6 3 3;
     -ms-hyphenate-limit-lines: 2;
     -ms-hyphenate-limit-last: always;
     -ms-hyphenate-limit-zone: 8%;
     hyphens: auto;
     hyphenate-limit-chars: 6 3 3;
     hyphenate-limit-lines: 2;
     hyphenate-limit-last: always;
     hyphenate-limit-zone: 8%;
}

.textcolumn {
  float: left;
  width: 50%;
  padding: 0em 1.2em;
  margin-top: 1em;

}

.fullcolumn {
  float: center;
  width: 100%;
  padding: 0em 1.2em;
  margin-top: 1em;
}

.arrow{
    width: 20%;
    float: left;
}

.headline{
  float: left;
  text-align:right;
  width:80%;
}

.zitatmarker{
  margin-top:0.8em;
  font-weight: 200;
  width: 10%;
  float: left;
}
.zitat{
  float: right;
  text-align:justify;
  width:90%;
  font-weight: 900;
  margin-top:1em;
  margin-bottom:1em;
  font-size: 0.9em;
}

footer{
	margin-top:10em;
	margin-bottom:5em;
	float:left;
	font-size:0.6em;
	color:rgba(160,160,160,1);
	margin-left:1em;
	margin-right:1em;
}

.custom_code {
  font-family: monospace;
  font-size: 1.3em;
  padding-left:1em;
  padding-right:1em;
  margin-top:1em;
  margin-bottom:1em;
  text-align:left;
}

.diagramm{
	padding-top: 2em;
	padding-bottom:0.5em;
	margin-left:auto;
	margin-right:auto;
	width:50%;
}

einleitung {
   font-weight: 400;
   font-style:italic;
}

weiterleiten {
	float:right;
}

bildunterschrift{
	margin-top:0.5em;
	margin-bottom:1em;
	text-align:left;
	display:block;
	font-size:0.6em;
	color:rgba(160,160,160,1);
}

a:link {
	color:black;
	text-decoration:none;
}

a:visited { 
  	color: inherit;
}

a:hover { 
	opacity:0.6;
}

img{
	width:100%;
}

h1 {
  margin-left:0.3em;
  margin-top: 3em;
  text-align: left;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.8em;
  line-height:1.2em;
  font-weight: 700;
}
h1a {
  border-top:0.2em solid black;	
  margin-right:0.3em;
  text-align: right;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.8em;
  line-height:1.2em;
  font-weight: 700;
  display:block;
}
h1b {
  border-top:0.2em solid black;	
  margin-left:0.3em;
  text-align: left;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.8em;
  line-height:1.2em;
  font-weight: 700;
   display:block;
}

h2 {
  margin-left:0.3em;

  text-align: left;

  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 200;
  font-size: 1.6em;
}

h2a {
  margin-left:0.3em;
  margin-right:0.3em;

  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 200;
  font-size: 1.6em;
  display:block;
  text-align:right;
  
}
h3 {
  margin-left:0.3em;

  text-align: left;

  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 200;
  font-size: 1em;
}
h4 {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700;
  font-size: 1.1em;
  line-height:1.6em;
  margin-bottom:1.8em;
  margin-top:0em;
}

sup {font-size:xx-small; vertical-align:super;}


/* Responsive columns */
@media screen and (max-width: 1200px) {
.column {
   width:calc(50%);
   display: block;
  }

.card {
   height:25em;
   display: block;/* Change it as per your requirement. */
   overflow: hidden;
}
  .diagramm{
  	width:70%;
  }

body{
  width: calc(80%); 
}

}
@media screen and (max-width: 700px) {
body{
  width: calc(90%); 
}  
  
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
  .textcolumn {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
	hr
	{
  display:none;
	}

  .diagramm{
  	margin-left:0em;
  	margin-right:0em;
  	width:100%;
  }
  
}