/* CSS Document */

	.cf:before,
	.cf:after {content:""; display:table;}
	.cf:after {clear:both;}

body {

}

    header, nav, main, section, article, aside, footer {display: block;}

	nav li {	  
	  list-style-type: none;
	}

/* mobil */
@media (min-width: 300px) {

.row, .row2 {width:90%; margin:0 5%;}

.col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {width:96%; padding:1%; margin:1%; min-height:50px;}
    
/*abstaende*/
    
    .ab-30 {height: 30px;}
    .ab-50 {height: 50px;}
    
    .pd-20 {padding: 0}
    .pd-30 {padding: 0}
    .pd-40 {padding: 0}
    .pd-60 {padding: 0}
    .pd-80 {padding: 0}

}

/* 1024 */
@media (min-width: 960px) {
	
.col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {float: left}

.row {max-width:1200px; margin:0 auto;}
    
.row2 {max-width:1100px; margin:0 auto;}

.col-12 {width:96%; padding:1%; margin:1%;}

.col-11 {width:87.66%; padding:1%; margin:1%;}

.col-10 {width:79.33%; padding:1%; margin:1%;}

.col-9 {width:71%; padding:1%; margin:1%;}

.col-8 {width:62.66%; padding:1%; margin:1%;}

.col-7 {width:54.33%; padding:1%; margin:1%;}

.col-6 {width:46%; padding:1%; margin:1%;}

.col-5 {width:37.66%; padding:1%; margin:1%;}

.col-4 {width:29.33%; padding:1%; margin:1%;}

.col-3 {width:21%; padding:1%; margin:1%;}

.col-2 {width:12.66%; padding:1%; margin:1%;}

.col-1 {width:4.33%; padding:1%; margin:1%;}
    
/*abstaende*/
    
    .ab-30 {padding: 30px auto;}
    .ab-50 {padding: 50px auto;}
    
    .pd-20 {padding: 0 20px}
    .pd-30 {padding: 0 30px}
    .pd-40 {padding: 0 40px}
    .pd-60 {padding: 0 60px}
    .pd-80 {padding: 0 80px}


}

/*################### typography ###################*/

a {color: #0099CC;}

a:hover {color: #00CCCC;}

li {
	list-style-position: outside;
	list-style-type: square;
}

ul ul li {
	list-style-position: outside;
	list-style-type: circle;
	}

hr {
	width: 100%;
	margin-bottom: 10px;
	padding-top: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
	
/* button */

button1 {
  color:#fff;
  clear:both;
  margin:20px 0 20px 0;
  padding: 10px 32px;
  background-color: rgba(40,188,234,1);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 40px;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0px;
  border: 0px solid #bbb;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-transform: translateZ(0);
	transform: translateZ(0);
  -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
	overflow: hidden;
  -webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
  -webkit-transition-property: color, background-color;
	transition-property: color, background-color;
   }
  
button1:hover 
 {
  color: #fff;
  background-color: rgba(0,0,0,1);
  border-color: #333;
  outline: 0; }
  
button2 {
  color:#fff;
  clear:both;
  margin:20px 0 20px 0;
  padding: 10px 32px;
  background-color: rgba(40,188,234,1);
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 40px;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 15px;
  border: 0px solid #bbb;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-transform: translateZ(0);
	transform: translateZ(0);
  -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
	overflow: hidden;
  -webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
  -webkit-transition-property: color, background-color;
	transition-property: color, background-color;
   }
  
button2:hover 
 {
  color: #fff;
  background-color: rgba(0,0,0,1);
  border-color: #333;
  outline: 0; }

p {
	-moz-hyphens: auto;
   	-o-hyphens: auto;
   	-webkit-hyphens: auto;
   	-ms-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: auto 5;
	hyphenate-limit-lines: 2;
	}

h1, h2, h3, h4, h5, h6 {font-weight: 300; letter-spacing: -0.04em;}

/* mobil */
@media (min-width: 300px) {

a {font-size:0.9em; font-style:normal; line-height:200%;}

p, li {font-size:0.9em; font-style:normal; line-height:200%;}

h1 {font-size:2.5em; font-style:normal; line-height:130%;}

h2 {font-size:1.4em; font-style:normal; line-height:200%;}

h3 {font-size:1.2em font-style:normal; line-height:160%;}

h4 {font-size:1em; font-style:normal; line-height:200%;}

}

/* 1024 */
@media (min-width: 960px) {

a {font-size:0.9em; font-style:normal; line-height:200%;}

p, li {font-size:0.9em; font-style:normal; line-height:200%;}

h1 {font-size:3.2em; font-style:normal; line-height:100%;}

h2 {font-size:1.4em; font-style:normal; line-height:200%;}

h3 {font-size:1.2em font-style:normal; line-height:160%;}

h4 {font-size:1em; font-style:normal; line-height:200%;}

}