/**
       * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
       * http://cssreset.com
       */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      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-size: 100%;
        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;
      }
      body {
        line-height: 1;
      }
      ol, ul {
        list-style: none;
      }
      blockquote, q {
        quotes: none;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
        content: '';
        content: none;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0;
      }

      /**
       * Clearfix
       */

      /* Der Kern von Clearfix */
      .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        font-size: 0; 
        height: 0;
        visibility: hidden;
      }

      /* IE-Patch für IE 7*/
      *:first-child+html .clearfix { min-height: 0; } 

      /* IE-Patch für IE 6*/
      * html .clearfix { height: 1%; }

      /**
       * infogrfx.com CSS v1.1
       * https://infogrfx.com
       */
      body {
        font-family: 'Open Sans', sans-serif;
        font-weight:400;
        padding:5px;
        text-rendering: optimizeLegibility; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop) zoom: 1;
      }
      h1, h2, h3, h4, h5, h6 { font-weight:600; }
      p {
        line-height: 1.5; margin: 0 0 1em;
        -moz-hyphens: auto;
        -o-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
      }
      a,
      a:visited   { text-decoration: underline; color: #cc071e;}
      a:hover     { text-decoration: none; }
      a:active    { color: tomato; }
      a:focus     { border: 1px dotted tomato; }
      h1 {
        text-align:left;
        font-size:42px;
        letter-spacing:-2px;
        font-weight:300;
/*        margin:.2em 0;*/
        padding-bottom: 7px;
        padding-top: 30px;
        color: #cc071e;
      }
      strong { font-weight:600; }

      #content {
        max-width:1020px;
        min-width:260px;
        margin:0 auto;
      }

      #intro {
        padding-top:10px;
      }

      #intro p {
        padding-bottom:15px;
      }

      ul.facts {
        background:#333;
        padding:10px;
        margin:0 auto;
        -webkit-user-select: none;  
        -moz-user-select: none;    
        -ms-user-select: none;      
        user-select: none;
        cursor:default;
      }
      ul.facts li {
        float:left;
        display: block;
        width:240px;
        height:146px;
        margin:5px;
      }
      ul.facts li .front .pad,
      ul.facts li .back .pad {
        display:block;
        width:220px;
        height:118px;
        padding:18px 10px 10px;
        background:#DDD;
        text-align:center;
        position:relative;
      }
      span.fa {
        font-size:42px;
        text-align:center;
        display:block;
        width:220px;
        height:42px;
        line-height:1em;
        margin-bottom:12px;
      }
      img.icn {
        max-width:140px;
        height:42px;
        line-height:1em;
        margin-bottom:12px;
      }
      ul.facts li h2 {
        text-align:center;
        font-size:18px;
        letter-spacing:-1px;
        margin: 4px auto;
      }

      ul.facts li p {
        text-align:center;
        font-size: 20px;
        letter-spacing:-1px;
        margin: 4px auto;
      }
      li.fact {
      	position: relative;
      }
      li.fact .links {
      	position: absolute;
      	top:124px;
      	color:#fff;
      	font-size: 10px;
      	left:0;
      	width: 240px;
      	text-align: center;
      	z-index:2000;
      }
      li.fact a {
      	color:#e3e3e3;
      	display:inline-block;
      	padding:3px 5px 4px;
      	text-decoration: none;
      	background:#EF6C00;
      	border:none;
      	cursor: pointer;
      }
      li.fact a.active {
      	color:#fff;
      	background:transparent;
      	-webkit-box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,1);
		-moz-box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,1);
		box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,1);
      }
      li.fact a:hover {
	  	-webkit-box-shadow: inset 0px 0px 2px 0px rgba(255,255,255,1);
		-moz-box-shadow: inset 0px 0px 2px 0px rgba(255,255,255,1);
		box-shadow: inset 0px 0px 2px 0px rgba(255,255,255,1);
      }
    #toggle {
        color: #cc0000;
        text-decoration: underline;
    }
#toggle:hover {
        color: #cc0000;
        text-decoration: underline;
        cursor: pointer;
    }
      #references {
        margin-bottom:30px;
        font-size:0.8em;
        color:#666;
      }

      #references h2 {
        font-size:1.2em;
        margin-bottom:.5em;
      }

      #references ol li {
        line-height:1.25em;
        padding-bottom:2px;
          word-wrap: break-word;
      }
      .back .pad {
        width:200px;
        height:118px;
        padding:15px 20px;
        position:absolute;
        top:0;
        left:0;
        font-size:.5em;
        background:#DDD;
        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
        /* IE 5-7 */
        filter: alpha(opacity=90);
        /* Netscape */
        -moz-opacity: 0.9;
        /* Safari 1.x */
        -khtml-opacity: 0.9;
        /* Good browsers */
        opacity: 0.9;
        display:none;
        overflow:hidden;
      }

      ul.facts li .popup p {
        font-size:12px;
        letter-spacing:0;
        text-align:left;
      }

      ul.facts li:hover .popup {
        display:block;
      }

      ol { list-style:decimal inside; }
      code,
      pre     { font-family: monospace, serif; font-size: 1em; }
      blockquote {
       font-style: italic; 
      }
      blockquote:before { 
       content: "\201C";
       display: inline-block;
       padding-right: .4em;
      }
      .rounded ul.facts,
      .rounded ul.facts li .front .pad,
      .rounded ul.facts li .back .pad,
      .rounded code {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
      }
      @media (max-width: 1039px) {
       ul.facts {
        width:500px;
       }
      }
      @media (min-width: 1040px) {
       ul.facts {
        width:1000px;
       }
      }
     @media (max-width: 505px) {
       ul.facts {
        width:250px;
       }
      }
/*
      @media (max-width: 505px) and (min-width: 401px) {
        body {
          transform: scale(0.8);
          transform-origin: 0 0;
          -moz-transform: scale(0.8);
          -moz-transform-origin: 0 0;
          -webkit-transform: scale(0.8);
          -webkit-transform-origin: 0 0;
        }
      }
*/
/*
      @media (max-width: 400px) and (min-width: 361px) {
        body {
          transform: scale(0.7);
          transform-origin: 0 0;
          -moz-transform: scale(0.7);
          -moz-transform-origin: 0 0;
          -webkit-transform: scale(0.7);
          -webkit-transform-origin: 0 0;
        }
      }
*/
/*
      @media (max-width: 360px) and (min-width: 251px) {
        body {
          transform: scale(0.6);
          transform-origin: 0 0;
          -moz-transform: scale(0.6);
          -moz-transform-origin: 0 0;
          -webkit-transform: scale(0.6);
          -webkit-transform-origin: 0 0;
        }
      }
      @media (max-width: 250px) {
        body {
          transform: scale(0.5);
          transform-origin: 0 0;
          -moz-transform: scale(0.5);
          -moz-transform-origin: 0 0;
          -webkit-transform: scale(0.5);
          -webkit-transform-origin: 0 0;
        }
      }
*/
      #embed {
        max-width:600px;
        margin:0 auto;
      }
      #embed h2 {
        margin: 30px 0 10px;
        font-size: 24px;
      }
      #embed button {
        margin-top:5px;
        padding:10px 20px;
        color: #265778;
        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
        display: inline-block;
        zoom: 1;
        border: 0 rgba(0,0,0,0);
        background-color: #E6E6E6;
        text-decoration: none;
        border-radius: 2px;
        line-height: normal;
        white-space: nowrap;
        vertical-align: baseline;
        text-align: center;
        cursor: pointer;
        -webkit-user-drag: none;
        -webkit-user-select: none;
      }
      #embed code {
        display:block;
        padding:15px 25px;
        background:#DDD;
        font-size:.8em;
      }

      h1 a { text-decoration:none; color:black; }
      p#copy { text-align: center; margin-top:50px; font-size:0.8em;
        color:#666; }
      #sec { font-size: 2em; }
      #sec span#years { font-size: .5em; }

      ul.facts li.w1x1,
      ul.facts li.w1x1 .panel {
        display: block;
        width:240px;
        height:146px;
      }

      ul.facts li.w1x2,
      ul.facts li.w1x2 .panel {
        display: block;
        width:490px;
        height:146px;
      }

      ul.facts li.w1x1 .front .pad {
        width:220px;
        height:118px;
        padding:18px 10px 10px;
      }
      ul.facts li.w1x1 .back .pad {
        width:200px;
        height:118px;
        padding:18px 20px 10px;
      }
      ul.facts li.w1x2 .front .pad {
        width:470px;
        height:118px;
        padding:18px 10px 10px;
      }
      ul.facts li.w1x2 .back .pad {
        width:450px;
        height:118px;
        padding:18px 20px 10px;
      }

      ul.facts li.w1x2 span.fa {
        width:470px;
      }

      .panel {
        position: relative;
        -webkit-perspective: 600px;
        -moz-perspective: 600px;
        perspective: 600px;
      }
      /* -- make sure to declare a default for every property that you want animated -- */
      /* -- general styles, including Y axis rotation -- */
      .panel .front {
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 900;
        width: inherit;
        height: inherit;

        -webkit-transform: rotateX(0deg) rotateY(0deg);
           -moz-transform: rotateX(0deg) rotateY(0deg);
                transform: rotateX(0deg) rotateY(0deg);

        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
                transform-style: preserve-3d;

        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
                backface-visibility: hidden;

        /* -- transition is the magic sauce for animation -- */
        -webkit-transition: all .5s ease-in-out;
                transition: all .5s ease-in-out;
      }
      .panel.flip .front {
        z-index: 900;
        -webkit-transform: rotateY(180deg);
           -moz-transform: rotateY(180deg);
                transform: rotateY(180deg);
      }

      .panel .back {
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 800;
        width: inherit;
        height: inherit;

        -webkit-transform: rotateY(-180deg);
           -moz-transform: rotateY(-179deg); /* setting to 180 causes an unnatural-looking half-flip */
                transform: rotateY(-179deg);

        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
                transform-style: preserve-3d;

        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
                backface-visibility: hidden;

        /* -- transition is the magic sauce for animation -- */
        -webkit-transition: all .5s ease-in-out;
                transition: all .5s ease-in-out;
      }
      .panel.flip .back {
        z-index: 1000;
        -webkit-transform: rotateX(0deg) rotateY(0deg);
           -moz-transform: rotateX(0deg) rotateY(0deg);
                transform: rotateX(0deg) rotateY(0deg);
      }
      .panel.flip .action {display: none; }
      .front .pad i.turn {
        position: absolute;
        bottom: 2px;
        right: -0px;
        font-size:20px;
        color: #E0E0E0;
          text-shadow: 0 -1px 1px #EEEEEE, 0 1px 1px #BDBDBD;
          -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }
      p small { font-size: .8em; }