@font-face
{
font-family: "Oswald"; 
src: local("Oswald"),
url("../Oswald-Regular.ttf")
format("TrueType")
}
#main{
cursor:default;
    height:633px;
    border-bottom:1px solid #ddd;
    border-top:1px solid #ddd;

    margin-top:80px;

    background:#fff url(bg.png) no-repeat top left;
}
#main ul{
    
    list-style:none;
    margin:0px auto 0px auto;

background:#fff;
 opacity: 0.9;
}

#nav{
cursor:default;
    height:65px;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#fff url(logo.png) no-repeat center left;
}
#nav ul{
    height:25px;
    list-style:none;
    margin:16px auto 0px auto;
    width:400px;
font-size:20px;
}
#nav ul li{
    display:inline;
    float:left;
    margin:0px 2px;
}
#nav a:hover{
    background:#8e00ad none;
    color: #fff;
}
#nav font{
font-family:Oswald;
cursor:pointer;
margin-left:20px;
}

.arrow {cursor:pointer;
	border: 5px solid #000;
	font-size:5px;line-height:0;height:0;padding:0;margin:0;
}
.arrow.down {
	border-right-color:  transparent;
	border-bottom-color: transparent;
	border-left-color:   transparent;
margin-left:10px;
}
        body{
	background:#EFF7FF;
        }


#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}

.flex-containerr {
	display: flex;
	background-color: none;
	justify-content: center;
	align-items: center;
flex-wrap: wrap;
          flex-direction: row;
}

.flex-item1 {
  background-color: blue;
  width: 350px;
  margin: 10px;
padding:10px;
height:230px;
border-radius: 5px;
background-image: linear-gradient(white, #fbfbfb);
border:1px solid #8e00ad;

}
h1
{
display:inline;
padding:10px;
font-family:Oswald;
font-size:30px;
font-weight:normal;
letter-spacing:1.4px; 
}

h2
{

font-family:Oswald;
font-size:14px;
font-weight:normal;
letter-spacing:1.4px;
color:#e7a753;
color:#000;
}

h3
{
display:inline;
padding:10px;
font-family:Oswald;
font-size:12px;
font-weight:normal;
letter-spacing:1.4px;
color:#bdbdbd;
}

h4
{
display:inline;
padding:10px;
font-family:Oswald;
font-size:12px;
font-weight:500;
letter-spacing:1.4px;
color:black;
}

h5
{
display:inline;
padding:10px;
font-family:Oswald;
font-size:14px;
font-weight:500;
letter-spacing:1.4px;
color:black;
}

.topnav {
  overflow: hidden;
border:0;
position:relative;
    top:-10px;
}

.topnav a {
  float: left;
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
font-family:Oswald;
}

.topnav a:hover {
  background-color: #97d9ff;
  color: black;
}

.topnav a.active {
  background-color: #8e00ad;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 900px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
float:right;
    display: block;

  }
}


@media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;

  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
color:black;
background:white;

  }
}






.flex-containerv {
	display: flex;
	justify-content: center;

	flex-wrap: wrap;
align-items: flex-start;
}

.flex-item1v {
  width: 350px;
  margin: 10px;
padding:10px;
height:225px;
border-radius: 5px;
background-image: linear-gradient(white, #fbfbfb);
border:1px solid #8e00ad;
}
.flex-item2v {
  width: auto;
  margin: 0px;

}
.flex-item3v {
  width: 350px;
  margin: 10px;
padding:10px;
height:142px;
border-radius: 5px;
background-image: linear-gradient(white, #fbfbfb);
border:1px solid #8e00ad;
}
.flex-item4v {

  width: 350px;
height:400px;
  margin: 10px;
padding:10px;
border-radius: 5px;
background-image: linear-gradient(white, #fbfbfb);
border:1px solid #8e00ad;
}

.flex-item6v {

  width: 350px;
height:600px;
  margin: 10px;
padding:10px;
border-radius: 5px;
background-image: linear-gradient(white, #fbfbfb);
border:1px solid #8e00ad;
}

.flex-item7v {

  width: 350px;
  margin: 10px;
padding:10px;
border-radius: 5px;
background-image: linear-gradient(white, #fbfbfb);
border:1px solid #8e00ad;



}

.flex-item8v {

  width: 350px;
  margin: 10px;
padding:10px;
border-radius: 5px;
background-image: linear-gradient(white, #fbfbfb);
border:1px solid #8e00ad;
}

input.login
{
width:200px;
padding:2px;
margin-left:10px;
}

input.login2
{
width:322px;
padding:2px;
margin-left:10px;
}


.center {
  width: 180px;
  height: 60px;
  position: absolute;
}


.btn {
  width: 322px;
  height: 60px;
  cursor: pointer;
  border: 1px solid #8e00ad;
  outline: none;
  transition: 1s ease-in-out;
background: #a900cd;
margin-left:10px;
margin-top:10px;
letter-spacing:2px;
font-weight:500;
font-family:Oswald;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
  fill: none;
  stroke: #fff;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  transition: 1s ease-in-out;
}



.btn:hover svg {
  stroke-dashoffset: -480;
}

.btn span {
  color: white;
  font-size: 18px;
  font-weight: 100;
}

p,
label {
    font: 1rem 'Fira Sans', sans-serif; letter-spacing:1px;
}

input {cursor:pointer;
    margin: .4rem; font: 1rem 'Fira Sans', sans-serif; letter-spacing:1px;
}


input.maka
{
font-size:14px;font-family:arial;
padding:0px;border:0px solid black;width:100%;cursor:default;
}

input.maka2
{
font-size:14px;font-family:arial;margin-top:3px;
padding:0px;border:0px solid black;width:130px;cursor:default;
}
h7
{
font-size:20px;
}

label.mittelding
{

font-family:Oswald;
font-size:15px;
font-weight:normal;
letter-spacing:1.4px;
color:#e7a753;
color:#000;
}