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

html, body {width:100%; height:100%; margin: 0px; padding: 0px;}

body {
    font-family: 'Quicksand', sans-serif;
	font-weight:lighter;
    -webkit-font-smoothing: antialiased;
	font-size: 18px;
}


.teaser {
  position: relative;
  background: transparent no-repeat 50% 50%;
  background-size: cover;
  padding: 20vh 0 0 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
  letter-spacing:5px;
	height: 350px;
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
  text-shadow: 0 0 20px rgba(35,40,43,0.54);
}
.teaser--bg {
  background-color: #333;
  background-image: linear-gradient(to bottom, rgba(47, 142, 177, 0.8), rgba(47, 142, 177, 0)), url("mawetech.jpg");
  background-size: 100% 300px, cover;
  background-position: 50% 0, 50% 50%;
}

.teaser2 {
  position: relative;
  background: transparent no-repeat 50% 50%;
  background-size: cover;
  padding:  0 0 20vh 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
  letter-spacing:5px;
	height: 300px;
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
  text-shadow: 0 0 20px rgba(35,40,43,0.54);
}
.teaser--bg2 {
  background-color: #333;
  background-image: linear-gradient(to bottom, rgba(1, 16, 23, 0.8), rgba(1, 23, 23, 0)), url("spainmap.gif");
  background-size: 100% 300px, cover;
  background-position: 50% 0, 50% 50%;
}

.teaser3 {
  position: relative;
  background: transparent no-repeat 50% 50%;
  background-size: cover;
  padding:  0 0 20vh 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
  letter-spacing:5px;
	height: 300px;
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
  text-shadow: 0 0 20px rgba(35,40,43,0.54);
}
.teaser--bg3 {
  background-color: #333;
  background-image: linear-gradient(to bottom, rgba(1, 16, 23, 0.8), rgba(1, 23, 23, 0)), url("flightmap.gif");
  background-size: 100% 300px, cover;
  background-position: 50% 0, 50% 50%;
}

.teaser4 {
  position: relative;
  background: transparent no-repeat 50% 50%;
  background-size: cover;
  padding:  0 0 20vh 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
  letter-spacing:5px;
	height: 300px;
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
  text-shadow: 0 0 20px rgba(35,40,43,0.54);
}
.teaser--bg4 {
  background-color: #333;
  background-image: linear-gradient(to bottom, rgba(1, 16, 23, 0.8), rgba(1, 23, 23, 0)), url("spanienwetter.gif");
  background-size: 100% 300px, cover;
  background-position: 50% 0, 50% 50%;
}

.teaser5 {
  position: relative;
  background: transparent no-repeat 50% 50%;
  background-size: cover;
  padding:  0 0 20vh 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
  letter-spacing:5px;
	height: 300px;
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
  text-shadow: 0 0 20px rgba(35,40,43,0.54);
}
.teaser--bg5 {
  background-color: #333;
  background-image: linear-gradient(to bottom, rgba(1, 16, 23, 0.8), rgba(1, 23, 23, 0)), url("sicherheit.gif");
  background-size: 100% 300px, cover;
  background-position: 50% 0, 50% 50%;
}

.teaser6 {
  position: relative;
  background: transparent no-repeat 50% 50%;
  background-size: cover;
  padding:  0 0 20vh 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
  letter-spacing:5px;
	height: 300px;
  text-shadow: 0 0 20px rgba(0,0,0,0.5);
  text-shadow: 0 0 20px rgba(35,40,43,0.54);
}
.teaser--bg6 {
  background-color: #333;
  background-image: linear-gradient(to bottom, rgba(1, 16, 23, 0.8), rgba(1, 23, 23, 0)), url("monitoring.gif");
  background-size: 100% 60%, cover;
  background-position: 50% 0, 50% 50%;
}


h1 { font-size:60px; color: #fff; text-shadow: 5px 0 20px rgba(0,0,0,0.8);}
.teaser--bg2 h1 { font-size:30px; color: #fff; text-shadow: 0 0 20px rgba(0,0,0,0.5); font-weight: 100;}
.teaser--bg3 h1 { font-size:30px; color: #fff; text-shadow: 0 0 20px rgba(0,0,0,0.5); font-weight: 100;}
.teaser--bg4 h1 { font-size:30px; color: #fff; text-shadow: 0 0 20px rgba(0,0,0,0.5); font-weight: 100;}
.teaser--bg5 h1 { font-size:30px; color: #fff; text-shadow: 0 0 20px rgba(0,0,0,0.5); font-weight: 100;}
.teaser--bg6 h1 { font-size:30px; color: #fff; text-shadow: 0 0 20px rgba(0,0,0,0.5); font-weight: 100;}

h1.bildtext { margin:-20vh 0 0 0;  text-align: center; font-size:40px; color: #fff; text-shadow: 0 0 20px rgba(0,0,0,0.5);  font-weight: 100;}

h2 { font-size:30px; text-align: center; }
h2.inbild {margin-top:-200px; text-align: center; color: #fff;}

#box0 {
  background-color: #333;
  background-image: url("hintergrund.jpg");
  background-size: 100% 100%, cover;
  background-position: 50% 0, 50% 50%;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 500px;
}

#bild-top { height: auto;max-height: 590px; overflow: hidden; position: relative;width: 100%;}
#bild-top img {margin-top: -140px;}

#bild-top2 { height: auto;max-height: 590px; overflow: hidden; position: relative;width: 100%;}
#bild-top2 img {margin-top: -60px;}

#box1, #box2, #box3, #box4, #box5 { width: 100%; margin: 40px auto; max-width: 800px; height: auto; text-align: center; line-height: 30px; }
#box6 { width: 100%; margin: 40px auto; max-width: 800px; height: auto; text-align: center; line-height: 30px; }
#box7 { background-color: #02202a; color:#fff; width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); padding: 30px 10px; font-size: 14px; text-align: center; }
#textbox7 { width: 100%; max-width: 750px; margin: 0 auto; line-height: 20px;}

.bild { width:100%; height: auto; }

hr.grenze { 
  border: 0; 
  height: 1px; 
  width: 80%;
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(0,0,0, 1), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(0,0,0, 1), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(0,0,0, 1), rgba(255,255,255,0));
  background-image: -o-linear-gradient(left, rgba(255,255,255,0), rgba(0,0,0, 1), rgba(255,255,255,0)); 
}

#box8 { background-color: cornsilk; width:100%; }
#boxkontakt { width:100%; margin-top: 80px;margin-bottom: 30px; font-size: 15px; max-width: 800px; margin: 0 auto;}
#boxbild { float: left; width: 50px; }
#boxtext { float: right; width: -webkit-calc(100% - 250px); width: -moz-calc(100% - 250px); width: calc(100% - 250px); max-width: 500px; margin-top: 70px;}
#boxbild img {width:250px;}

video { width:100%; height:auto;margin: 0 auto;}


@media only screen and (max-width: 900px) { #box0 { height: 400px; } }

@media only screen and (max-width: 820px) {
#box0 { height: 300px; }
#box1 {width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); margin: 20px 10px; }
h1 	{width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); margin: 20px 10px; }
}

@media only screen and (max-width: 500px) { #box0 { height: 300px; } body {font-size: 18px;} h1 {font-size: 44px;} .teaser { height: 120px; padding: 5vh 0 0 0; } .teaser2 { height: 120px; padding: 5vh 0 0 0; } 
#boxbild { float: none; width: 100%; margin: 0 auto; }
#boxtext { float: none; width: 100%; margin-top: 10px;}
}