/* --------------------------------------------------------------------------------------------
   --------------------------------------------------------------------------------------------
	                rollbühne CSS        Januar 2016
   --------------------------------------------------------------------------------------------
   -------------------------------------------------------------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700|Pontano+Sans);
@import url("../font-awesome/css/font-awesome.css");/*Icon-Fonts*/

*{margin: 0; padding: 0; box-sizing: border-box;}
img{border:none;}


html { 
	font-size:100%;
	-webkit-text-size-adjust: none;
	height: 100%;
}
body {
	background-color: #272a3e;
	font-size: 1.2em;
	font-family: 'PT Sans Caption', sans-serif;
	font-weight: 400;
	color:#ffd149;
	height: 101%;
}

/* ----------------------------------------------
	          Titel / Absatz 
   ---------------------------------------------- */		
h1 {
	font-size:2em;
	margin: 0 0 10px 0;
	border-bottom: 3px solid #d40000;
	font-family: 'Pontano Sans', sans-serif;
	font-weight: 400;
	text-align: center;
	padding: 15px 10px;
}
h2 {
	font-size:1.5em;
	margin: 7px 15px 0 15px;
	font-family: 'Pontano Sans', sans-serif;
	font-weight: 400;
}
h4 {/*Logo-Schriftzug klein*/
	font-size:2.5em;
	margin-left: 15px;
	padding-top: 7px;
	font-family: 'Pontano Sans', sans-serif;
	font-weight: 400;
	color: #d40000;
}
h5 {/*Logo-Schriftzug gross*/
	display: none;
}
p {
	padding:  0 0 10px 0;
	hyphens: auto;
	margin: 0 15px 0 15px;
}  
ol {
	list-style-position: outside;
	list-style-type: disc;
	padding-left: 15px;
	hyphens: auto;
	margin: 0 15px 10px 15px;
} 
/* -------------------------------------
                Header 
   ------------------------------------- */
body>header {
	padding: 15px 0;
}
.menubutton {
    position:absolute;
    right:15px;
    top:37px;
    z-index: 400;
    font-size:1.5em;
}
.menubutton a:hover{color: #ff8e2a;}

/* -------------------------------------
               navigavtion
   ------------------------------------- */ 
.nav ul { 
	list-style-type: none; 
	margin:0;
}
.nav ul li{margin-bottom: 15px;}
.nav ul li a, a:visited, a:active {
	display: block;
	font-family: 'Pontano Sans', sans-serif;
	font-weight: 400;
	letter-spacing: 2px;
	padding: 5px 10px;
	text-transform:none;
	color: #677adc;
	text-decoration:none;
	background-color: #272a3e;
	border-bottom: 1px dotted  #677adc;
}
.nav ul li a:hover {	
	transition:all 0.8s ease-in-out 0s;/* - transition = ein- ausblenden - Hoovereffekt - */		
	color: #ff8e2a;		
	}
#mainnavdesc {display: none;}/* - Navi rechts oben ausblenden - */

/* -------------------------------------
                 content     
   ------------------------------------- */


/* ---------  Inhaltsboxen --------*/
#box article {
	padding:15px;
	width: calc(100% / 1 - 0);
	padding: 0;
	margin: 0 0 25px 0;
	position: absolut;
	overflow: hidden;
	flex-grow: 1;
	flex-basis: auto;
	background-color: rgba(0, 0, 10, 0.9);
}
#box article img{width:100%;}
#box  a, a:visited, a:active{color: #ff8e2a;}
#box  a:hover {color:#ffd149;}

/* -------------------------------------
                Footer    
   ------------------------------------- */
footer{
	padding: 25px 0 205px 0;
	background-color: #4e1b1b;
	color:#fffaf4;
}
.footer-segment {margin: 0;}
footer a, a:visited{color: #ffd149;}
footer a:hover{color:#fffaf4;}
.left {float: left; margin-bottom: 15px; display:block;}
.right{float: left;  border-top: 1px solid #fff; padding-top: 15px;}


.clear{clear:both;}

/* -------------------------------------
               Top-Button    
   ------------------------------------- */
.top {
	font-size:3rem;
	position:fixed;
	bottom:25px;
	right:15px;
	padding: 0 15px;
	margin:0;
	box-sizing:border-box; 
	box-shadow: 1px 3px 10px -5px #ffd149, 
	-9px -8px 30px 0 #ffd149 inset;
	border-radius: 250px;
}
.top:hover {
	padding: 0 15px;
	bottom:40px;
	transition:all 0.5s ease-in-out 0s;
	box-shadow: 2px 2px 22px #ffd149 inset;
}
a[href ^="#top"]:before {
	font-family: 'FontAwesome';
	content: "\f106";
	color:#ffd149;
}
.top a:hover {
	color:#ffd149;
}

/* -------------------------------------
              Attribut-Selektoren    
   ------------------------------------- */
a[href ^="mailto"]:before {
	content: "\f003";
	font-family: 'FontAwesome';
	margin-right: 5px;
} 
a[href ^="http://"]:before {
	content: "\f08e";
	font-family: 'FontAwesome';
	margin-right: 5px;
}
a[href *=".pdf"]:before {
   content: "\f1c1";
	font-family: 'FontAwesome';
	margin-right: 5px;
} 


/* -------------------------------------
                  Other    
   ------------------------------------- */   
/*---   Text-Highlight-Farbe   ----*/
::selection {
   background: #d40000;
   color: #fffcf8;
}
::-moz-selection {
   background: #d40000;
   color: #fff;
}
/*---   Hovering  ----*/
a, a:visited, a:active{	
	margin: 0; 
	font-family: 'PT Sans Caption', sans-serif;
	font-weight: 400;
	text-decoration:none;
	padding: 0;
	background-color: transparent;
	display: inline;
	letter-spacing: 0px;
}



/* ----------------------------------------------
	        Media Queris min-width: 400px
   ---------------------------------------------- */
@media screen and (min-width: 400px) {	

.right{float: right; text-align:right; border-top: none; padding-top: 0;}
}
/* ----------------------------------------------
	        Media Queris min-width: 600px
   ---------------------------------------------- */
@media screen and (min-width: 600px) {

/* ---------  Header --------*/

h5 {/*Logo-Schriftzug gross*/
	display: inline;
	font-size:5em;
	margin-left: 15px;
	padding-top: 7px;
	font-family: 'Pontano Sans', sans-serif;
	font-weight: 400;
	color: #d40000;
}	
h4 {display: none;}

.menubutton {display: none;}

/* ---------  Navigation --------*/
.nav {
	margin: 0;
	padding: 0 15px 10px 15px;
}
.nav:after{
	clear: left;
	content:' ' ;
	display: block;
}
.nav li{float:left;}
.nav ul {border-bottom:none;}
.nav ul li a, a:visited, a:active {
	padding: 5px 0;
	margin: 0 15px 0 0;
	background:none;
	border-bottom: none;
}

/* ---------  Inhaltsboxen --------*/
#box {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding:0 0 10px 0;
}
#box article {margin: 0 0 50px 0;}

/* ---------  Footer --------*/
.right{float: right; text-align:right; border-top: none; padding-top: 0;}
}

/* ----------------------------------------------
	   Media Queris min-width: 1160px
   ---------------------------------------------- */
@media screen and (min-width: 1160px) {
	body {
	background: url(../Bilder/bg.jpg) no-repeat center fixed;
	background-size: cover;
}
/* ---------  Container --------*/
#container {
	width:100%;
	margin: 0 auto;
	position:relative;
}
/* ---------  Navigation --------*/
#mainnavdesc{/* - Navi rechts oben einblenden - */ 
	display: inline;
	max-width:1100px;
	margin: 0 auto;
	position:absolute;
	right: 0;
	top:0;
	border-bottom: none;
}
#mainnav{ display:none;}/* - Navi links unter Header ausblenden - */
.nav ul li a, a:visited, a:active {margin: 0 0 0 15px;}
.nav {padding: 65px 15px 10px 15px;}
a, a:visited, a:active{
	margin: 0; 
	font-family: 'PT Sans Caption', sans-serif;
	font-weight: 400;
	display: inline;
	letter-spacing: 0px;
}