/* maven-pro-regular - latin */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/css/fonts/maven-pro-v32-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/fonts/maven-pro-v32-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* maven-pro-500 - latin */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('/css/fonts/maven-pro-v32-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/fonts/maven-pro-v32-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* maven-pro-700 - latin */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/css/fonts/maven-pro-v32-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/fonts/maven-pro-v32-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* maven-pro-900 - latin */
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 900;
  src: local(''),
       url('/css/fonts/maven-pro-v32-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/fonts/maven-pro-v32-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


html {height:100%;}
body {background:#f4f4f4;font-family: 'Maven Pro', sans-serif;padding-top: 0px;padding-bottom: 20px;color: #4a4a4a;font-size: 1rem;overflow-y: auto;overflow-x: hidden;}


/*Menu*/
.navbar {z-index: 10000;padding: .5rem 1rem;}
.navbar-nav {width: 100%;z-index: 1000;}
.navbar-nav li {padding-left: 1rem;}
.navbar-nav a {color:#fff;font-size: 1.4em;}
.navbar-brand {z-index: 10000;}
header .fixed {height: 4rem;border-bottom:1px solid #8AC249;z-index:30000;background-color: #8AC249 !important;box-shadow: 0px 0px 16px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 16px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 16px rgba(0,0,0,0.2);}
header  .fixed .navbar-nav .nav-link {}
#top-bar {width:100%;height: 2rem;}
.fixed img {width: 50%;}
.fixed .logo-no {display:none;}
.fixed .logo-block {display:block;}
.logo-block {display:none;}
.navbar-dark .navbar-nav .nav-link {color: #fff;}
.navbar-dark .navbar-nav .grun a {color: #8AC249;}
.bg-dark {background-color: transparent !important;}


/*Allgemeine Element*/
.container-fluid {padding-right:0;padding-left:0;}
#main {margin-top: 0rem;margin-bottom: 0rem;}
.abstand {padding-top: 4rem;padding-bottom: 4rem;}
.abstand-gross {padding-top: 4rem;padding-bottom:4rem;}
.abstand-gross-big {padding-bottom: 8rem;padding-top:8rem;}
.abstand-gross-10 {padding-bottom: 4rem;padding-top:57rem;}
.container-full {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;width:100%;height:100%;display:table;}
.kisten-height {height: 30rem;}
.kisten-height-klein {height: 15rem;}
.webinfo {text-align: center;}
#button {position: absolute;bottom: 2px;}
.img-responsive {width: 100%;height: auto;}
.img-responsive-old  {width: 50%;height: auto;}
.img-responsive-icons {width:60%;}
.page-header {transform: skewY(0deg);padding-bottom: 9px;margin: 40px 0 20px;padding-top:79px;border-bottom: 0px solid #eee;}
.werbekasten ul {padding-left:10px;margin-left:15px;}
.infokasten  {text-align:center;overflow: hidden;}
.infokasten h3  {text-align:left;overflow: hidden;}
.infokasten .col-lg-4 h3  {text-align:center;overflow: hidden;}
.infokasten .col-md-4 h3  {text-align:center;overflow: hidden;}
.infokasten p  {color:#333;}
.infokasten .col-lg-4 {border: 1px solid #ccc;padding:20px;margin-right: 10px;margin-bottom: 10px;    -ms-flex: 0 0 33.333333%;flex: 0 0 32.333%;max-width: 32.333%;}
.carousel-item {height: 70vh;min-height: 200px;background: no-repeat center center scroll;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;}
.display-4 {font-size: 1.6rem;font-weight: 300;line-height: 1.2;}
.carousel-caption {position: absolute;right: 0;bottom: 233px;left: 180px;z-index: 10;padding:20px;color: #fff;text-align: center;background: #8ac249;width: 500px;box-shadow: 0px 0px 16px rgba(0,0,0,0.2);-moz-box-shadow: 0px 0px 16px rgba(0,0,0,0.2);-webkit-box-shadow: 0px 0px 16px rgba(0,0,0,0.2);}
#preis .btn-primary {color: #fff;background-color:#8AC249;border-color:#8AC249;}
:target:before {content:"";display:block;height:180px; /* fixed header height*/ margin:-180px 0 0; /* negative fixed header height */}
#display-360-block-mobi {display:none;}
#preis {display:none;}
.1diagonal-shapetr-to-bl {
  height: 0;
  border-style: solid;
  border-width: 100px 100vw 0 0;
  border-color: #8AC249 transparent transparent #8AC249;
    position: relative;
}

.1diagonal-shapetr-to-bl3 {
  height: 0;
  border-style: solid;
  border-width: 100px 100vw 0 0;
  border-color: #8AC249 transparent transparent #8AC249;
    position: absolute;
    top: 0;
    z-index: 10000;
}

.1diagonal-shapetr-to-bl4 {
  height: 0;
  border-style: solid;
  border-width: 100px 100vw 0 0;
  border-color: #000000 transparent transparent #000000;
    position: relative;
}

.1diagonal-shapetr-to-bl2 {
  height: 0;
  border-style: solid;
border-width: 100px 0 0 100vw;
  border-color:#8AC249 #8AC249 transparent transparent;
  position: relative;
}

video {object-fit: fill;}


/*Preise*/
.card-title {margin-bottom: .75rem;font-size: 1.5rem;}
.list-unstyled li {padding-bottom:10px;}
.list-unstyled li::after {}

/*Work*/
#arbeiten h3 {color:#8AC249;}
#arbeiten li {list-style-type: none;}
#arbeiten .arbeiten-bild {box-shadow: 0px 0px 16px rgba(0,0,0,0.2);-moz-box-shadow: 0px 0px 16px rgba(0,0,0,0.2);-webkit-box-shadow: 0px 0px 16px rgba(0,0,0,0.2);}
#arbeiten .arbeiten-bild-old {text-align:center;box-shadow: 0px 0px 16px rgba(0,0,0,0.2);-moz-box-shadow: 0px 0px 16px rgba(0,0,0,0.2);-webkit-box-shadow: 0px 0px 16px rgba(0,0,0,0.2);}
.arbeiten-info {padding-top: 30px;}


/*Startseit*/
.page-header {border-bottom: 0px solid #eee;animation-duration: 2s;}
.pfeil {color: #fff;animation-duration: 2s;font-size:50px;height: 150px;position: relative;}
.pfeil-2 {color: #fff;animation-duration: 2s;font-size:22px;height: 100px;position: relative;}
 #particles {width: 100%;height: 100%;overflow: hidden;}
 .jumbotron {padding:0;margin: 0;height:0;border-radius: 0rem;position: relative;}
.jumbotron-2 {border-radius: 0rem;height:100vh;width:100%;position: absolute;top: 0px;background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);transform: skewY(-0deg);}
.jumbotron-unterseite {padding:0;margin: 0;height:28rem;border-radius: 0rem;}


/*Schriften*/
.color-weiss {color: #fff;}
.color-blau {color:#8AC249;}
.color-headliner {color:#8AC249;padding-top:20px;}
h2 {font-size: 2.2rem;}
h3 {font-size: 1.5rem;}
h4 {font-size: 1.5rem;}
#datenschutz h3  {font-size:1rem;font-weight: bolder;color: #8AC249;}


/*Partner*/
#partner img {width:100%;}
#partner .mitte {padding-left:30px;padding-right:30px;}
#partner .info-link {padding-top:20px;display: block;}

.werbekasten  {text-align: center;}
.werbekasten .col-md-3 {text-align: center;margin-bottom:40px;}
.werbekasten a {padding-top:20px;display: block;line-height: 70px;font-weight: bold;font-size:1.1rem;}
.werbekasten img {border-radius:140px;width:100%;height:auto;}

/*Kontakt*/
#kontaktform #anliegen_text {border: 1px solid #ccc;font-size: 1.2em;height: 333px;width: 100%;}
.kontaktform ul {padding:0px;list-style: none;}
.kontaktinfo {background:#e2e2e2;margin-top:91px;}
#kontaktform #anliegen {border: 1px solid #ccc;font-size: 1em;margin-bottom: 10px;width: 100%;}
#kontaktform .sendcontainer input {font-size: 1em;border: 1px solid #ccc;margin-bottom: 10px;width: 100%;}
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button;cursor: pointer;background: #ccc;border: 0;padding: 10px;margin-right: 10px;font-weight: 700;}

/*Hintergrund*/
.bg {background:#000;color: #fff;}
.bg0 {background:#f4f4f4;}
.bg1 {background: url(/img/test4.jpg);background-size:cover;background-position: center;height: 400px;}
.bg2 {background: url(/img/css.jpg);background-size:cover;background-position: center;height: 400px;}
.bg3 {background: url(/img/close-up-code-coding-160107.jpg);background-size:cover;background-position: center;height: 400px;}
.bg4 {background: url(/img/test2.jpg);background-size:cover;background-position: center;height: 400px;background-attachment: fixed;}
.bg-kasten-1 {background: url(/img/abstract-business-code-270348-old.jpg);background-size:cover;background-position: center;}
.bg-blau {background: #3969D7;color: #fff;}


/*Hover*/
a {-webkit-transition: color 500ms; -moz-transition: color 500ms; -o-transition: color 500ms; transition: color 500ms;}
a:active {color:#8AC249;text-decoration: none;}
a:link {color:#8AC249; text-decoration: none;}
a:focus {color:#8AC249; text-decoration: none;}
a:visited {color:#8AC249; text-decoration: none;}
a:hover {color: #4f4f4f; -webkit-transition: color 2s ease-out; -moz-transition: color 2s ease-out; -o-transition: color 2s ease-out; transition: color 2s ease-out; text-decoration: none;}
.footer a:hover {color: #fff;text-decoration: underline;}
.navbar a:hover {text-decoration: underline;}
#start #menustart, #leistung #menuleistung, #ref #menuref, #kontakt #menukontakt, #netz #netzwerk {font-weight: 600;text-decoration: none;color:#3867d6 !important;}
.sendbutton input:hover {background:#000;color:#fff;}
.banner-mobi, .banner-mobi2, .banner-mobi3 {display: none;}
.webinfo a {color:#8AC249;}
#main .wetter a:hover {color: #fff;text-decoration: underline;}
.navbar-nav .current  {text-decoration: underline;}

/*Footer*/
footer {color:#fff;font-size:16px;font-weight:300;}
footer p {margin-bottom: 0rem;}
.footer  {width:100%;position: absolute;background: #212121;}
.footer a {color: #fff !important;display: block; -webkit-transition: color 500ms; -moz-transition: color 500ms; -o-transition: color 500ms; transition: color 500ms;}
footer h3 {color:#fff;font-weight:300;}
.color-footer {background: #212121;padding-top: 4rem;padding-bottom: 4rem;}

#granim-canvas {position: absolute;width: 100%;height: 100%;background-size: cover;background-position: 0 85%;}


@media screen and (max-width: 1280px) {
.card-deck .card {display: -ms-flexbox;display: flex;-ms-flex: unset;flex: unset;flex-grow: 1;}
}

@media screen and (max-width: 990px) {
#button {position: absolute;bottom: 116px;}
.carousel-item {height: auto;}
.infokasten .col-lg-4 {flex: 0 0 100%;max-width: 100%;}
.container {max-width: 100%;}
.webinfo .col-md-2 {margin-bottom: 2rem;}
.infokasten	.col-lg-4 {margin-bottom: 0rem;}
.infokasten  {text-align:center;padding-top: 2rem !important;overflow: hidden;}
.infokasten img {width:40%;}
.navbar img {width: 100%;}
.navbar-brand {z-index: 1000;width: 250px;}
.diagonal-shapetr-to-bl2 {height: 0;border-style: solid;border-width: 50px 0 0 100vw;border-color: #8AC249 #8AC249 transparent transparent;position: relative;}
.mobi-header {width: 100% !important;margin-top: 0px !important;text-align: center !important;padding-left: 15px;padding-right:15px;}
.mobi-header h2 {font-size: 1.5rem;}
h3 {font-size: 1.4rem;}
.abstand {padding-top: 0rem;padding-bottom: 0rem;}
.abstand-gross-big {padding-bottom: 0rem;padding-top: 0rem;}
.abstand-gross {padding-top: 0rem;padding-bottom: 0rem;}
.jumbotron {padding: 0;margin: 0;margin-bottom: 0px;height: 0rem;border-radius: 0rem;}
.abstand-gross-10 {padding-bottom: 0rem;padding-top: 42rem;}
.page-header {padding-top: 110px;}
.page-header h2 {font-size: 1.5rem !important;}
.jumbotron-unterseite {padding:0;margin: 0;height:20rem;border-radius: 0rem;}
img {width:100%;}
.diagonal-shapetr-to-bl3 {display: none;}
.bg1 {display:none;}
.bg2 {display:none;}
.bg3 {display:none;}
p {margin-top: 0;margin-bottom: 0.90rem;}
footer .col-lg-3 {margin-bottom: 1rem;}
footer h3 {border-bottom: 1px solid #4d4d4d;padding-bottom: 9px;}
#arbeiten ul {padding-left:0px;}
.diagonal-shapetr-to-bl4 {height: 0;border-style: solid;border-width: 50px 100vw 0 0;border-color: #000000 transparent transparent #000000;position: relative;}
.navbar-dark .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
#collapsibleNavbar ul {background: #8AC249;position: absolute;left: 0;}
.navbar-collapse {position: absolute;top: 54px;left: 0;padding-left: 15px;padding-right: 15px;padding-bottom: 15px;width: 100%;}
.navbar-collapse.collapsing {height: auto;-webkit-transition: left 0.3s ease;-o-transition: left 0.3s ease; -moz-transition: left 0.3s ease;transition: left 0.3s ease;left: -100%;}
.navbar-collapse.show {left: 0;-webkit-transition: left 0.3s ease-in;-o-transition: left 0.3s ease-in;-moz-transition: left 0.3s ease-in;transition: left 0.3s ease-in;}
.wetter {top: 21px !important;right: 15px;position: absolute;z-index: 10000;}
#main {margin-top: 0rem;margin-bottom: 0rem;}
.container {padding-top: 16px;}
.color-footer {background: #212121;padding-top: 0rem;padding-bottom: 0rem;}
.carousel-caption {position: absolute;right: 0;bottom: 0;left: 0;z-index: 10;padding-top: 8px;padding-bottom: 0px;color: #fff;text-align: center;background: #8ac249;width: 100%;box-shadow: 0px 0px 16px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 16px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 16px rgba(0,0,0,0.2);}
.display-4 {font-size: 1.5rem;font-weight: 300;line-height: 1.2;}
.container, .container-full {padding-top: 30px;padding-bottom: 30px;}
#partner .col-md-4 {padding-top: 30px;padding-bottom: 30px;}
.kontaktinfo {background: #e2e2e2;margin-top: 30px;}
.display-360-block-mobi-no {display:none;}
#display-360-block-mobi {display:block;}
.card-deck .card {display: -ms-flexbox;display: flex;-ms-flex: unset;flex: unset;flex-grow: 1;}
.display-4 {font-size: 1.2rem;font-weight: 300;line-height: 1.2;}
.jumbotron-2 {height:49rem;}
#kontakt .col-lg-5 {margin-top:20px;}
}


@media screen and (max-width: 680px) {
.navbar-brand {z-index: 1000;width: 210px;}
.pfeil {display:none;}
}


@media screen and (max-width: 360px) {
.navbar-brand {z-index: 1000;width: 195px;}
}