/* transition to contactPage
* --------------------------------------- */
.contactPageWrap.fadeInTransition .flyBoxcontactPage {
  background-color: #f7f6e8;
  z-index: 1;
  height: 15vw;
  width: 15%;
  position: fixed;
  top: 0;
  left: 15%;
}
.contactPageWrap.fadeInTransition .bgSidebarcontactPage {
  background-color: #bed5e1;
  position:absolute;
  left: 100%;
  right:0; 
  top:0;
  bottom:0;
  height: 100%;
  width: 100%;
  transform: translateZ(0);
}
.contactPageWrap.fadeInTransition .sidebarcontactPage_contact {
  opacity: 0;
  position:absolute;
  right:0; 
  bottom:0;
}
.contactPageWrap.fadeInTransition .sidebarcontactPage_work {
  position:absolute;
  right:0;
  top:0;
  height: 15vw;
}
.contactPageWrap.fadeInTransition .sidebarcontactPage_work .animatable {
  opacity: 0;
}
.contactPageWrap.fadeInTransition .contentcontactPage .animatable {
  opacity: 0;
}
.contactPageWrap.fadeInTransition .contactPagesidebar{
  position:absolute;
  left:15%;
  top:0;
  height: 100%;
}


/* transition To Home / fadeFromcontactPage
* --------------------------------------- */
.contactPageWrap.fadeToHome .flyBoxcontactPage {
  z-index: 2;
  height: 15vw;
  width: 0vh;
  position: fixed;
  left: 15%;
}
.contactPageWrap.fadeToHome .sidebarcontactPage {
  z-index: 1;
}
.contactPageWrap.fadeToHome .bgSidebarcontactPage {
  background-color: #fcfcfc;
  position:absolute;
  left:0; 
  top:0;
  bottom:0;
  height: 100%;
  width: 0%;
  z-index: 2;
}
.contactPageWrap.fadeToHome.fadeFromcontactPage .flyBoxcontactPage {
  background-color: #f7f6e8;
  top:0;
}
.contactPageWrap.fadeToHome .sidebarcontactPage {
  position:fixed;
}
.contactPageWrap.fadeFromcontactPage.fadeToHome .sidebarcontactPage_work { z-index: 2; }
.contactPageWrap.fadeFromcontactPage.fadeToHome .sidebarcontactPage_contact { z-index: 1; }


/* transition To Contact / switchBetweenWC
* --------------------------------------- */
.landscape .contactPageWrap.fadeFromcontactPage.fadeToworkPage .flyBoxcontactPage {
  background-color: #f7f6e8;
  z-index: 2;
  height: 0;
  width: 85%;
  position: fixed;
  left:15%!important;
  right: 0;
  top:0;
}


/* transition To Contact / switchBetweenWW
* --------------------------------------- */
.contactPageWrap.fadeFromcontactPage.fadeToworkPost .flyBoxcontactPage {
  background-color: #fcfcfc;
  z-index: 2;
  height: 0;
  width: 85%;
  position: fixed;
  left: 15%;
  top:0;
}













/* ---------------------------------------
* PORTRAIT
* --------------------------------------- */
/* transition to contactPage
* --------------------------------------- */
.portrait .contactPageWrap.fadeInTransition .flyBoxcontactPage {
  background-color: #f7f6e8;
  z-index: 2;
  width: 10vh;
  height: 10%;
  position: fixed;
  left: 0;
  top: 10%;

  display: none;
}
.portrait .contactPageWrap.fadeInTransition .bgSidebarcontactPage {
  background-color: #bed5e1;
  position: absolute;
  right: 0;
  top: auto;
  bottom: 0;
  height: 0%;
  width: 100%;
  left: auto;
}
.portrait .contactPageWrap.fadeInTransition .sidebarcontactPage {
  /*background: #fcfcfc;*/
  background-color: #bed5e1;
}


.portrait .contactPageWrap.fadeInTransition .sidebarcontactPage_contact {
  opacity: 0;
  position:absolute;
  right:0; 
  bottom:0;
  height: 100%;
}
.portrait .contactPageWrap.fadeInTransition .sidebarcontactPage_work {
  position:absolute;
  right:0;
  top:0;
  width: 0vh;
  height: 100%;
}
.portrait .contactPageWrap.fadeInTransition .sidebarcontactPage_work .animatable {
  opacity: 0;
}
.portrait .contactPageWrap.fadeInTransition .contentcontactPage .animatable {
  opacity: 0;
}
.portrait .contactPageWrap.fadeInTransition .contactPagesidebar{
  position:absolute;
  left:15%;
  top:0;
  height: 100%;
}


/* transition To Home / fadeFromcontactPage
* --------------------------------------- */
.portrait .contactPageWrap.fadeToHome .flyBoxcontactPage {
  z-index: 2;
  height: 0;
  width: 10vh;
  position: fixed;
  left: 0;
  background-color: #f7f6e8;
  top:10%;

  display: none;
}
.portrait .contactPageWrap.fadeToHome .sidebarcontactPage {
  z-index: 1;
  position:fixed;
}
.portrait .contactPageWrap.fadeToHome .bgSidebarcontactPage {
  background-color: #fcfcfc;
  position:absolute;
  left:0; 
  top:0;
  bottom:0;
  height: 0%;
  width: 100%;
  z-index: 2;
}
.portrait .contactPageWrap.fadeFromcontactPage.fadeToHome .sidebarcontactPage_work { z-index: 2; }
.portrait .contactPageWrap.fadeFromcontactPage.fadeToHome .sidebarcontactPage_contact { z-index: 1; }


/* transition To Contact / switchBetweenWC
* --------------------------------------- */
.portrait .contactPageWrap.fadeFromcontactPage.fadeToworkPage .flyBoxcontactPage {
  background-color: #f7f6e8;
  z-index: 2;
  width: 0%;
  height: 90%;
  position: fixed;
  left: 0;
  top: 10%;
}


/* transition To Contact / switchBetweenWW
* --------------------------------------- */
.portrait .contactPageWrap.fadeFromcontactPage.fadeToworkPost .flyBoxcontactPage {
  background-color: #fcfcfc;
  z-index: 2;
  width: 0%;
  height: 90%;
  position: fixed;
  left: 0;
  top: 10%;
}