@charset "UTF-8";
/* CSS Document */

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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    font-family: 'Fira Sans', sans-serif;
}


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

/*------------------ font --------------------------*/

/* fira-sans-300 - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  src: url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-300.woff') format('woff'), /* Modern Browsers */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-300.svg#FiraSans') format('svg'); /* Legacy iOS */
}

/* fira-sans-regular - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */
}

/* fira-sans-500 - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  src: url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-500.woff') format('woff'), /* Modern Browsers */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-500.svg#FiraSans') format('svg'); /* Legacy iOS */
}

/* fira-sans-600 - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  src: url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-600.woff') format('woff'), /* Modern Browsers */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.retrotop.de/ressources/fonts/fira-sans-v11-latin-600.svg#FiraSans') format('svg'); /* Legacy iOS */
}

/*--------------------- margin grid -----------------*/

.ma-10 {margin:5px;}

.ma-20 {margin:10px;}

.ma-30 {margin:15px;}

.ma-40 {margin:120px;}

.ma-100 {margin:50px;}

/*--------------------- padding grid -----------------*/

.pa-10 {padding:10px;}

.pa-20 {padding:20px;}

.pa-30 {padding:30px;}

.pa-40 {padding:40px;}

.pa-50 {padding:50px;}

/*--------------------- Vertikaler Abstand -----------------*/

.ab-10 {padding-top:10px;}

.ab-20 {padding-top:20px;}

.ab-30 {padding-top:30px;}

.ab-40 {padding-top:40px;}

.ab-50 {padding-top:50px;}

/*--------------------- border -----------------*/

.bo-1 {border: rgba(104,183,194,1.00) solid 1px}
.bo-2 {border: rgba(104,183,194,1.00) solid 2px}
.bo-3 {border: rgba(104,183,194,1.00) solid 4px}
.bo-4 {border: rgba(104,183,194,1.00) solid 8px}

/*--------------------- radius -----------------*/

.ra-1 {border-radius: 5px}
.ra-2 {border-radius: 10px}
.ra-3 {border-radius: 15px}
.ra-4 {border-radius: 20px}

/*--------------------- Background -----------------*/

.bg-1 { background:rgba(40,188,234,1); color: rgba(255,255,255,1.00)}
.bg-2 { background: rgba(104,183,194,1.00); color: rgba(255,255,255,1.00)}

/*---------------------- grid ------------------*/

 .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: 100%; display:block}   

/* 1024 */
@media (min-width: 48em) {
    
    .row {max-width: 1200px; margin: auto}
    
    .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;}
    
    .col-12 {width: 100%;}
    .col-11 {width: 91.67%;}
    .col-10 {width: 83.34%;}
    .col-9 {width: 75%;}
    .col-8 {width: 66.67%;}
    .col-7 {width: 58.43%;}
    .col-6 {width: 50%;}
    .col-5 {width: 41.57%;}
    .col-4 {width: 33.33%;}
    .col-3 {width: 25%;}
    .col-2 {width: 16.66%;}
    .col-1 {width: 8.33%;}
    
}

/*---------------- typographie ---------------*/

/*headlines*/

p, a {font-weight: 300; line-height: 130%; font-family: 'Fira Sans', sans-serif; color: rgba(0,0,0,1.00)}
h1, h2, h3, h4, h5, h6 {font-weight: 600; padding: 10px 0 0; font-family: 'Fira Sans', sans-serif;}

p {font-size: 1.2em}
h1 {font-size: 3em}
h2 {font-size: 2em}
h3 {font-size: 1.8em}
h4 {font-size: 1.6em}
h5 {font-size: 1.4em}
h6 {font-size: 1.2em}
strong {font-weight: 600; font-family: 'Fira Sans', sans-serif;}

@media (min-width: 48em) {

p, a {font-weight: 300; line-height: 130%; color: rgba(0,0,0,1.00)}
h1, h2, h3, h4, h5, h6 {font-weight: 600; padding: 10px 0 0}

p {font-size: 1.4em}
h1 {font-size: 3em}
h2 {font-size: 2em}
h3 {font-size: 1.8em}
h4 {font-size: 1.6em}
h5 {font-size: 1.4em}
h6 {font-size: 1.2em}
strong {font-weight: 600; font-family: 'Fira Sans', sans-serif;}    
}

/*text-align*/

.ta-center {text-align: center}
.ta-left {text-aign: left}
.ta-right {text-align: right}

/*---------- button -------------*/

.bu-1 {
  width: 100%;
  color: rgba(88,88,90,1);
  clear:both;
  margin-top:20px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(177,201,31,1);
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 25px;
  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;
   }
  
.bu-1:hover 
 {
  color: #fff;
  background-color: rgba(0,0,0,1);
  border-color: #333;
  outline: 0; }

.bu-2 {
  width: 100%;
  color: rgba(0,0,0,1);
  clear:both;
  margin-top:20px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(255,255,255,1);
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 25px;
  border: 1px solid #000;
  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;
   }
  
.bu-2:hover 
 {
  color: #fff;
  background-color: rgba(0,0,0,1);
  border-color: #333;
  outline: 0; }

.bu-3 {
  width: 100%;
  color: rgba(255,255,255,1);
  clear:both;
  margin-top:20px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(113,122,250,1.00);
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  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;
   }
  
.bu-3:hover 
 {
  color: #fff;
  background-color: rgba(0,0,0,1);
  border-color: #333;
  outline: 0; }

.bu-4 {
  width: 100%;
  color: rgba(0,0,0,1);
  clear:both;
  margin-top:20px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(255,255,255,1.00);
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  border: 1px solid #000;
  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;
   }
  
.bu-4:hover 
 {
  color: #fff;
  background-color: rgba(0,0,0,1);
  border-color: #333;
  outline: 0; }

/*----------------- flex box --------------*/

.flex-container {
 display: block;
}

.flex-item {
  width: 98%;
  margin: 1%;
  text-align: center;
  line-height: 100px;
  font-size: 24px;
}

@media (min-width: 48em) {

.flex-container {
  display: flex;
}

.flex-item {
  margin: 1vw;
  text-align: center;
  line-height: 100px;
  font-size: 24px;
}
    
}