* {
    font-family: 'Titillium Web';
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

.pulse {


    box-shadow: 0 0 0 rgb(234, 115, 56);
  animation: pulse 4s infinite;
}
.pulse:hover {
  animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

body {
    max-width: 1920px;
    width: 100%;
    background-image: linear-gradient(white 80%, #d6d6d675 121%);
    margin: 0px auto;
    height: 100vh;

    margin-top: 25px;
    font-size: 21px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}




a:-webkit-any-link {
    color: white;
    cursor: pointer;
    text-decoration: none;
}

#menupos {
    position: fixed;
    margin: 0px auto;
    text-align: center;
    color: red;
}

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 1s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

    /* When you mouse over the navigation links, change their color */
    .overlay a:hover, .overlay a:focus {
        color: #ef8816;
    }

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {
        font-size: 20px;
    }

    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

.btn {
    background-color: transparent;
    border: none;
    color: #ea7338;
    padding: 16px;
    width: 100%;
    max-width: 165px;
    text-align: center;
    margin: 4px 2px;
    transition: 0.8s;
          position: fixed;
}

    .btn:hover {
        background-color: #ef8816;
    }

#headtext {
    width: 100%;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    justify-content: space-between;
}

#headtext1 {
            -ms-flex: 1 1 100px;
        flex: 1 1 100px;
}

#headtext2 {
            -ms-flex: 1 1 100px;
        flex: 1 1 100px;
}

#headtext3 {
            -ms-flex: 1 1 100px;
        flex: 1 1 100px;
}

#divWrapper1 {
height: 100vh;
width: 100%;
}

#divWrapper2 {
border-bottom: solid 20px #ea7338;
    background-image: linear-gradient(#212121 20%, #333333 55%);
}

#divWrapper3 {
border-bottom: solid 20px #ea7338;
    background-color: #ea7338;
    min-height: 420px;
}

#mainmenu {
    display: flex;
    flex-wrap: row nowrap;
    justify-content: space-between;
    max-width: 1920px;
    width: 100%;
    position: fixed;
    top: 1px;
    margin: 0px auto;
    background-color: #ffffff;
    padding: 10px;
     -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.flexitem1 {
    flex-grow: <1>;
    justify-content: flex-start;
}

.flexitem2 {
    flex-grow: <1>;
    justify-content: center;
}

.flexitem3 {
    flex-grow: <1>;
    justify-content: flex-end;
        display: flex;
}




.tmp {
    width: 100%;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    justify-content: space-between;
}

    .tmp div {
        -ms-flex: 1 1 100px;
        flex: 1 1 100px;
    }

        .tmp div button {
            width: 100%;
        }

    .tmp > *:nth-child(odd) button {
        background-color: red;
    }






.btn2 {
  background-color: #ef8816;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
      align-self: center;
}

.btn2:hover {opacity: 1}

#sidebar-wrapper1 {
text-align: center;
}

#farbbalken {
    width: 100%;
    max-width: 1750px;
    margin: 0px auto;
display: flex; 
flex-flow: row wrap;
text-align: center;

}

    #farbbalken > * {
    flex: 1 1 20%;
    }

#mainmenu.scrolling {
       background-color: #cecece52; 
}

#farbtext {
    width: 100%;
    max-width: 1750px;
    margin: 0px auto;
    display: flex; 
    flex-flow: row wrap;
    text-align: center;

}
    #farbtext > * {
    flex: 1 1 20%;
    }

    #farbtext > a:hover {
    font-style: bold;
    }

    .btn3 {
  background-color: transparent;
  border: solid 2px #ea7338;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
  opacity: none; !important;
  z-index: 1;
}


    .btn3:hover {opacity: 1}

.info {
display: none;
}




#webdesignflex {
display: flex;
flex-flow: row nowrap;
justify-content: center;
}

@media only screen and (max-width: 1260px) {
    #webdesignflex {
        flex-flow: row wrap;
    }
    #infofleximg {
    flex: 2 1 100%;
    text-align: center;
    }
}

button {
    background-color: #313131;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: right;
    text-decoration: none;
    display: inline-block;
}

#popupx {
    position: absolute;
    top: 0px;
    right: 0px;
        transition: 0.8s;
}

    #popupx:hover {
        background-color: #a0a0a0;
    
    }

#kontaktdatenbutton {
text-align: center;
font-size: 48pt; 
color: black;
    padding: 18%;
}

    #kontaktdatenbutton > a {
    color: black;
    }

#printcontent {
display: flex;
align-self: flex-start;
text-align: center;
}

#print1 {
flex: 1;
padding-top: 150px;
}

#print2 {
flex: 1;

}

#print3 {
    flex: 1;
padding-top: 150px;
}

#infoflex {
    flex: 1;
align-self: flex-start;
}

#infofleximg {
flex: 0.5;
align-self: center;
}

#checkerflex {
    display: flex;
-ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    justify-content: space-between;
}

#checkera {
        -ms-flex: 1 1 100px;
        flex: 1 1 100px;
}

#checkerb {
        -ms-flex: 1 1 100px;
        flex: 1 1 100px;
}

#checkerc {
        -ms-flex: 1 1 100px;
        flex: 1 1 100px;
}

#checkera:hover {
        -ms-flex: 1 1 100px;
        flex: 1 1 100px;
}

#checkerb:hover {
        -ms-flex: 1 1 100px;
        flex: 1 1 100px;
}

.checkerimg:hover {
        transform: scale(1.1);
        transition: 0.2s;

}

#ciWrapper {

flex-flow: row nowrap;
justify-content: center;
}

#ciflex {
display: flex;
align-self: flex-start;
}

#cifleximg {
flex: 0.5;
align-self: flex-start;
}

    #cifleximg > img:hover {
    transform: scale(1.1);
        transition: 0.2s;}

#cicontent {
    flex: 1;
    align-self: flex-start;
    color: white; 
}

#listelements {
display: flex;
align-self: flex-start;
text-align: center;
}

#list1 {
flex: 1;
}

#list2 {
flex: 1;
}

#list3 {
flex: 1;
}

#printWrapper {
    color: white;
}