html{width: 100vw;}
body {overflow: hidden;font-family:'Calibri Regular', sans-serif;background: #575656;padding-top: 0px;padding-bottom: 20px;color: #fff;font-size: 1rem;overflow-y: auto;overflow-x: hidden;}

/*Menu*/
nav {padding-bottom: 20px;}
header {margin-top: 90px;}
.navbar {z-index: 1000;padding: 0;}
.navbar-brand {width: 13%; margin: 0 auto;display: block;}
.navbar-brand img {width: 100%;height: auto;}
.bg-dark {background-color: transparent !important;}
#main .menu li {padding-right:4px;padding-left:3px;}
.menu li {padding-right:4px;padding-left:3px;}

/*Allgemeine Element*/
.container {padding-left:0px;padding-right:0;color: #575656;max-width: 1300px;}
.col-lg-3 {-ms-flex: 0 0 12.4900;flex: 0 0 12.4900%;max-width: 20%;}
.slogan-text {white-space: nowrap;font-size: 1.1em;letter-spacing: 30.6px;width: 101%;;text-align: center;text-transform: uppercase;padding-top: 20px;padding-bottom:20px;margin-bottom:0;}
.slogan-text-2 {font-size: 1.1em;letter-spacing: 20.5px;width: 102.1%;text-align: center;text-transform: uppercase;padding-top: 20px;padding-bottom:20px;margin-bottom:0;}
.border-links-rechts {border-left: 1px solid #fff;border-right: 1px solid #fff;padding-left:6px;padding-right:6px;}
.unterseite {padding-top: 40px;padding-bottom: 40px;}


/*Work*/
.arbeiten {background: #ececec;padding-left: 13px;padding-right: 13px;padding-top:15px;padding-bottom:15px;cursor:pointer;}
.arbeiten ul {padding: 0;margin:0;}
.arbeiten li {list-style-type: none;padding-left:15px;padding-right:15px;padding-top:15px;padding-bottom:15px;}
.arbeiten a:hover {opacity:0.8;}
.neu-overflow {height:505px; overflow-y: scroll;}
.mobi-on {display:none;}

/* scrollbar width */
.neu-overflow::-webkit-scrollbar {
  width: 5px;
}

/* scrollbar track */
.neu-overflow::-webkit-scrollbar-track {
  background: #eee;
}

/* scrollbar handle */
.neu-overflow::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background-color: #00d2ff;
  background-image: linear-gradient(to top, #00d2ff 0%, #3a7bd5 100%);
}

/*Startseit*/
.infokasten {color: #fff;font-weight:400;font-size:0.98em;padding-top: 10px;padding-bottom:10px;}
.infokasten ul {padding: 0;margin:0;}
.infokasten li {list-style-type: none;padding-right:69px;text-transform: uppercase;color: #fff;}
.infokasten .one {padding-left:0px;}
.infokasten .last {padding-right:0px;}
.infokasten img {margin-right: 10px;margin-bottom: 5px;}

/*Schriften*/
h1 {margin-bottom: 0;}
h2 {font-size: 1em;}
h3 {font-size: 1em;}
h4 {font-size: 1.2em;color:#d6095b;font-weight:bold;}
.weiss {color: #fff;}
.orange {color:#F07D00;}

/*Test*/
.grid {position: relative;display: block;}
.grid img {width:130px;height:130px;}
.grid:after {content: '';display: block;clear: both;}
/* ---- grid-item ---- */
.grid-item {width: 12.440%;float: left;display: block;position: relative;}
.hochformat {height:288px;}
.querformat {width:287px;}
.kiste {width:287px;}

.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}
.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;          
line-height: -0.1em;
}
.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}

/*Kontakt*/
#kontaktform #anliegen_text {border: 1px solid #ccc;font-size: 1.2em;height: 200px;width: 100%;}
.kontakt 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;}

/*Hintergrund*/
.bg {background:#fff;}
.bg2 {background: #d6095b;}


/*Hover*/
a {-webkit-transition: color 500ms; -moz-transition: color 500ms; -o-transition: color 500ms; transition: color 500ms;}
.arbeiten a {-webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms;}
a:active {color:#d6095b;text-decoration: none;}
a:link {color:#d6095b; text-decoration: none;}
a:focus {color:#d6095b; text-decoration: none;}
a:visited {color:#d6095b; text-decoration: none;}
a:hover {color: #575656; -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;}
#main .menu a {color:#fff;}
#main .menu a:hover {text-decoration: underline;}

/*Footer*/
footer {color:#fff;font-size:0.8em;font-weight:300;padding-top: 30px;padding-left: 29px;}
.copy {padding-left:0px;}
.flaggen {padding-right:31px;}
.flagge-deutsch {padding-right: 6px;}

@media screen and (max-width: 8000px) {
.neu-overflow {height:auto; overflow-y: scroll;}
.container {padding-left:0px;padding-right:0;color: #575656;max-width: 2150px;}
.slogan-text {white-space: nowrap;font-size: 1.1em;letter-spacing: 56px;width: 103%;text-align: center;text-transform: uppercase;padding-top: 20px;padding-bottom: 20px;margin-bottom: 0;}
.slogan-text-2 {font-size: 1.1em;letter-spacing: 40px;width: 102.1%;text-align: center;text-transform: uppercase;padding-top: 20px;padding-bottom: 20px;margin-bottom: 0;}
.grid {margin-left: 25px !important;}
.grid img {width:200px;height:200px;}
.grid-item {width: 12.500%;float: left;}
.hochformat {height:430px !important;}
.querformat {width:462px !important;}
.kiste {width:462px !important;height: 430px !important;}
}

@media screen and (max-width: 2000px) {
.hochformat {height:288px !important;}
.kiste {width:287px !important;height: 287px !important;}
.querformat {width:287px !important;}
.grid img {width:130px;height:130px;}
.grid-item {width: 12.440%;float: left;}
.slogan-text {white-space: nowrap;font-size: 1.1em;letter-spacing: 30.6px;width: 101%;text-align: center;text-transform: uppercase;padding-top: 20px;padding-bottom: 20px;margin-bottom: 0;}
.slogan-text-2 {font-size: 1.1em;letter-spacing: 20.5px;width: 102.1%;text-align: center;text-transform: uppercase;padding-top: 20px;padding-bottom: 20px;margin-bottom: 0;}
.neu-overflow {height:505px; overflow-y: scroll;}
.container {padding-left:0px;padding-right:0;color: #575656;max-width: 1300px;}
}

@media screen and (max-width: 1500px) {
.infokasten li {list-style-type: none;text-transform: uppercase;}
}

@media screen and (max-width: 1440px) {
.infokasten {padding-right: 10px;padding-left:10px;}
.unterseite {padding-right: 10px;padding-left:10px;}
.slogan-text {white-space: normal;padding-right: 10px;padding-left:10px;font-size: 1em;letter-spacing: 20px;width: 102.5%;text-align: center;text-transform: uppercase;padding-top: 20px;padding-bottom: 20px; margin-bottom: 0;}
.infokasten li {list-style-type: none;text-transform: uppercase;}
}

@media screen and (max-width: 1300px) {
.infokasten {padding-right: 10px;padding-left:10px;}
.infokasten li {list-style-type: none;padding-right: 96px;}
.unterseite {padding-right: 10px;padding-left:10px;}
.container {max-width: auto;}
}

@media screen and (max-width: 1280px) {
.menu a {display:block;}
.mobi-icon {float: left;width:35px;}
.infokasten {}
.infokasten img {}
.unterseite {padding-right: 10px;padding-left:10px;}
.infokasten li {list-style-type: none;padding-right: 20px;padding-left:0;}
.slogan-text {white-space: normal;padding-right: 10px;padding-left:10px;font-size: 1em;letter-spacing: 20px;width: 102.5%;text-align: center;text-transform: uppercase;padding-top: 20px;padding-bottom: 20px; margin-bottom: 0;}
.slogan-text-2 {padding-right: 10px;padding-left:10px;font-size: 1em;letter-spacing: 8px;width: 102.5%;text-align: center;text-transform: uppercase;padding-top: 20px;padding-bottom: 20px; margin-bottom: 0;}
.grid img {width:100%;height:auto;}
header {margin-top: 50px;}
.grid {margin-left: 10px !important;}
.kiste {width: 100% !important;}
.querformat {width: 100% !important;}
.grid-item {width: 24.555% !important;float: left;}
.hochformat {height: 400px !important;}
}

@media screen and (max-width: 1024px) {
.container {padding-left:0px;padding-right:0;max-width: 100%;}
.col-lg-3 {-ms-flex: 0 0 20%;flex: 0 0 61%; max-width: 33.333%;}
.neu-overflow {height:auto; overflow: hidden !important;}
#content-5 {height:auto; overflow: auto !important;padding:0 !important;}
.infokasten .row {display:block;}
.infokasten  {padding-top:20px;text-align:center;}
.infokasten li {padding-bottom:8px;}
.mobi-icon {float:none;}
.copy {padding-left: 5px;}
.mobi-dis {display:none;}
.mobi-on {display:block;}
.querformat, .kiste {width: 50% !important;}
.grid-item {width: 24.555% !important;float: left;}
.hochformat {height: 420px !important;}
.kiste {width: 100% !important;height:auto !important;}
}

@media screen and (max-width: 960px) {
.menu a {display:block;}
.infokasten {padding-right: 10px;padding-left:10px;}
.infokasten img {}
.infokasten li {list-style-type: none;padding-right: 0px;padding-left:5px;}
.grid-item {width: 25% !important;float: left;}
.querformat {width: 80% !important;}
.kiste {width: 100% !important;height:auto !important;}
.grid {margin-left: 0px !important;}
}

@media screen and (max-width: 768px) {
.mobi-icon {float:none;}
.navbar-brand {width: 80%;margin: 0 auto;display: block;}
.infokasten li {list-style-type: none;padding-right: 0px;padding-left:0;text-align: center;}
.infokasten {padding-right: 10px;padding-left:10px;}
.menu {text-align:center;}
#main .mobi-abstand {padding-right: 37px;}
.border-links-rechts {border-left: 0px solid #fff;border-right: 0px solid #fff;padding-left:0px;padding-right:0px;}
.grid-item {width: 50% !important;float: left;}
.querformat {width: 100% !important;}
.kiste {width: 100% !important;height:auto !important;}
.hochformat {height: 600px !important;}
}

@media screen and (max-width: 575px) {
#main .mobi-abstand {padding-right: 37px;}
.mobi-icon {float:none;}
header {margin-top: 10px;}
.navbar-brand {width: 80%;margin: 0 auto;display: block;}
.infokasten li {list-style-type: none;padding-right: 0px;padding-left:0;text-align: center;}
.infokasten {padding-right: 10px;padding-left:10px;max-width:200px;}
.menu {text-align:center;}
.unterseite {padding-right: 10px;padding-left:10px;}
.slogan-text {padding-right: 10px;padding-left:10px;font-size: 1em;letter-spacing: 8px;width: 102.5%;text-align: center;text-transform: uppercase;padding-top: 20px;padding-bottom: 20px; margin-bottom: 0;}
.slogan-text-2 {padding-right: 10px;padding-left:10px;font-size: 1em;letter-spacing: 8px;width: 102.5%;text-align: center;text-transform: uppercase;padding-top: 20px;padding-bottom: 20px; margin-bottom: 0;}
.col-lg-3 {-ms-flex: 0 0 20%;flex: 0 0 100%;max-width: 100%;}
.img-fluid {max-width: 100%;width:100%;height: auto;}
.grid-item {width: 100% !important;float: left;}
.hochformat {height: 600px !important;}
.querformat {width: 100% !important;}
}