@font-face {
                        font-family: 'rad-viewfinder-Bold';
                        src: url('fonts/rad-viewfinder.eot');
       }

      @font-face {
                        font-family: 'rad-viewfinder-Bold';
                        src: url('fonts/rad-viewfinder.woff') format('woff'),
                        url('fonts/rad-viewfinder.svg#rad-viewfinder-Bold') format('svg');
       }

   	h1
   	{
   		font-size: 5vw;
	/* font-size passt sich automatisch an */
   	}

   	h2
   	{
   		font-size: 40px;
   	}

	.bg {
	background: rgba(0,0,0,0.8);
	padding: 20px;
	margin-top: 40px;
	}

/* =============================================== */
/* ============= viewfinder 1-zeilig ============= */
/* =============================================== */


   	.viewfinder
   	{
   		font-family: "Open Sans";
   		font-weight: 700;
   		color: #86AC54;
   		text-transform: uppercase;
   		letter-spacing: 0.06em;
   		line-height: 1;
   		white-space: nowrap;
   		padding: 32px 0;
   	}

   	.viewfinder:before
   	{
   		content: "(";
   		font-family: "rad-viewfinder-Bold";
   	}

   	.viewfinder:after
   	{
   		content: ")";
   		font-family: "rad-viewfinder-Bold";
   	}





/* =============================================== */
/* ============= viewfinder 2-zeilig ============= */
/* =============================================== */

      .viewfinder-ol,
            .viewfinder-ur,
            .viewfinder-ul,
            .viewfinder-ur
      {
      	font-family: "Open Sans";
      	font-weight: 700;
      	color: #86AC54;
      	text-transform: uppercase;
      	letter-spacing: 0.06em;
      	line-height: 1.15;
      	white-space: normal;
      	padding: 0;
      	margin: 0;
      }


   	.viewfinder-2-lines
   	{
   		border: 0px; /* delete this border! */
   		padding: 2.5vw 0;
   		margin: 0;
   		display: inline-block;
   		/* wichtig: vor/nach diesem element ist ein block-element erforderlich! */
   	}


   	.viewfinder-2-lines span
   	{
   		display: block;
   	}

/* winkel oben links "{" */
   	.viewfinder-ol:before
   	{
   		content: "{";
   		color: #717E85;
   		font-family: "rad-viewfinder-Bold";
   	}

/* winkel oben rechts "}" */
   	.viewfinder-or:after
   	{
   		content: "}";
   		color: #717E85;
   		font-family: "rad-viewfinder-Bold";
   		float: right;
   	}

/* winkel unten links "[" */
   	.viewfinder-ul:before
   	{
   		content: "[";
   		color: #717E85;
   		font-family: "rad-viewfinder-Bold";
   	}

/* winkel unten rechts "]" */
   	.viewfinder-ur:after
   	{
   		content: "]";
   		color: #717E85;
   		font-family: "rad-viewfinder-Bold";
   		float: right;
   	}

/* =============================================== */
/* ============= viewfinder subnavi ============== */
/* =============================================== */

   	.subnav,
   	.subnav:before,
   	.subnav:after
   	{
   		color: white;
   		text-align: center;
   	}

.viewfinder.content {padding: 20px 0;}

.viewfinder.content:before,
.viewfinder.content:after
	{color: #717E85 !important;}