/* main css Andreas Porstner */
/* Author: Michael Kaser */
/* http://www.michaelkaser.com/ */


/* GENERAL */
body {
   padding: 0;
   margin: 0;
   font:16px/1.375 arial, helvetica, helve, sans-serif;
   color: rgb(128,128,128);
   background: url('../porstner-bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

html, body {height: 100%;}
 
.container {width: 100%; height: auto; margin: 0; height: 97.5%; min-height: 97.5%;}
.top {width: 100%; height: 2.5%; background: transparent;}

.wrapper {
   width: 90%;
   min-height: 100%;
   margin: 0 auto -1px;
   background: #fff;
   -webkit-box-shadow: 10px 0 10px -5px #666;
   -moz-box-shadow:    10px 0 10px -5px #666;
   box-shadow:         10px 0 10px -5px #666;
}

.section {
   clear: both;
   padding: 0px;
   margin: 0px;
}

.col {
   display: block;
   float:left;
   margin: 1% 0 1% 0;
}
.col:first-child {margin-left: 0;}

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

.span_1_of_12,
.span_2_of_12,
.span_3_of_12,
.span_4_of_12,
.span_5_of_12,
.span_6_of_12,
.span_7_of_12,
.span_8_of_12,
.span_9_of_12,
.span_10_of_12,
.span_11_of_12,
.span_12_of_12 {
   width: 100%; 
}

.push {display: none;}

.footer {background: #fff; width: 90%;margin: 0 auto;}
.footer, .pusher {height: 0;}




/* BILDER UND LOGO */
img {width: 90%; height: auto;}
img.kleinesbild {width: 50%; height: auto;}

.logo a img {width: 190px; height: auto; float: right; margin-top: 10px; margin-right: 20px;opacity: 1;
   transition: opacity 0.6s;
   -moz-transition: opacity 0.6s; /* Firefox 4 */
   -webkit-transition: opacity 0.6s; /* Safari and Chrome */
   -o-transition: opacity 0.6s; /* Opera */
}
.logo a:hover img {opacity: 0.2; filter:alpha(opacity=20); /* For IE8 and earlier */
   transition: opacity 0.6s;
   -moz-transition: opacity 0.6s; /* Firefox 4 */
   -webkit-transition: opacity 0.6s; /* Safari and Chrome */
   -o-transition: opacity 0.6s; /* Opera */
}



/* SPRACHWAHL */
.sprachwahl {
   font-size: .75em;
   position: relative;
   left: 12px;
   top: 20px;
   
   display: none;
}

.sprachwahl ul {list-style-type: none;}
.sprachwahl li {
   float: left;
   margin-right: 5px;
}

.sprachwahl li a {
   font-weight: bold;
   text-transform: uppercase;
   text-decoration: none;
   color: rgb(179,179,179);
	transition: color 0.3s;
   -moz-transition: color 0.3s; /* Firefox 4 */
   -webkit-transition: color 0.3s; /* Safari and Chrome */
   -o-transition: color 0.3s; /* Opera */
}

.sprachwahl li.current a,
.sprachwahl li a:hover {
	color: rgb(243,151,104);
	transition: color 0.3s;
   -moz-transition: color 0.3s; /* Firefox 4 */
   -webkit-transition: color 0.3s; /* Safari and Chrome */
   -o-transition: color 0.3s; /* Opera */
}

.sprachwahl li#de:after {content: "/"; padding-left: 5px;}


/* MENU */
#topnav {
   float: left;
   display: none;
   background: rgba(255, 255, 255, 0.9);
   position: absolute;
   z-index: 10000;
   top: 50px;
   left: 5%;
   width: 90%;
   padding-top: 20px;
   padding-bottom: 0;
   border-bottom: 1px solid rgb(179,179,179);
}
#topnav.showme {display: block !important;}

/* ICON */
#nav-icon {
   width: 30px;
   height: 25px;
   position: relative;
   margin: 10px auto;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: .5s ease-in-out;
   -moz-transition: .5s ease-in-out;
   -o-transition: .5s ease-in-out;
   transition: .5s ease-in-out;
   cursor: pointer;
}
      
#nav-icon span {
   display: block;
   position: absolute;
   height: 4px;
   width: 100%;
   background: rgb(179,179,179);
   border-radius: 0px;
   opacity: 1;
   left: 0;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: .25s ease-in-out;
   -moz-transition: .25s ease-in-out;
   -o-transition: .25s ease-in-out;
   transition: .25s ease-in-out;
}
      
#nav-icon span:nth-child(1) {top: 0px;}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {top: 9px;}
#nav-icon span:nth-child(4) {top: 18px;}

#nav-icon.open span:nth-child(1) {
   top: 18px;
   width: 0%;
   left: 50%;
}
      
#nav-icon.open span:nth-child(2) {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}
      
#nav-icon.open span:nth-child(3) {
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
}
      
#nav-icon.open span:nth-child(4) {
   top: 18px;
   width: 0%;
   left: 50%;
}

#togglebutt {
   display: block;
   position: relative;
   margin-left: 5%;
   clear: both;
   margin-bottom: 0;
   margin-top: -164px;
   float: left;
}
nav {padding: 0; width: 100%;}


#topnav li {display: block; width: 100%; border-top: 1px solid rgb(179,179,179);}
#topnav a  {
   display: block; width: 100%;
   padding: 10px 0;
   color: rgb(179,179,179);
   font-weight: bold;
   font-style: normal;
   font-size: 1.125em;
   line-height: 1.125em;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 0.02em;
}

#topnav li.rex-current a {color: rgb(243,151,104);}
/* menu END */



/* ZITAT IM KREIS */
.zitatkreis {
   clear: both;
   margin: 5%;
   display: inline-block;
   border-radius: 50%;
   width: 180px;
   height: 180px;
   background: rgb(243,151,104);
}

.zitatkreis p {
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   color: #fff;
   font-size: 1.125em;
   line-height: 1em;
   font-weight: bold;
   text-align: center;
   padding: 0;
   width: 80%;
   margin: auto;
   letter-spacing: 0.0125em;
}



/* ADRESSE */
.adresse {display: none;}
.mobi-adresse {display: block; margin-top: 50px;}

.adresse p {
   font-size: .75em;
   line-height: 1.25em;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.0125em;
}

.adresse p a {
	color: rgb(179,179,179);
	text-decoration: none;
	transition: color 0.3s;
   -moz-transition: color 0.3s; /* Firefox 4 */
   -webkit-transition: color 0.3s; /* Safari and Chrome */
   -o-transition: color 0.3s; /* Opera */
}
.adresse p a:hover {
	color: rgb(243,151,104);
	transition: color 0.3s;
   -moz-transition: color 0.3s; /* Firefox 4 */
   -webkit-transition: color 0.3s; /* Safari and Chrome */
   -o-transition: color 0.3s; /* Opera */
}


/* CONTENT */
.content {position: relative; top: -40px; z-index: 100;}
.content img {margin: 0 0 1.375em 5%;}

/* TEXTFORMATIERUNG */
h1 { font-size:2.2em; padding:0 0 1em 0; margin-left: 5%;}
h2 { font-size:1em; padding:0 0 1em 0; margin-left: 5%;}
h3 { font-size:1.125em;  margin-left: 5%;}
p {padding: 0 2em 1.375em 0; margin-left: 5%;
	letter-spacing: 0.0125em;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}


h2.menu-header {
   font-size: 1.25em;
   line-height: .875em;
   font-weight: bold;
   text-transform: uppercase;
   color: rgb(179,179,179);
   width: 12em;
   padding: 0.125em 0 .75em 0;
}


a {
	color: rgb(179,179,179);
	text-decoration: none;
	transition: color 0.3s;
   -moz-transition: color 0.3s; /* Firefox 4 */
   -webkit-transition: color 0.3s; /* Safari and Chrome */
   -o-transition: color 0.3s; /* Opera */
}
a:hover {
	color: rgb(243,151,104);
	transition: color 0.3s;
   -moz-transition: color 0.3s; /* Firefox 4 */
   -webkit-transition: color 0.3s; /* Safari and Chrome */
   -o-transition: color 0.3s; /* Opera */
}


a[href$='.pdf'] {
	background: url(../pdf-48.png) center right no-repeat;
	background-size: 16px 16px;
	padding-right: 20px; padding-top: 2px;
	line-height: 1em;
}


.contento ul {margin-bottom: 2em;}
.contento li {list-style-type: none; margin-bottom: .5em;}

.contento li {padding: 0 2em 0 0; margin-left: 5%;
	letter-spacing: 0.0125em;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}





@media only screen and (min-width: 768px) {
   .container {height: 95%; min-height: 95%;}
   .wrapper, .footer {padding: 0 20px 0 30px;}
   .top {height: 5%;}
   .col {margin: 1% 0 1% 2.4%;}
   .span_12_of_12 {width: 100%;}
   .span_11_of_12 {width: 91.46%;}
   .span_10_of_12 {width: 82.93%;}
   .span_9_of_12 {width: 74.4%;}
   .span_8_of_12 {width: 65.86%;}
   .span_7_of_12 {width: 57.33%;}
   .span_6_of_12 {width: 48.8%;}
   .span_5_of_12 {width: 40.26%;}
   .span_4_of_12 {width: 31.73%;}
   .span_3_of_12 {width: 23.2%;}
   .span_2_of_12 {width: 14.66%;}
   .span_1_of_12 {width: 6.133%;}
   .push {visibility: hidden;}

   .logo a img {width: 50%; margin-top: 20px; margin-right: 20px;}
   .sprachwahl {display: block; visibility: hidden; /* wird erst freigeschaltet, wenn englische texte da */}

   h2.menu-header {font-size: 1.375em; margin-left: 5%;}
   
   /* NAVIGATION */
   nav {padding: 0; width: 100%;}
   #topnav {
      position: relative;
      top: 0;
      left: 5%;
      clear: both;
      display: block;
      background: transparent;
      text-align: left;
      z-index: 10000;
      padding: 0;
   }
   #topnav ul {
      position: relative;
      list-style: none;
      margin: 0;
      padding-left: 0;
      margin-top: 0em;
   }
   #topnav li {float: none; position: relative; list-style: none;}
   #topnav a  {
      display: block;
      text-decoration: none;
      padding: 10px 0;
      line-height: 1.25em;
      font-size: .938em;
      font-weight: bold;
   }

   #topnav .active {display: block;}
   
   #topnav li:hover > a {color: rgb(243,151,104);}
   #topnav li.active a {color: rgb(243,151,104); background: rgba(243,151,104,.1);}

	
   /* mobile menu stuff */
   #togglebutt {display: none;}
   /* NAVIGATION end */
   
   .content {top: -100px !important;}
   .content img {margin-left: 0;}

   .contento li {margin-left: 0;}

   img {width: 100%; height: auto;}
   img.kleinesbild {width: 50%; height: auto;}
   
   h1, h2, h3, p {margin-left: 0;}
   p {padding: 0 0 1.375em 0;}
   
   .adresse {display: block; position: absolute; bottom: -90px; margin-left: 12px;}

/*
   .screen-adresse {
      padding-top: 1em;
      bottom: 0;
      padding-bottom: 40px;
      width: 74%;
      max-width: 980px;
      margin-left: 0;
      padding-left: 12px;
      background: rgba(255, 255, 255, 0.7);
   }
*/

   .mobi-adresse {display: none;}

   .zitatkreis {
      margin-top: 70px;
      width: 160px;
      height: 160px;
   }
   .zitatkreis p {
      font-size: 1em;
      line-height: .938em;
   }
}


@media only screen and (min-width: 1024px) {
   .wrapper, .footer {max-width: 1000px; width: 80%; padding: 0 20px 0 30px;}
   .content {top: -100px !important;}
   .zitatkreis {
      width: 195px;
      height: 195px;
   }
   .zitatkreis p {
      font-size: 1.125em;
      line-height: 1em;
   }
}


@media only screen and (min-width: 1200px) {
   h2.menu-header {font-size: 1.875em;}
   .zitatkreis {
      width: 210px;
      height: 210px;
   }
   .zitatkreis p {
      font-size: 1.25em;
      line-height: 1.125em;
   }
}