/*Basics________________________________________*/
body{
    background-color: #ffffff;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Poiret One', cursive;
    overflow-x: hidden;
   
}
html{
    overflow-x: hidden;
}

a{
    color: deepskyblue;
    
}
a:hover{
    color: skyblue;
}

button{
    background-color: #333333;
    display: inline-block;
    border: none;
    cursor: pointer;
    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;
    
    
}

p{
    font-size: 100%;
    line-height: 1.25;
    margin: 0px;
    
}
h1{
    font-size: 250%;
    color: darkorange;
    letter-spacing: 2;
    
}
h2{
    font-size:150%;
    font-weight:normal;
    font-variant:inherit;
    margin:0px;
    margin-bottom: 1%;
    width: 100%;
    padding: 0;
    color: darkorange!important;
}
h3{
    color: #333333 !important;
    margin:0px;
    margin-bottom: 0%;
    width: 100%;
    padding-bottom: 0.5%;
    font-weight: 400;
    font-size: 150%;
}


.page{
    background-color: #fcfcfc;
    
    width:100%;
    min-height:0%;
    
    
    
}
.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: 5px 5px 17px rgba(0, 0, 0, 0.2);
    transform: scale(1);

}
.image{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
}


.onlyMobile{
        display: none;
    }

.backgroundImage{
    width:100%;
    height:100%;
    background-position: center;
    position:fixed; 
    background-size: cover;
    overflow: hidden;
    opacity:0;
    z-index:-1;
    background-image:url('../Images/Background.jpg');
    
            animation: backkgroundImageAnim 4s  2s forwards;
    -webkit-animation: backkgroundImageAnim 4s  2s forwards;
    
    -webkit-transition: opacity 2s;
            transition: opacity 2s;
    
}
.backgroundImagePreLoad{
    width:100%;
    height:100%;
    background-position: center;
    position:fixed; 
    background-size: cover;
    overflow: hidden;
    opacity:0;
    z-index:-2;
    background-image:url('../Images/BackgroundPreLoad.jpg');
                animation: backkgroundImageAnim 1s 0s forwards;
    -webkit-animation: backkgroundImageAnim 1s 0s forwards;
}
@-webkit-keyframes backkgroundImageAnim {
    0%{opacity: 0;}
    100%{opacity: 1;}
        
}
@keyframes backkgroundImageAnim {
    0%{opacity: 0;}
    100%{opacity: 1;}
}



/*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;
    z-index: 10 !important;
    position: relative !important;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2)!important;
    text-align: center;
}
.aboutText{
    
    width: 80%;
    max-width: 1100px;
    margin: 1% auto auto auto;
    text-align: center !important;
}

/*Startpage_______________________*/
.startDiv{
    
    
    width: 100vw;
    height:100%;
    position: absolute;
    top: 0%;
    opacity: 1;
            animation-duration: 2s;
    -webkit-animation-duration: 2s;
            animation-name: startDivAnim;
    -webkit-animation-name: startDivAnim;
            animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    
    
    
}
@-webkit-keyframes startDivAnim {
    0% {top:2%; opacity: 0}
    
        
}
@keyframes startDivAnim {
    0% {top:2%; opacity: 0}
    
}

.startBox{
    position: relative;
    margin: auto;
    width: 90vw;
    max-width: 500px;
    height: auto;
    margin-top: 10%;
    padding: 3% 1% 3% 1%;
    transform: scale(0.7);
    opacity: 0;
    
    text-align: center;
    
    border-style: solid;
    border-color: darkorange;
    border-width: 2px;
    box-shadow: 0px 0px 00px 5px white,
                5px 5px 5px 5px rgba(0,0,0,0.4);    
    background-color: white;
    
            animation: startBoxIntro 2s 1s forwards;
    -webkit-animation: startBoxIntro 2s 1s forwards;
}
@keyframes startBoxIntro{
      0%{transform: scale(0.7); opacity: 0;}
    100%{transform: scale(1); opacity: 1;}
    
}
@-webkit-keyframes startBoxIntro{
      0%{transform: scale(0.7); opacity: 0;}
    100%{transform: scale(1); opacity: 1;}
    
}

.startButton{
  
    margin-top: 10%;
   
}



/*InfoPage_______________________*/
.infoPage{
    
    background-size: 350px;
    
    min-height: 0% !important;
    height: auto!important;
    padding-bottom: 0vh !important;
    box-sizing: border-box;
    text-align: center;

    
}
.infoHeadine{
    color: white;
    margin: 0;
    padding: 2%;
    padding-top: 8%;
    margin-bottom: 3%;
    
}

.infoObject{
    
    width: 23vw;
    height: 23vw;
    max-width: 300px;
    max-height: 300px;
    text-align: center;
    box-sizing: border-box;
    
    background-color: darkorange;
    display: inline-block;
    margin: 2vw;
    color: white;
    
    cursor: pointer;
    
    font-size: 1.5vw;
    border-radius: 50%;
    -webkit-transition: all 1s; /* Safari */
            transition: all 1s;
}

.infoObject.selected{
    background-color: white;
    color: darkorange!important;
    font-size: 2.2vw;
}
.infoObject:hover{
    
    transform: scale(1.05);
    
}
.infoObjectHeadline{
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    
    transform: translateY(-50%);
 
}

.infoTexts{
    
    position: relative;
    text-align: center;
    margin: auto;
    width: 80%;
    height: 20%;

    min-height: 20%;
    max-width: 700px;
    
}
.infoText{
    

    position: absolute;
    color: white;
    width: 100%;
    max-width: 100%;
    column-count: 1;
    margin: auto;
    text-align: center;
    transition: all 1s;
    -webkit-transition: all 1s;
    
    
}
.infoText.show{
    opacity: 1;
}
.infoText.hide{
    opacity: 0;
}



/*Moebelpage______________________*/
.moebelPage{
    background-color: white !important;
    padding-bottom: 
}
.moebelContent {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;

    overflow: hidden;
}
.moebelImageContainer{
    position: relative;
    margin-top: 1%;
    width: 100vw;
    height: 30%;
    box-sizing: border-box;
    text-align: center;
    color: white;
    position: relative;
    
}
.moebelImages{
    width: 100%;
    margin: auto;
    top: 0;
    position: absolute;
    opacity: 1;
    left: 0;
             animation-duration: 2s;
    -webkit-animation-duration: 2s;
            animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}
.moebelImages.show{
    
    opacity: 0;
    z-index: 2;
            animation-name: moebelImagesShow;
    -webkit-animation-name: moebelImagesShow;
    
}
@-webkit-keyframes moebelImagesShow {
    
    0%{opacity: 1; left: -100%}
    
    100% {opacity: 1; left: 0%}
    
        
}
@keyframes moebelImagesShow {
    0%{opacity: 1; left: -100%}
    
    100% {opacity: 1; left: 0%}
    
}
.moebelImages.hide{
    
    z-index: 1;
            animation-name: moebelImagesHide;
    -webkit-animation-name: moebelImagesHide;
}
@-webkit-keyframes moebelImagesHide {
    0% {opacity: 1; left: 0%}
    
    100% {left:100%;}
    
        
}
@keyframes moebelImagesHide {
     0% {opacity: 1; left: 0%}
    
    100% {left:100%;}
    
}
.moebelImage{

    margin: 1%;
    width: 30vw;
    max-height: 100%;
    max-width: 400px;
    box-sizing: border-box;
    
}

.moebelIcon{
    
    display: inline-block;
    max-width: 150px;
    max-height: 150px;
    border-radius: 50%;
    width: 11vw;
    height: 11vw;
    margin: 2%;
    opacity: 0.6;
    
    border-style: solid;
    border-color: darkorange;
    border-width: 1px;
    
    cursor: pointer;
    
    background-position: center;
    background-size:cover !important;
    background-repeat: no-repeat;
    -webkit-transition: all 1s; /* Safari */
            transition: all 1s;

}
.moebelIcon:hover{
    opacity: 1;
    transform: scale(1.1);
    
}
.moebelIcon.selected{
    
    opacity: 1 !important;
    transform: scale(1.3);
    
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
    
}
.moebeIconContainer{

    width: 100%;
    text-align: center;
    color: white;
    position: relative;
    top:10%;
    height: 25%;
    
}

.moebelText{
    
    
    
    color: black;
    width: 70%;
    max-width: 900px;
    left: 0;
    right: 0;
    margin:  auto auto auto;
    text-align: center;
    
    
    
}
.moebelTextContainer{
    
    margin-top: 2%;
    width:100%;
    height: 30%;
    max-height: 200px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 3%;
}
.moebelTextHide{
    
    display: none;
    opacity: 0;
             animation-duration: 2s;
    -webkit-animation-duration: 2s;
            animation-name: moebelTextHideAnim;
    -webkit-animation-name: moebelTextHideAnim;
            animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
}
@keyframes moebelTextHideAnim{
    
    0% {opacity: 0;}
    99%{display: block;}
}
.moebelTextShow{
    
    display: block;
    opacity: 1;
             animation-duration: 2s;
    -webkit-animation-duration: 2s;
            animation-name: moebelTextShowAnim;
    -webkit-animation-name: moebelTextShowAnim;
}
@keyframes moebelTextShowAnim{
    
    0% {display: none; opacity: 0;}
    
    99%{display: none;}
}




/*ReferenzPage_________________________*/
.logoHeadline{
    margin-top: 0;
    padding-top: 5%;
}
.logoOverlayText{

    color: white !important;
    min-width: 400px;    
    opacity: 0;
    transform:scale(0.5);
    margin: auto;
    left: 0;
    right: 0;
    margin-top: 20%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	z-index:2;
    position: absolute;


    
    
    			animation-duration: 2s;
    -webkit-animation-duration: 2s;
			animation-name: logoOverlayTextFadeIn;
    -webkit-animation-name: logoOverlayTextFadeIn;
				animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;   
	-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
            animation-fill-mode: forwards;        
    
}
@-webkit-keyframes logoOverlayTextFadeIn {
    
    0% {opacity: 0;}    
    100% {opacity: 1; transform:scale(1);}    
}
@keyframes logoOverlayTextFadeIn {
    0% {opacity: 0;}  
	100% {opacity: 1; transform:scale(1);}
}
.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*/
.footPage{
    padding-top: 1%;
    background-color: rgba(0,0,0,0.7)
}
.footPrint{
    padding: 3% 10% 3% 10%;
    margin-top:10%;
    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;
    
}