@import url(animate.min.css);
@import url(https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700);

html {height:100%;}
body {font-family: 'Hind', sans-serif;padding-top: 90px;padding-bottom: 20px;font-size: 16px;line-height: 1.62857143;color: #4c4c4c;}

/*header*/
nav {animation-duration: 2s;}
.navbar {min-height:90px;}
.navbar-inverse {background: #fff;border: 0px;}
.navbar-brand img {height:auto;width:100%;}
.navbar-brand {width:250px;loat:none;margin:0px !important;padding-top:16px;padding-left:0px;animation-duration: 10s; }
.navbar-header h1 {width:250px;margin:0px !important;padding:0px;}
.nav {font-size:18px;padding-top:16px;}
.container .nav a {color:#4c4c4c !important;font-weight: 600;}
.navbar-fixed-top {position: absolute;right: 0;left: 0;z-index: 1030;}
.navbar-toggle {background: #3867d6;}
.fixed {position: fixed;border-bottom:2px solid #3867d6;}
.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a {text-shadow: 0 0 0 rgba(0,0,0,0);font-weight: 400;font-size:18px;color:#4c4c4c !important;}
.navbar-toggle {position: relative;float: right;padding: 10px 7px;margin-top: 24px;margin-right: 24px;margin-bottom: 8px;background-image: none;border: 0px solid transparent;border-top-color: transparent;border-right-color: transparent;border-bottom-color: transparent;border-left-color: transparent;border-radius: 91px;width: 35px;}
.container-full {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;width:100%;height:100%;display:table;}
.top .text-right {text-align: right;}
.top  {background: #2B0059;color: #fff;}
.top-no  {display:none;}
.navbar .top a {color: #fff;}


/*Slider*/
#textSlider.row {
width: 60%;
margin: 0 auto;
}
#textSlider div {
	color: #FFF;

}

.iamCol {

}
.iamCol p:nth-child(2) { margin-top: -20pt !important; }
.slideCol {
    overflow: hidden;
	font-weight: 900;
	display: block;
	white-space: nowrap;
	font-size:22pt;
	margin-top: 20px;
}
.slideCol p { margin: 0px !important; }

.scroller {
   height: 70pt;
   line-height: 70pt;
   overflow: hidden;
}
.scroller .inner { animation: 10s normal infinite running scroll; }
@keyframes scroll {
   0%  	{margin-top: 0px;}
   15% 	{margin-top: 0px;}

   25%  {margin-top: -70pt;}
   40%  {margin-top: -70pt;}
   
   50%  {margin-top: -140pt;}
   65%  {margin-top: -140pt;}

   75%  {margin-top: -210pt;}
   90%  {margin-top: -210pt;}

   100% {margin-top: 0px;}
}



/*Elemente Allgemein*/
.abstand {margin-top:50px;}
.abstand-gross {margin-top:100px;margin-bottom:100px;}
.abstand-innen-gross {padding-top:100px;padding-bottom:100px;}
#start .page-header h2 {font-size: 80px;}
#start h1 small, #start .h1 small, #start h2 small, #start .h2 small, #start h3 small, #start .h3 small, #start h1 .small, #start .h1 .small, #start h2 .small, #start .h2 .small, #start h3 .small, #start .h3 .small {font-size: 48%;color: #fff;}
.page-header {border-bottom: 0px solid #eee;animation-duration: 2s;}
.pfeil {animation-duration: 2s;font-size:22px;}
.referenz-start {color:#fff;font-size:22px;padding-top:50px;font-weight:600;}
.referenz-start a {color:#6d2dc7 !important;}
.btn-primary {
    background-image: -webkit-linear-gradient(top,#ccc 0,#ccc 100%);
    background-image: -o-linear-gradient(top,#ccc 0,#ccc 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ccc),to(#ccc));
    background-image: linear-gradient(to bottom,#ccc 0,#ccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#ccc', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #ccc;
}
.btn {
    font-size: 20px;
    margin-top: 30px;
}
.btn-primary:focus, .btn-primary:hover {
    background-color: #265a88;
    background-position: 0 0px;
}
.btn-primary:hover {
    color: #000;
    background-color: #286090;
    border-color: #204d74;
}

/*Startseite*/
.jumbotron p {margin-bottom: 15px;font-size: 16px;font-weight: 200;}
.jumbo {margin-bottom: 15px;font-size: 22px;font-weight: 500;}
.slider {height:auto;width:100%;position:relative;}
.slider img {height:auto;width:100%;}
.slider .container {position:absolute;top:120px;width:auto;}
.slider .container .slider-infobox {padding: 17px 10px 12px 10px;margin:10px;background:#fff;font-size:25px;font-weight:900;animation-duration: 2s;line-height: 20px}
.infokasten {text-align:center;color:#fff;}
.center {width: 60%;margin: 0 auto;color: #fff;float: right;}
.center-full {width: 90%;margin: 0 auto;color: #fff;padding-top:40px;}
.vcenter {position: relative;top: 100px;}
.infokasten h2 {color:#fff;}
.infokasten .color-headliner {color:#fff;font-weight: 600;font-size: 16px;}
.infokasten img {text-align:center;margin: 0 auto;}
.werbekasten p {padding-bottom:10px;}
.werbekasten img {padding-bottom:30px;}
#button {color:#fff;}
h3 {font-size: 27px;}
h2 {font-size: 27px;}



.bg-start {height: 100vh;background: #3867d5;}

.bg5 {background: url(/img/abstract-business-code-270348-old.jpg);background-size:cover;background-position: center top;background-attachment: fixed;}
.info-bg2 {background: url(/img/blogging-blur-communication-261662.jpg);background-size:cover;background-position: center;}
.info-bg1 {background: url(/img/abstract-business-code-270348.jpg);background-size:cover;background-position: center top;}
.info-bg0 {background: url(/img/ipad-responsive-webseite.jpg);background-size:cover;background-position: center;}

.info-bg-zeit {background: url(/img/zeit.jpg);background-size:cover;background-position: left top;}
.info-bg-meyer {background: url(/img/meyer.jpg);background-size:cover;background-position: left top;}

.info-bg-deininger {background: url(/img/deininger.jpg);background-size:cover;background-position: left top;}
.info-bg-gruen {background: url(/img/purpurgruendesign.jpg);background-size:cover;background-position: left top;}

.info-text-startseite {background:#3867d5;color:#fff;padding-top: 20px;padding-bottom: 20px;}
.info-text-leistung-weiss {background:#3867d5;color:#fff;padding-top: 20px;padding-bottom: 20px;}

.info-text-leistung-weiss h3 {color:#fff;}
.info-text-leistung-weiss p {padding-bottom: 30px;}
.infokasten2 {text-align: center;vertical-align: middle;position: relative;z-index: 20000;top:50vh;}
.infokasten2 h2 {color: #fff;font-size:25px;}
.bg {
text-align:center; 
background: radial-gradient(left top , ellipse cover , rgb(113, 41, 201) , rgb(15, 159, 139) 75%);
background: -o-radial-gradient(left top , ellipse cover , rgb(113, 41, 201) , rgb(15, 159, 139) 75%);
background: -ms-radial-gradient(left top , ellipse cover , rgb(113, 41, 201) , rgb(15, 159, 139) 75%);
background: -moz-radial-gradient(left top , ellipse cover , rgb(113, 41, 201) , rgb(15, 159, 139) 75%);
background: -webkit-radial-gradient(left top , ellipse cover , rgb(113, 41, 201) , rgb(15, 159, 139) 75%);
position: absolute;right: 0;bottom: 0;top:0;right:0;width: 100%;height: 100%;background-size: 100% 100%;opacity: 0.10;object-fit: cover;
}
video{position: absolute;right: 0;bottom: 0;top:0;right:0;width: 100%;height: 100%;background-size: 100% 100%;background-color: #fff;background-position: center center;background-size: contain;object-fit: cover;}

/*Leistung*/
.infoleistung {background:#e2e2e2;margin-top:0px;font-size:16px;}

/*Referenzen*/
.element-item {position: relative;float: left;width: 33%;height: auto;padding: 0px;}
.element-item img {height: auto;width: 100%;}
#arbeiten  {max-width:944px;margin: 0 auto;}
#arbeiten ul {padding:0px;}
#arbeiten li {padding-bottom: 40px;list-style: 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-info {margin-top: 50px;font-size: 1em;font-weight: 400;margin-left: 0px;width: auto;}
#arbeiten .arbeiten-info p {white-space: nowrap;}
#arbeiten .arbeiten-info .link {margin-top: 20px;}

/*webinfo*/
.webinfo {padding-top:50px;height: 231px;width:100%;margin: 0 auto;text-align: center;}
.webinfo i {padding-right: 62px;}

/*Kontakt*/
#kontaktform #anliegen_text {border: 1px solid #ccc;font-size: 1.2em;height: 435px;width: 100%;}
.kontaktform ul {padding:0px;list-style: none;}
.kontaktinfo {background:#e2e2e2;margin-top:91px;font-size:14px;}
#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;}


/*360*/
.info360 {text-align:center;margin-bottom:60px;}
.info360 .color-headliner {font-weight: 600;font-size: 16px;}
.info360 img {text-align:center;margin: 0 auto;height:auto;width:80%;}



/*Farben*/
.color-headliner {color:#3867d6;}
.color-pink {background:#3867d6;padding:20px;padding-bottom:30px;color:#fff;}


/*Footer*/
footer {color:#fff;font-size:17px;font-weight:300;}
.footer  {width:100%;position: absolute;}
.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-size:25px;font-weight:300;}
.color-footer {background:#333;padding-top: 20px;padding-bottom: 20px;}
.colphone {font-size:13px;}

/*Hover*/
a {-webkit-transition: color 500ms; -moz-transition: color 500ms; -o-transition: color 500ms; transition: color 500ms;}
a:active {color: #3867d6;text-decoration: none;}
a:link {color: #3867d6; text-decoration: none;}
a:focus {color: #3867d6; text-decoration: none;}
a:visited {color: #3867d6; 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: none;}
.container .nav a:hover {color: #3867d6 !important; -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;}
#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;}

@media (min-width: 1024px) {
.row.equal {display: flex;flex-wrap: wrap;min-height: 450px;}
}

@media screen and (max-width: 1200px) {
.slider .container .slider-infobox {display:none;}
.kontaktinfo {padding-top: 1px;padding-bottom: 1px;}
.infoleistung {padding-top: 1px;padding-bottom: 1px;}
.webinfo  {line-height: 112px;}
.webinfo i {padding-right: 14px;}
}

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

@media screen and (max-width: 990px) {
.info-bg2, .info-bg1, .info-bg0 {display:none;}
.vcenter {position: initial;}
.info-text-startseite {padding-top:20px;padding-bottom:20px;}
.info-text-leistung-weiss {padding-top:20px;padding-bottom:20px;}
.mobi-banner {height:300px;display:block;background: url(/img/close-up-code-coding-160107.jpg);background-size:cover;background-position: center;}
.mobi-banner2 {height:300px;display:block;background: url(/img/close-up-code-coding-160107.jpg);background-size:cover;background-position: center;}
.mobi-banner3 {height:300px;display:block;background: url(/img/abstract-business-code-270348.jpg);background-size:cover;background-position: center;}
#start .page-header h2 {font-size: 33px;}
.page-header2 h2 {font-size: 25px;width: 280px;margin-left: 20px;}
.abstand-gross {margin-top: 45px;margin-bottom: 38px;}
.infokasten2 {top: 30vh;}
.infokasten2 {text-align: center;vertical-align: middle;position: relative;z-index: initial;}
.navbar-brand {padding-top: 13px;}
#start #menustart, #leistung #menuleistung, #ref #menuref, #kontakt #menukontakt {font-weight: 400;text-decoration: none;color:#fff !important;text-decoration: underline;}
.navbar-inverse .navbar-nav > li > a {
  text-shadow: 0 0 0 rgba(0,0,0,0);
  font-weight: 400;
  font-size: 18px;
  color: #fff !important;
}
.center {width: auto;margin: 0 auto;color: #fff;float: none;}
.navbar-inverse .navbar-nav > li > a {font-size:17px;}
.nav > li > a {padding: 10px 12px;padding-top: 15px;}
}

@media screen and (max-width: 767px) {
.navbar-inverse .navbar-collapse a, .navbar-inverse .navbar-form a {font-weight: 700 !important;color: #fff !important;padding:20px;font-size: 30px;}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {max-height:100vh;}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: #101010;height: 100vh;opacity: 1;text-align: center;
background: radial-gradient(left top , ellipse cover , rgb(113, 41, 201) , rgb(15, 159, 139) 75%);
background: -o-radial-gradient(left top , ellipse cover , rgb(113, 41, 201) , rgb(15, 159, 139) 75%);
background: -ms-radial-gradient(left top , ellipse cover , rgb(113, 41, 201) , rgb(15, 159, 139) 75%);
background: -moz-radial-gradient(left top , ellipse cover , rgb(113, 41, 201) , rgb(15, 159, 139) 75%);
background: -webkit-radial-gradient(left top , ellipse cover , rgb(113, 41, 201) , rgb(15, 159, 139) 75%);
color:#fff;vertical-align: middle;position: fixed;width: 100%;z-index:30000;top: 90px;
}
}

@media screen and (max-width: 740px) {
.navbar-header h1 {padding-left: 15px;}
}