/* FONT IMPORT */

@font-face {
  font-display: swap;
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oxygen-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/oxygen-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/oxygen-v15-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/oxygen-v15-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/oxygen-v15-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/oxygen-v15-latin-regular.svg#Oxygen') format('svg'); /* Legacy iOS */
}


/* BASIC */

body { 	font-family: Oxygen; background-color: #f0f0f0; height:100%;  }

#bg-fader { height: 130vh; width: 60%; background-image: url("../images/2.jpg"); background-position: center left; background-size: cover; position: absolute; right: 0; top: -15vh; }

@media (min-width:769px) and (max-width:1199px) {
	#bg-fader { width: 80%; }
}

@media (max-width:768px) {
	#bg-fader { height: 40vh; width: 100vw; background-image: url("../images/2.jpg"); background-position: center center; background-size: cover; position: relative; display: block; top: 0; margin-bottom: -50px; }
}

.bg-overlay { height: 100%; width: auto; position: absolute; right: 32vw; }

@media (max-width:768px) {
	.bg-overlay {      transform: rotate(-90deg);   width: 120vw;    height: auto;    position: absolute;    top: 25vh;    right: -10vw;} 
}

h1 {  font-size: 50px; color: #000000;  }
h2 {  font-size: 30px; color: #707070; margin-bottom: 50px;  }
h3, h4, .modal-body p { padding-bottom: 15px; }

.gruppenlogo { margin: 25px 0;  }

@media (min-width:768px) {
.gruppenlogo { margin: 50px;  }
	}
.gruppenlogo img { max-width: 250px; }

.red { background-color: #FFFFFF; padding: 35px 15px 0 15px; text-align: center; border-bottom: 5px solid #D9000D; height: 100%; }
.red .btn { background-color: #D9000D; color: #FFFFFF; height: 50px; width: 50px; padding-top: 12px; border-radius: 0; position: absolute; bottom: 0; right: 15px;}

.green { background-color: #FFFFFF; padding: 35px 15px 0 15px; text-align: center; border-bottom: 5px solid #00965F; height: 100%; }
.green .btn { background-color: #00965F; color: #FFFFFF; height: 50px; width: 50px; padding-top: 12px; border-radius: 0; position: absolute; bottom: 0; right: 15px;}

.blue { background-color: #FFFFFF; padding: 35px 15px 0 15px; text-align: center; border-bottom: 5px solid #0069B4; height: 100%; }
.blue .btn { background-color: #0069B4; color: #FFFFFF; height: 50px; width: 50px; padding-top: 12px; border-radius: 0; position: absolute; bottom: 0; right: 15px;}

.red img, .green img, .blue img  { width: 100%; height: auto; }

.marg-25 { margin-bottom: 30px; }

.modal-header { background-color: #dee2e6; }
.modal-content { background-color: #f0f0f0;  }
.modal-body { padding: 50px; }

.red:hover, .blue:hover, .green:hover { cursor: default!important; box-shadow: 0px 0px 40px rgba(0,0,0,0.25); } 
.red p, .green p, .blue p { margin: 25px 15px 50px 15px; color: #000000; font-size: 14px; text-decoration: none; }
a:hover { text-decoration: none; cursor: pointer!important; }
.icon { fill: white; width: 20px; height: auto; }
.red { cursor: pointer!important; }
a:hover { cursor: pointer!important; }
a.footer { color: #707070; font-size: 12px; margin-right: 25px; text-decoration: underline; cursor: pointer; }

.smallicon { fill: #aaaaaa; width: 18px; height: auto; margin-left: 10px;  }

.red .smallicon { fill: #D9000D; }
.green .smallicon { fill: #00965F; }
.blue .smallicon { fill: #0069B4; }

.icons { text-align: right; position: absolute; bottom: 15px; right: 80px; }