/*Basicanimation*/
@keyframes opacityFadeIn{
    

    100%{opacity: 1; transform: scale(1)}
}
@-webkit-keyframes opacityFadeIn{


    100%{opacity: 1; transform: scale(1)}
}



/*basics*/
body{
    background-color: #ffffff;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Alegreya SC', serif;
    overflow-x: hidden;
   
}
html{
    overflow-x: hidden;
}
a{
    color: deepskyblue;
    cursor: pointer;
}
a.object{
    color: rgba(0,0,0,0);
}
a.object:hover{
    color: rgba(0,0,0,0);
}
a:hover{
    color: skyblue;
    cursor: pointer;
}
button{
    background-color: #333333;
    display: inline-block;
    border: none;
    color: white;
    padding: 10px 17px 10px 17px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transform: scale(1.2);
     -webkit-transition: all 0.5s !important; /* Safari */
    transition: all 0.5s !important;
    
}
button:hover{
    
    
    background-color:#212121;
    cursor: pointer;
    
}
p{
    font-size: 100%;
    line-height: 1.25;
    margin: 0px;
    
}
h1{
    font-size: 250%;
    color: #333333;
    
    
}
h2{
    font-size:150%;
    font-weight:normal;
    font-variant:inherit;
    text-align: center;
    margin:0px;
    margin-bottom: 1%;
    width: 100%;
    padding: 0;
    color: white!important;
    position: relative;
}
h3{
    color: #333333 !important;
    margin:0px;
    margin-bottom: 0%;
    width: 100%;
    padding: 0;
    font-weight: 400;
    font-size: 150%;
}
.text{
        
    color: black;
    text-align:justify;
	font-size: 103%;
    line-height: 135%;

}
.shadow{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 3px 3px 17px rgba(0, 0, 0, 0.5);
    transform: scale(1);

}
.backkgroundImage{
    width:100%;
    height:100%;
    background-position: center;
    position:fixed; 
    background-size: cover;
    overflow: hidden;

    
            animation-duration: 100s;
    -webkit-animation-duration: 100s;
            animation-name: backkgroundImageAnim;
    -webkit-animation-name: backkgroundImageAnim;
    -webkit-transition: opacity 2s; /* Safari */
            transition: opacity 2s;
    
}
@-webkit-keyframes5 backkgroundImageAnim {
    0% { transform: scale(1.1);}
    2% { transform: scale(1);}
        
}
@keyframes backkgroundImageAnim {
    0% { transform: scale(1.1);}
    2% { transform: scale(1);}
}
.image{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
}
.page{
    background-color: white;
    
    width:100%;
    min-height:0%;  
}
.pageContent{
    text-align:center;
    min-height:0%;
    padding-top: 3%;
    position: relative;
    background-size: cover;
    background-position: center;
    
    overflow: hidden;
}
.onlyMobile{
        display: none;
    }


/*aboutPage______________________________________*/
.aboutPage{
    
    background-color: white !important;
    min-height:0% !important;
    height: auto !important;
    margin-top: 0 !important;
    padding-top: 0% !important; 
    padding-bottom: 1.5% !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    position: relative !important;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2)!important;
    text-align: center;
}
.aboutImage{
    
    width: 100%;
    margin: 0;
    
}
.aboutText{
    
    width: 80%;
    max-width: 1100px;
    margin: 1% auto auto auto;
    text-align: center !important;
}
.aboutBlock{
    
    position: relative;
    display: inline-block;
    width: 30%;
    max-width: 400px;
    margin: 1%;
    top: 0;
    margin-top: 0;
    vertical-align: top !important;
    
    
}
.aboutHeadline{
    color: #333333 !important;
}
.aboutContent{
    width: 100%;
    
    background-color: white;
    text-align: justify;
    padding: 4%;
    margin-top: 5%;
}


/*Startpage_______________________*/
.startPage{
    height: 100%;
    background-color: white !important;
}
.startDiv{
    
    
    width: 100vw;
    height:100%;
    position: absolute;
    top: 0%;
    opacity: 1;
  }
.startText{
    
    width: 60%;
    max-width: 600px;
    margin: 1% auto auto auto;
    text-align: center;
    color:white;
    
}
.bigStartLetter{
    position: relative;
    margin-top:5%;
    width: 100%;
    text-align: center;
    color:#333333;
    font-size: 320%;
    font-weight: normal;
    line-height: 1;
    margin-bottom:0%;
    opacity:0;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, .2);
           animation: opacityFadeIn 2.5s forwards 2s;
    -webkit-animation: opacityFadeIn 2.5s forwards 2s;
    
}
.startButton{
   
    margin-top: 2%;
    transform: scale(1);
    opacity: 0;
            animation: startButtonFadeIn 1s forwards 1.5s;
    -webkit-animation: startButtonFadeIn 1s forwards 1.5s;
}
@keyframes startButtonFadeIn{
        
    40%{opacity: 1; transform: scale(1.7)}
    100%{opacity: 1; transform: scale(1.5)}
    
}
@-webkit-keyframes startButtonFadeIn{
        
    40%{opacity: 1; transform: scale(1.7)}
    100%{opacity: 1; transform: scale(1.5)}
    
}


.introImage{
    opacity: 0;
    margin: 1%;
    width: 30%;
    
            animation-name: opacityFadeIn;
            animation-duration: 2s;
            animation-fill-mode: forwards;
    
    -webkit-animation-name: opacityFadeIn;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    

}
.introImage1{
    
            animation-delay: 0s;
    -webkit-animation-delay: 0s;
    
}
.introImage2{
    
            animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    
}
.introImage3{
    
            animation-delay: 1s;
    -webkit-animation-delay: 1s;
    
}


.introImages{
    width: 95%;
    max-width: 1600px;
    margin: auto;
    margin-top: 2%;
    
}

/*Moebelpage______________________*/
.moebelPage{
    overflow: hidden;
    position: relative;
    min-height: 100% !important;
    height: auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 3px 3px 17px rgba(0, 0, 0, 0.5);
}
.moebelBackground{
    position: absolute;
    z-index: 1;
    -webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */
    filter: blur(0px);
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transition: all 2s; /* Safari */
            transition: all 2s;
}
.moebelBackground.hide{
    
    opacity: 0;
}


.moebelContainer{
    position: absolute;
    width: 100%;
    height: 95%;
    left: 0;
    padding-top: 2.5%;
    padding-bottom: 2.5%;
    
             animation-duration: 2s;
    -webkit-animation-duration: 2s;
            animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}

.moebelImageContainer{
    position: relative;
   
    
    width: 30%;
    margin-left: 5%;
    height: auto;
    
    
}
.moebelImage{

    margin: 1% 0% 1% 0%;
    opacity:1;
    height: 30%;
    max-height: 250px;
    box-sizing: border-box;
    
}
@keyframes moebelTextHideAnim{
    
    0% {opacity: 0;}
    99%{display: block;}
}

.fadeIn{

            animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
}
@keyframes fadeIn{
    
    0% {left: 100%;}
    100%{left: 0;}
}
@-webkit-keyframes fadeIn{
    
    0% {left: 100%;}
    100%{left: 0;}
    
}

.fadeOut{
    
            animation-name: fadeOut;
    -webkit-animation-name: fadeOut;
    
}
@keyframes fadeOut{
    
    0%{left: 0;}
    100% {left: -100%;}
    
}
@-webkit-keyframes fadeOut{
    
    0%{left: 0;}
    100% {left: -100%;}
    
}

.moebelObjects{
    position: absolute;
    width: 90%;
    max-width: 1400px;
    margin: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);


}
.moebelObject{
    width: 30%;
    height: 0;
    padding: 0;
    padding-bottom: 20%;
    background-color: gray;
    display: inline-block;  
    margin: 0.5%;
    opacity: 0.8;
    
    box-sizing: border-box;
    opacity: 1;
    transform: scale(1);
    
    
    -webkit-transition: all 0.5s; /* Safari */
            transition: all 0.5s;
}
@-webkit-keyframes moebelObjectIntro {
   70%{transform: scale(1.05)}
    100% {transform: scale(1); opacity: 1;}
    
        
}
@keyframes moebelObjectIntro {
    70%{transform: scale(1.05)}
    100% {transform: scale(1); opacity: 1;}
    
}

.moebelObject1{
        animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.moebelObject2{
        animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
}
.moebelObject3{
        animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
.moebelObject4{
        animation-delay: 1.3s;
-webkit-animation-delay: 1.3s;
}
.moebelObject5{
        animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
}
.moebelObject6{
        animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
}

.moebelObject:hover{
    
    opacity: 1;
    transform: scale(1.1) !important;
    cursor: pointer;

}
.presentObject {
    
    position: relative;
    height: 100%;
    width: 100%;
    margin: auto;
    background-size: cover;
    background-position: center;
}

.moebelPresenter{
    
    position: absolute;
    top: 0%;
    transform: translate(0,0);
    height: 100%;
    width: 100%;
    
    z-index: 2;
    transition: all 1.5s;
    -webkit-transition: all 1.5s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
.moebelPresenter.hide{
            pointer-events: none;
            animation-name: moebelPresenterHide;
    -webkit-animation-name: moebelPresenterHide;
}
@-webkit-keyframes moebelPresenterHide {
    0% {opacity: 1; transform: scale(1);}
    99% { transform: scale(1.2); opacity: 0;bottom: 0%;}
    100%{visibility: hidden height: 0 !important;}  
}
@keyframes moebelPresenterHide {
     0% {opacity: 1; transform: scale(1);}
    99% { transform: scale(1.2); opacity: 0;bottom: 0%;}
    100%{visibility: hidden; height: 0 !important;}  
}

.moebelPresenter.show{
    
            animation-name: moebelPresenterShow;
    -webkit-animation-name: moebelPresenterShow;
    
    
}
@-webkit-keyframes moebelPresenterShow {
    0%{opacity: 0; height: 100vh; bottom: 0; transform: scale(1.2)}
    100%{opacity: 1;}
    
}
@keyframes moebelPresenterShow {
     0%{opacity: 0; height: 100vh; bottom: 0;  transform: scale(1.2)}
    100%{opacity: 1;}
}


.moebelPresenterExit{
    
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 130%;
    font-weight: bolder;
    opacity: 0.7;
    z-index: 2;
    -webkit-transition: all 0.5s; /* Safari */
            transition: all 0.5s;
}
.moebelPresenterExit:hover{
    opacity: 1;
    transform: scale(1.1) translateX(-50%);
}
.moebelPresenterText{
    color: white;
    position: relative;
    width: 50%;
    margin: auto;
    column-count: 2;
}

.darkOverlay{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
    background-color: rgba(0,0,0,0.5);
}

.moebelImageContainer{
    position: relative;
    margin-top: 0 !imortant;
    text-align: center;
    width:100%;
    top: 0%;
    transform: translate(0,0);
    height:auto;
    margin: auto;
    padding-top: 2%;
    margin-bottom: 3%;
    
    
}
.moebelImage{

    margin: 1% 1% 1% 1%;
    opacity:1;
    height: 40%;
    max-height: 300px;
    box-sizing: border-box;
    
}
@keyframes moebelTextHideAnim{
    
    0% {opacity: 0;}
    99%{display: block;}
}


.moreMoebelHeader{
    
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 2% 3% 2% 3%;
    background-color: white;
}
.moreMoebelContainer{
    
    padding: 5% 0% 5% 0%;
    text-align: center;
    margin: auto;
    width: 90%;
    max-width: 1400px;
    
}
.moreMoebelIcon{
    overflow: hidden;
    display: inline-block;
    max-width: 220px;
    max-height: 220px;
    position: relative;
    z-index: 1;
    border-radius: 50%;
    width: 13vw;
    height: 13vw;
    margin: 2%;
    opacity: 1;
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    -webkit-transition: all 1s; /* Safari */
            transition: all 1s;

}
.moreMoebelIcon:hover{
    z-index: 2;
    border-radius: 50%;
    transform: scale(1.1);




}
.moreMoebelIconText{
    position: absolute;
    bottom: -22%;
    background-color: rgba(0,0,0,0.5);
    color: white;
    font-size: 100%;
    text-align: center;
    width: 100%;
    height: 22%;
    -webkit-transition: all 0.5s; /* Safari */
            transition: all 0.5s;
}
.moreMoebelIcon:hover > .moreMoebelIconText{
    bottom: -1%;
}


/*ReferenzPage---------------------*/
.logoContainer{
    
    width: 80%;
    max-width: 1300px;
    margin: auto;
}
.logo{
    
    display: inline-block;
    position: relative;
    top:0;
    padding: 1.3vw;
    margin: 0.3vw;
    border-radius: 50%;
    width: 14vw;
    height: 14vw;
    max-width: 170px;
    max-height: 170px;
    background-color: white;
    overflow: hidden;
    
}
.logoImage{
    
    
   
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width:95%;
    height: 95%;
    background-size: contain;
    margin: auto;
    
    
}
.logoText{
    text-align: center;
    width: 80%;
    max-width: 900px;
    margin: 0% auto 5% auto;
    
}


/*Impressum Styles*/
.footPrint{
    padding: 3% 10% 3% 10%;
    margin-top:5%;
    background-color: white;
    width: 100%;
    
    margin: auto;
    box-sizing: border-box;
    text-align: center;
    
    
}
.footContent{    
    text-align:center;
}
.footText{
    
    text-align:center;
    max-width:800px;
    width:60%;
    margin:auto;
    
    
}
.impressumContainer{
    margin-top: 20px;
    border-color: grey;
    border-width: 2px 0px 0px 0px;
    border-style: solid;
    padding-top: 10px;
    
}
.impressumContainer > a{
    
    margin-left: 10px;
    margin-right: 10px;
    
}