/* transition From Home / fadeFromHome
* --------------------------------------- */
.workPageWrap.fadeInTransition .flyBoxworkPage {
  background-color: #bed5e1;
  z-index: 1;
  height: 15vw;
  width: 15%;
  position: fixed;
  bottom: 0;
  left: 15%;
}
.workPageWrap.fadeInTransition .bgSidebarworkPage {
  background-color: #f7f6e8;
  position:absolute;
  left: 100%;
  right:0; 
  top:0;
  bottom:0;
  height: 100%;
  width: 100%;
  transform: translateZ(0);
}
.workPageWrap.fadeInTransition .sidebarworkPage_work {
  opacity: 0;
  position:absolute;
  right:0; 
  top:0;
}
.workPageWrap.fadeInTransition .sidebarworkPage_contact {
  position:absolute;
  right:0;
  bottom:0;
  height: 15vw;
}
.workPageWrap.fadeInTransition .sidebarworkPage_contact .animatable {
  opacity: 0;
}
.workPageWrap.fadeInTransition .contentworkPage .animatable {
  opacity: 0;
}
.workPageWrap.fadeInTransition .workPagesidebar{
  position:absolute;
  left:15%;
  top:0;
  height: 100%;
}



/* transition To Home / fadeFromworkPage
* --------------------------------------- */
.workPageWrap.fadeToHome .flyBoxworkPage {
  z-index: 2;
  height: 15vw;
  width: 0vh;
  position: fixed;
  left: 15%;
}
.workPageWrap.fadeToHome .sidebarworkPage {
  z-index: 1;
}
.workPageWrap.fadeToHome .bgSidebarworkPage {
  background-color: #fcfcfc;
  position:absolute;
  left:0; 
  top:0;
  bottom:0;
  height: 100%;
  width: 0%;
  z-index: 2;
}
.workPageWrap.fadeToHome.fadeFromworkPage .flyBoxworkPage {
  background-color: #bed5e1;
  bottom:0;
}
.workPageWrap.fadeToHome .sidebarworkPage {
  position:fixed;
}
.workPageWrap.fadeFromworkPage.fadeToHome .sidebarworkPage_work { z-index: 1; }
.workPageWrap.fadeFromworkPage.fadeToHome .sidebarworkPage_contact { z-index: 2; }


/* transition To Contact / switchBetweenWC
* --------------------------------------- */
.landscape .workPageWrap.fadeFromworkPage.fadeTocontactPage .flyBoxworkPage {
  background-color: #bed5e1;
  z-index: 2;
  height: 0;
  width: 85%;
  position: fixed;
  left:15%!important;
  right: 0;
  bottom:0;
}


/* transition To workPost / switchBetweenWW
* --------------------------------------- */
.workPageWrap.fadeFromworkPage.fadeToworkPost .flyBoxworkPage {
  background-color: #fcfcfc;
  z-index: 2;
  height: 100%;
  width: 0;
  position: fixed;
  right: 0;
  top:0;
  bottom:0;
  left:auto;
}
















/* ---------------------------------------
* PORTRAIT
* --------------------------------------- */
/* transition From Home / fadeFromHome
* --------------------------------------- */
.portrait .workPageWrap.fadeInTransition .flyBoxworkPage {
  background-color: #bed5e1;
  z-index: 2;
  width: 10vh;
  height: 10%;
  position: fixed;
  right: 0;
  left:auto;
  top: 10%;

  display: none;
}
.portrait .workPageWrap.fadeInTransition .bgSidebarworkPage {
  background-color: #f7f6e8;
  position: absolute;
  right: 0;
  top: auto;
  bottom: 0;
  height: 0%;
  width: 100%;
  left: auto;
}
.portrait .workPageWrap.fadeInTransition .sidebarworkPage {
  /*background: #fcfcfc;*/
  background-color: #f7f6e8;
}
.portrait .workPageWrap.fadeInTransition .sidebarworkPage_work {
  opacity: 0;
  position:absolute;
  right:0; 
  top:0;
  height: 100%;
}
.portrait .workPageWrap.fadeInTransition .sidebarworkPage_contact {
  position:absolute;
  right:0;
  bottom:0;
  width: 10vh;
  height: 100%;
}
.portrait .workPageWrap.fadeInTransition .sidebarworkPage_contact .animatable {
  opacity: 0;
}
.portrait .workPageWrap.fadeInTransition .contentworkPage .animatable {
  opacity: 0;
}
.portrait .workPageWrap.fadeInTransition .workPagesidebar{
  position:absolute;
  left:10%;
  top:0;
  height: 100%;
}



/* transition To Home / fadeFromworkPage
* --------------------------------------- */
.portrait .workPageWrap.fadeToHome .flyBoxworkPage {
  z-index: 2;
  height: 0;
  width: 10vh;
  position: fixed;
  left: auto;
  right: 0;
  top:10%;
  background-color: #bed5e1;
  bottom:auto;

  display: none;
}
.portrait .workPageWrap.fadeToHome .sidebarworkPage {
  z-index: 1;
  position:fixed;
}
.portrait .workPageWrap.fadeToHome .bgSidebarworkPage {
  background-color: #fcfcfc;
  position:absolute;
  left:0; 
  top:0;
  bottom:auto;
  height: 0%;
  width: 100%;
  z-index: 2;
}
.portrait .workPageWrap.fadeFromworkPage.fadeToHome .sidebarworkPage_work { z-index: 1; }
.portrait .workPageWrap.fadeFromworkPage.fadeToHome .sidebarworkPage_contact { z-index: 2; }


/* transition To Contact / switchBetweenWC
* --------------------------------------- */
.portrait .workPageWrap.fadeFromworkPage.fadeTocontactPage .flyBoxworkPage {
  background-color: #bed5e1;
  z-index: 2;
  width: 0%;
  height: 90%;
  position: fixed;
  left:auto;
  right: 0;
  top: 10%;
}


/* transition To workPost / switchBetweenWW
* --------------------------------------- */
.portrait .workPageWrap.fadeFromworkPage.fadeToworkPost .flyBoxworkPage {
  background-color: #fcfcfc;
  z-index: 3;
  width: 100%;
  height: 0%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
}