@CHARSET "ISO-8859-1";

@font-face {
    font-family: quicksand;
    src: url('/fonts/Quicksand-Regular.ttf');
}


/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#222;
}
p {
	color: #222;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


/* Custom CSS
 * --------------------------------------- */
body{
	font-family: arial,helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
	background-color:#000;
}
.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
	font-size: 2.5em;	
	font-family: quicksand, sans-serif;
}
p{
	font-size: 1.0em;
}
#header, #footer{
	position:fixed;
	height: 64px;
	display:block;
	width: 100%;
	background: #F9F6F3;
	z-index:9;
	text-align:center;
	color: #f2f2f2;
	-webkit-box-shadow: 0 1px 3px 0px #333;
	   -moz-box-shadow: 0 1px 3px 0px #333;
	        box-shadow: 0 1px 3px 0px #333;
}
#section-1 {
	background-image:
	   linear-gradient(
      140deg, 
      #593C71,#b3bece,#C7F3DB
    );
    text-align: center;
}
#section-1 p {
	text-align: justify;
}
#section0 {
	background-image:
    linear-gradient(
      40deg, 
      #593C71,#b3bece,#C7F3DB /*dark ish*/
      /*#8457a8,#d1ffe6 /*lighter */
    );
}
#section1 {
	background-image:
    linear-gradient(
      135deg, 
      /*#7D498A,#86DFCB*/
      #593C71,#8CA9B9,#86DFCB
    );
}
#section2 {
	background-image:
    linear-gradient(
      -135deg, 
      /*#2C719E,#FFAA8E*/
      #86DFCB,#7F9E9F,#40243a
    );
}
#section3 {
	background-image:
    linear-gradient(
      130deg, 
      /*#FFDB92,#384992*/
      #020014,#16091f
    );
    color: #E5E5E5;
}

.lightText {
	 color: #E5E5E5;
}
.active .pure-img {
	transform: translateY(0px);
	opacity: 1;
	transition: all 1.0s ease-out;
	-moz-transition: all 1.0s ease-out;
	-webkit-transition: all 1.0s ease-out;
}
div#impressum {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0.75rem;
	text-align: center;
	background-color: rgba(15,6,27,0.95);
	z-index: 2;
}
div#impressum p{
	font-size: 0.75em;
	color: #E5E5E5;
	font-family: quicksand, sans-serif;
}
div#impressum a{
	color: #E5E5E5; /*#8457a8*/
}

button {
	color: #FFF;
    background-color: rgba(255,255,255,0.1);
    background-image: none;
    border-color: #FFF;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    transform: translateY(0px);
	opacity: 0.8;
	transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
}
button:hover {
	background-color: #402343;
	transform: translateY(0px);
	opacity: 1;
	transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;

}
#header{
	top:0px;
}

.pure-u-1 { padding-left: 32px;
			padding-right: 32px;
}
#fp-nav.fp-right {
    right: 1px;
}
#fp-nav ul li .fp-tooltip { 
	display: none; 
}
@media screen and (min-width: 1em) and (orientation: portrait)
{	
	.pure-u-sm-1-24.menuElem{ visibility: hidden;}
	.rightAlign { text-align: center;}
	.leftAlign { text-align: justify;}

	p {font-size: 0.9em;}
	h1{font-size: 2.2em;}
}
@media screen and (min-width: 32em) and (orientation: portrait)
{	
	.pure-u-sm-1-24.menuElem { visibility: visible;}
	.rightAlign { text-align: center;}
	.leftAlign { text-align: justify;}
	p {font-size: 1.0em;}
	h1{font-size: 2.5em;}

}
@media screen and (min-width: 64em) and (orientation: portrait)
{	
	.pure-u-sm-1-24.menuElem { visibility: visible;}
	.rightAlign { text-align: center;}
	.leftAlign { text-align: justify;}
	p {font-size: 1.4em;}
	h1{font-size: 4.5em;}

}

@media screen and (min-width: 1em) and (orientation: landscape)
{
	.rightAlign { text-align: right;}
	.leftAlign { text-align: left;}
	p {font-size: 0.9em;}
	h1{font-size: 2.2em;}
}

@media screen and (min-width: 32em) and (orientation: landscape)
{
	.rightAlign { text-align: right;}
	.leftAlign { text-align: left;}
	p {font-size: 1.0em;}
	h1{font-size: 2.5em;}
}
@media screen and (min-width: 64em) and (orientation: landscape)
{
	.rightAlign { text-align: right;}
	.leftAlign { text-align: left;}
	p {font-size: 1.4em;}
	h1{font-size: 4.5em;}
}

.pure-img { 
	display: inline;
	opacity: 0;
	transform: translateY(-50px);
	transition: all 1.0s ease-out;
	-moz-transition: all 1.0s ease-out;
	-webkit-transition: all 1.0s ease-out;
}
#mt-img {
	max-height: 450px;
}
.section{
	text-align:center;
}

.leftAlign hr {
	border-style: solid;
    border-width: 1px;
}

#mainlogo { 
    width: 100%;
    padding-bottom: 2em;
    max-width: 500px;
    opacity: 0.0;
    transform: translateY(-50px);
	transition: all 1.0s ease-out;
	-moz-transition: all 1.0s ease-out;
	-webkit-transition: all 1.0s ease-out;
}
.active #mainlogo {
	transform: translateY(0px);
	opacity: 1;
	transition: all 1.0s ease-out;
	-moz-transition: all 1.0s ease-out;
	-webkit-transition: all 1.0s ease-out;
}
#logo {
	height: 64px;
	top:5px;
	padding-left: 5px;
	padding-right: 5px;
	position: absolute;
	z-index: 1;
	opacity: 0;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
}
#sectionImg0 {
	height: 300px;
	overflow: auto;
}
#sectionImg3 {
	height: 500px;
	overflow: hidden;
}

#menu div {
	display:inline-block;
	margin: 2px;
	color: #333;
	font-family: quicksand, sans-serif;
    font-size: 24px;
}
#menu div.active{
	border-width: 0px; 
	text-decoration: underline
}
#menu div a{
	padding: 9px 18px;
	display:block;
	text-decoration:none;
	color: #333;
}
#menu div.active a:hover{
	color: #7212BD;
}
#menu div:hover{
	color: #7212BD;
}
#menu div.active a{
	color: #7212BD
}
#menu div.active a{
	color: #900BF8;
}
#menu{
	position:fixed;
	top:0;
	left:0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}

#infoMenu{
	height: 20px;
	color: #f2f2f2;
	position:fixed;
	z-index:70;
	bottom:0;
	width:100%;
	text-align:right;
	font-size:0.9em;
	padding:8px 0 8px 0;
}
#infoMenu ul{
	padding: 0 40px;
}
#infoMenu li a{
	display: block;
	margin: 0 22px 0 0;
	color: #333;
}
#infoMenu li a:hover{
	text-decoration:underline;
}
#infoMenu li{
	display:inline-block;
	position:relative;
}