@font-face {
    font-family: 'Caviar Dreams';
    src: url('../fonts/Caviar_Dreams_Bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Caviar Dreams';
    src: url('../fonts/Caviar_Dreams-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Clear Sans';
    src: url('../fonts/ClearSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Clear Sans';
    src: url('../fonts/ClearSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

html{    overflow-x: hidden;}

html, body, footer{
    margin: 0;
}

h1, h2, h3,h4,h5{font-family: Caviar Dreams, sans-serif;}

h1{font: bold 2rem Caviar Dreams, sans-serif; margin-bottom: 0;}
h2{font: bold 1.2rem Caviar Dreams, sans-serif;}
.h2light{font:lighter 1.9rem Caviar Dreams, sans-serif!important;}
.h3light{font: lighter 1.2rem Caviar Dreams, sans-serif; margin: 0;}

a, p{font: 1rem/1.4rem Clear Sans, sans-serif;}

a{text-decoration: none; color: #000;}
a:hover{color: #B31F5F;}

button:hover{cursor: pointer;}

.subtitle{margin: 0.5rem;}
.smoll{font-size: 0.6rem;}

.smolh{font-size: 0.8rem; color: white; margin: 1rem 0 0 0;}

.nmb{margin-bottom: 0;}
.nmt{margin-top: 0;}
.nm{margin: 0;}
.ml{margin-left: 1rem;}
.mt2{margin-top: 2rem;}
.mb1{margin-bottom: 1rem;}
.mb2{margin-bottom: 2rem;}

.mbr{display:none;}

.pad1{padding: 1rem;}

.spacer25{height:25px;}
.spacer50{height: 50px;}
.spacer80{height:80px;}
.spacer100{height: 100px;}
.spacer200{height: 200px; margin: 3rem 0;}
.spacer300{height: 300px;}
.spacer500{height: 500px;}

.white{color: white;}


.st0{fill:#FFFFFF;}
.st1{fill:#B31F5F;}



.klammerbox{width: 100px; height: auto; margin: 0 auto}

.redline{height: 4px; background-color: #B31F5F; border: 0; margin: 0;}

.flextop{display: flex; width: 60%; margin: 0 auto; justify-content: space-between; margin-top: 50px;}
.logoboxtop{width: 150px; margin-bottom: -8px; align-self: flex-end;}
.logoboxtop2{width: 200px; align-self: flex-end; margin-bottom: 0.5rem;}
.headerbox{width: 60%;
margin: 0 auto;
text-align: right;}



.centerbox{width: 51%; margin: 0 auto;}

.side, .sideblue{
    display: flex;
    align-items: center;
    justify-content: flex-end;
position: relative; left: 0; top: 2rem;
width: 20%; 
height: 80px; 
background: white;
border-radius: 0 40px 40px 0;
float:left;
text-align: right;
z-index: 2;
}

.hside{margin: 0; padding-right: 20px;}
.hside2{margin: 0; padding: 9px 12px;}
.smol{font-size: 1rem;}
.sideblue{background: #29abe2; top: 0;}
.black{background: #000;}

.menu{
position: fixed;
top:  284px;
right: 0;
width: 220px;
z-index: 2;
background: white; 
display: flex;
border: 1pt solid #29abe2; 
height: 300px;
border-radius: 25px 0 0 25px;
margin-right: -181px;
}
.menuside{border: none;
    border-radius: 20px 0 0 20px;
    width: 40px;
    background-image: url("../images/menuside.svg");
    background-repeat: none;}
.menuside:hover{background-image: url("../images/menuside2.svg");}

.linklist{display: flex; flex-direction: column; justify-content: space-around; margin: 1rem 0;}

.side1{
    height: 40px;
    margin-top: 3px;
}

.slide1{ transition: all 1s ease;}
.slide1-active{margin-right: -1px;}


.menubutton{
    background-color: #29abe2; 
    border: 1px solid #29abe2; 
    width: 38px;
    height: 60px;
    border-radius: 0 0 8px 8px;
    border: none;
    padding: 0;
    margin-right: 2.2rem;
    z-index: 5;
    position: fixed;
    right: 0;
}
.whitebar{height: 5px; margin: 5px; background-color: white; border-radius: 2px;}

.menubutton:hover{background-color: #B31F5F;}

#mm{display: none;}

.mobilemenu{
    width: 40%;
    margin-right: 2.2rem;    
    margin-top: -205px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 4;
    height: 202px;
}
.mobilemenu ul{
    background-color: #fff;
    border-radius: 0 0 0 20px;
    border: 1px solid #29abe2; 
    list-style-type: none; 
    padding: 1.5rem 1rem 1rem 1rem; 
    -webkit-padding-start: 0;
}
.mobilemenu ul li{text-align: left; padding: 5px; width: 100%;}
.mobilemenu ul li a{width: 100%;}

.slide2{ transition: all 0.5s ease;}
.slide2-active{margin-top: -1px;}




.main1{
    background-image:url("../images/forest4.svg");
    background-position: 98% bottom;
    background-repeat: no-repeat;
    background-size: 20%;
    margin-bottom: -1rem;
    padding-bottom: 3rem;
}


.bg2 img{
width: 100%;
}

#and{display: grid;
grid-template-columns: 45% 10% 45%;}
#and>h1>span{margin: 0 5%;}

.righto{text-align: right;}
.center{text-align: center;}
.centr{text-align: center;}
.centr .white{display:none;}
.v1{border-left: 3px #B31F5F solid; margin-left: 48%;}
.bracky{width:360px; grid-column: span 3; justify-self: center;}

.centerbox h3{
    height: auto;
}

.blubutt{
    width: 100%;
    border: none;
    padding: 5px;
    background: linear-gradient(90deg, #29abe2 20%, rgba(1,1,1,0) 100%);
    color: white;
    font: bold 1.5rem Caviar Dreams, sans-serif;
    margin: 2rem 0;
    grid-row: 4/5;
    grid-column: 2/7;
}
.blubutt:hover{
    animation: blb 1s ease-out 1;
}
@keyframes blb{
    0%{background-color: #29abe2;}
    100%{background-color: #b4e8ff;}
}
.blubutt:active{color: #B31F5F;}

.pagetitle{
    font-size: 1.5rem;
    text-transform: uppercase;
    margin: 0;
}


/**************************************kontakt********************************/
#kontakt{
    background-color:#8b1847;
}
#kontakt p, #kontakt a, #kontakt h2{
    color: white;
    font-family: Caviar Dreams, sans-serif;}

#kontakt p{
    font: bold 1rem/2rem Caviar Dreams, sans-serif;
}
.bigger{font: bold 1.3rem Caviar Dreams, sans-serif!important;}

.grid3{
    position: relative;
    top: 2rem;
    width: 40%;
    margin-left: 30%;
    padding: 0 0 2em;
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr) 40%;
    column-gap: 5%;
    grid-template-rows:  minmax(0, 1fr) auto auto;
}

.gk1{grid-column: 1/3; grid-row: 1/2; align-self: center;}
.gk2{grid-column: 3/4; grid-row: 1/2; align-self: center;}
.gk3{grid-column: 1/2; grid-row: 2/3; text-align: right; align-self: start;}
.gk4{grid-column: 2/3; grid-row: 2/3; justify-self: center;}
.gk5{grid-column: 3/4; grid-row: 2/3; align-self: start;}
.gk6{grid-column: 2/3; grid-row: 3/4; justify-self: center; margin-bottom: 2rem;}


/********************************************about****************************************************************************/
#about{
    width: 100%;
    background-image: url(../images/wald.jpg);
    background-size:100%;
    padding-bottom: 3rem;
    background-attachment: fixed;
    }
.flexes{display: flex; justify-content: space-between; width: 60%; margin-left: 20%; position: relative; top: 2rem;}
.flexes>div{width: 46%; padding: 1rem;}
.biobox{background-color: #fff; padding: 1rem;}
#about div img{width: 100%;}
.bluetype{color:#29abe2;}
.hannabox p, .hannabox h2{text-align: right;}


/********************************************3dprinting****************************************************************************/

.diagstripes{
    margin: 1rem 0;
    min-height: 310px;
    background: repeating-linear-gradient(
    315deg,
    #fff,
    #fff 2px,
    #000 2px,
    #000 60px);
    padding-bottom: 2rem;
}
.H3D{font-size: 3rem;
    color:white;
    margin: 0;
    padding: 2rem;
    z-index: 1;
    position: absolute;
}
#printhead{z-index: 2; position: relative; left: 45px; top: 10px; background-color: #fff; width: 10px; height: 20px; animation: printer 20s linear 0s infinite;}
@keyframes printer{
    0%{left: -300px; top: 60px;}
    10%{left: -250px; top: 40px;}
    20%{left: -250px; top: 60px;}
    30%{left: -200px; top: 40px;}
    40%{left: -200px; top: 60px;}
    50%{left: -150px; top: 40px;}
    60%{left: -150px; top: 60px;}
    70%{left: -100px; top: 40px;}
    100%{left: 300px; top: 10px;}
}

.gridfull{
    display: grid;
    grid-template-columns: 71% 29%;
    grid-template-rows:auto auto auto;
    margin: 0 0 1rem 25%;
    position: relative;
    padding-top: 2rem;
    width: 70%;
}

.p1, .materialbut, .p2{background-color: #000;}
.p1{grid-column: 1/2; padding: 20px;}
.p0{grid-column: 2/3; grid-row: 1/3; align-self: end;}
.p3{grid-column: 1/2; grid-row: 3/4;}

.p1 a{display: block; margin-bottom: 1rem;}

.p0 img{width: 100%;}

.p3 img, .blubutt img{
    width: 18px;
    margin-top: 10px;    
}

.materialbut{
    border: none;
    width: 100%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.materialbut:hover{background-color: #B31F5F;}
.samples{
    position: relative; 
    background-color: #fff; 
    display: grid; 
    grid-template-columns: repeat(3, 32%);
    gap: 2%;
}
.druckimg{width: 150px;}
.flexam{display: flex; flex-direction: row; margin: 1rem;}


.flexp{display: flex; align-items: center;}

/********************************************socialmedia****************************************************************************/

#socialmedia{
    background-color: #29abe2;

}
.flexk{
    display: flex;
margin: 0 auto;
padding: 10px 0;
justify-content: center;
align-items: center;
width: 100%;

}

.icons{align-self:center; width: 40%; display: flex; justify-content: end;}
.svgbox{width: 50px; height: 50px; margin: 0 7.5%; display: inline-block;}
.tweet{align-self: center; width: 60%; display: flex; justify-content: flex-end;}
.tweetp{align-self: center; text-align: center; margin-right: 3%;}

#birb{
background-image: url(../images/birb2.png);
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
}

.coverbirb{
    width: 180px; 
    height: 180px; 
    animation: birby 1.5s cubic-bezier(1,-1, 0, 2) 0s infinite;
}

@keyframes birby{
0%{opacity: 1;}
100%{opacity: 0;}
}


.pblue{margin-top:3rem;}
.main2{margin-top: 3rem;}

.grid6{
    display: inline-grid;
    grid-template-columns: 34px 0.5rem auto;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    width: 46%;
    margin-right: 3%;
}

.bunbox, .wslbox{grid-row: 1/2; grid-column: 1/2; align-self: end; position: relative;}
.title{grid-row: 1/2; grid-column: 3/4; align-self: end;}
.line{grid-row: 2/3; grid-column: 2/4; border-bottom: 2pt solid #B31F5F;}
.pagelink{grid-row: 3/4; grid-column: 3/4;}
.textbox{grid-column: 3/4; grid-row: 4/5;}
.previewimg{width: 100%; grid-row: 5/6; grid-column: 3/4; z-index: -1; }

.bunbox img, .wslbox img{width: 100%; position: absolute; bottom: -2px; min-width: 34px; }

#mobileillustration{
    display:none;
}

#projects{
    padding-bottom: 2rem;
    margin-top: 1rem;
    grid-row: 5/6;
    grid-column: 2/7;
}

.gridimp{    
    width: 100%;
    margin: 0 auto 0;
    display: grid;
    grid-template-columns: 30% 30%;
    grid-template-rows: auto auto auto;
    column-gap: 10%;
    margin: 0 15%;
}

.mb4{margin-bottom: 4rem;}

.shrubbox{
width: 100%;
height: 220px;
margin: 0 auto;
background-image: url("../images/shrubberybig.svg");
background-position: top center;
background-size: 70%;
background-repeat: no-repeat;}

.hcenter{text-align: center; margin: 0; padding: 2rem;}

.impp, .impp a{font-size: 0.9rem; margin-top: 0;}
.impp a{text-decoration: underline;}

/********************************footer*************************************************************************/
footer{padding-top: 3rem;}
.bunwork{
    position: relative;
    bottom: 0;
    left: 3%;
    width: 32%;
    margin: -54px 0;
    z-index:1;
}

.wslwork{
    position: relative;
    bottom: 0;
    left: 38%;
    width: 23%;
    margin: -48px 0;
    z-index: 1;
}

.gi0{grid-column: 1/3;}
.gi1{grid-row: 2/3; grid-column: 1/2;  justify-self: left; align-self: start;}
.gi2{grid-row: 2/3; grid-column: 2/3; justify-self: left; align-self: start; padding-top: 2px;}
.gi3{grid-row: 3/4; grid-column: 1/2;}
.gi4{grid-row: 3/4; grid-column: 2/3;}
.gi5{grid-row: 4/5; grid-column: 1/2;}
.gi6{grid-row: 4/5; grid-column: 2/3;}
.gi7{grid-row: 5/6; grid-column: 1/2;}
.gi8{grid-row: 5/6; grid-column: 2/3;}

.redbg{
    background:linear-gradient(180deg, #8b1847 0%, #6d1238 100%);
    width: 100%;
    height: auto;
    margin: 0;
}

.bottomfix{position: relative; bottom: 0;}

.dsgvo a{text-decoration: underline!important;}

.gridd{
display: grid;
grid-template-columns: 15% 10% 25% 25% 10% 15%;
margin: 2rem 0 0 0;
padding-bottom: 3rem;
row-gap: 1rem;
grid-auto-flow: column;
}

.gd1{grid-column: 2/6; grid-row: 1/2; justify-self: left;}
.gd3{grid-column: 2/4; grid-row: 2/3; justify-self: center; margin-right: 3%;}
.gd4{grid-column: 4/6; grid-row: 2/3; justify-self:center; margin-left: 3%;}
.gd5{grid-column: 2/6; grid-row: 3/4; justify-self: center; text-align: center; margin-top: 3rem;}
.gd2{grid-column: 2/6; grid-row: 4/5;justify-self: center; margin: 0; text-align: center;}

.inline{display: inline-block;}
.momobr{display: none;}

/***********************************************************MEDIA QUERY and MOBILE***********************************************************************************/
/********************************************************************************************************************************************************************/
/********************************************************************************************************************************************************************/

@media screen and (max-width: 1540px){
    .bluetype{
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 1340px){

.side, .sideblue{width: 15%; height: 60px; border-radius: 0 30px 30px 0;}
.ssm{height: 90px; border-radius: 0 45px 45px 0; padding-right: 5px;}
.hside{
    font-size: 1.6rem;
    padding-right: 15px;
}
.smol{font-size: 0.8rem; padding:12px;}

.centerbox{width: 65%;}
.gridfull{margin-left: 15%; width: 80%;}

.p1{padding: 14px;}
.samples{width: 80%; margin-left: 15%;}

.grid3{
    width: 60%;
    margin-left: 20%;
}

.coverbirb{width: 130px; height: 130px;}

.shrubbox{
    background-size: 80%;
    height: 200px;
}
.hcenter{font-size: 1.5rem;}

.bluetype{
    font-size: 1.6rem;
}
.centerbox h3{
    height: 2.5rem;
}
}

@media screen and (max-width: 1120px){
    .momobr{display: block;}   
    .centr .white{display:inline-block;}
    #and>h1>span{margin: 0 13%;}
}

@media screen and (max-width: 900px){

.grid6{grid-template-columns: 34px 0.5rem auto;}
.pagetitle{font-size: 1.3rem;}

.flexes{width: 90%; margin-left: 5%;}
.flexes>div{width: 50%; padding: 0.4rem;}

.coverbirb{width: 80px; height: 80px;}

.shrubbox{background-size: cover; height: 150px;}
.grid3{width: 90%; margin-left: 5%; column-gap:2%;}

.side, .sideblue{width: 33%; float: none; top: 1rem;}
.ssm{height: 60px; border-radius: 0 30px 30px 0; padding-right: 0;}



.gridfull{width: 64%; grid-template-columns: 40% 60%; margin-left: 18%;}
.samples{width: 64%; margin-left: 18%; grid-template-columns: 54% 54%;}
.p1{grid-column: 1/3; grid-row: 1/2;}
.p0{grid-column: 1/2; grid-row: 2/3;}
.p2{grid-column: 2/3; grid-row: 2/3;}
.p3{grid-column: 1/3; grid-row: 3/4;}

.bigger{font-size: 1.1rem!important;}


.gridimp{grid-template-columns: 40% 40%; margin: 2rem 5% 3rem;}

.gd1{grid-column: 2/4;}
.gd2{grid-column: 2/6;}

.menu, .menuside{display: none;}

#mm{display: block;}
.mobilemenu ul{margin: 0;}

.bunwork{width: 42%; left: -3%;}
.wslwork{width: 30%; left:27%}

#topsy{
    max-width: 90%;
  margin-left: 10%;
}
}

@media screen and (max-width: 650px){
    #topsy{width:100%; margin-left:0;}
    .grid3{
        grid-template-columns: 45% minmax(0, 1fr) 45%;
    }
    .mobile09{font-size:0.9rem;}

    .bracky{
        width: 320px;
    }
    .centerbox{margin: 2rem auto 0;}
    h1{font-size: 1.8rem;}

    .main1{
        background-image: none;
        padding-bottom: 0.9rem;
    }
    #mobileillustration{
        display:flex;
        width: 100%;
    }
    #mobileillustration div{align-self: flex-end; }
    #mobileillustration div img{margin-bottom: -4px;}

    .flextop{width: 94%;}
    .logoboxtop{width: 29%; margin-left: 3%}
    .logoboxtop2{width: 170px; margin-bottom: 0.2rem;}
    .headerbox{width: 90%;}

    .mobilemenu{margin-left: 5%; margin-right: 5%; width: 88%;}
    .menubutton{margin-right: 5%;}

    .centerbox{width: 90%;}
    .gridfull{margin-left: 5%; width: 90%;}
    .samples{width: 90%; margin-left: 5%;  grid-template-columns: 96%;}
    .flexk{flex-direction: column; width: 94%; margin: 1.2rem auto 0;}
    .icons{width: 60%}
    .tweet{width: 100%; justify-content: space-between; margin-top: 0rem; margin-bottom: 0.5rem;}

    .mbr{display: inline-block;}
    .nbr{display: none;}

    .pagetitle{font-size: 1.2rem;}

    .grid3{
        width: 92%;
        margin-left: 4%;
    }

    .gk1{grid-column: 1/4; margin-left: 3%; max-width: 280px;}
    .gk2{grid-column: 1/4; grid-row: 2/3; margin-left: 3%;}
    .gk3{grid-row: 3/4;}
    .gk4{grid-row: 3/4;}
    .gk5{grid-row: 3/4;}
    .gk6{grid-row: 4/5;}


    .side, .sideblue{width: 98%; height: 50px; border-radius: 0 25px 25px 0; justify-content: flex-start;}
    .hside{padding-left: 5.5%; float: none; font-size: 1.4rem;}

    .flexes{
        flex-direction: column;
        width: 96%;
        margin-left:2%;

    }
    .flexes>div{
        width:100%;
        padding: 0;
    }

    .bunwork{width: 67%; left: -21%;}
    .wslwork{width: 50%; left:6%; margin-left: -24%;}

    .gridd{grid-template-columns: 5% 20% 25% 25% 20% 5%;}

    .grid6{
        width: 100%;
        margin-right: 0%;
        margin-top: 2rem;
    }

    .icons{
        justify-content: start;
        align-self: start;
    }
    .tweetp{
        text-align: left;
    }
    .svgbox{margin: 0 15% 0 0;}

    .p0{grid-column:1/3;}
}

@media screen and (max-width: 470px){

    .redline{height: 3px;}
    
    .gi1{grid-column: 1/3; grid-row: 2/3;}
    .gi2{grid-column: 1/3; grid-row: 7/8;}
    .gi3{grid-column: 1/3; grid-row: 3/4;}
    .gi4{grid-column: 1/3; grid-row: 8/9;}
    .gi5{grid-column: 1/3; grid-row: 4/5;}
    .gi6{grid-column: 1/3; grid-row: 9/10;}
    .gi7{grid-column: 1/3; grid-row: 5/6;}
    .gi8{grid-column: 1/3; grid-row: 10/11;}

    .bunwork{margin: -33px 0;}

    h3{font-size: 1rem;}

    
}

@media screen and (max-width: 400px){

    .bluetype{font-size: 1.2rem;}

    #and>h1>span{margin: 0 0;}
}