/* transition From Home / fadeFromHome
* --------------------------------------- */


.workPostWrap.fadeToHome.fadeFromworkPost .contentworkPost {
  background-color:#f7f6e8;
}
.workPostWrap.fadeInTransition .bgSidebarworkPost {
  background-color: #f7f6e8;
  position:absolute;
  right:0; 
  top:0;
  bottom:0;
  height: 100%;
  width: 0%;
}



.workPostWrap.fadeInTransition .flyBoxworkPost {
  background-color: #bed5e1;
  z-index: 2;
  height: 15vw;
  width: 15%;
  position: fixed;
  bottom: 0;
  left: 15%;
}
.workPostWrap.fadeInTransition .bgSidebarworkPost {
  background-color: #f7f6e8;
  position:absolute;
  right:0; 
  top:0;
  bottom:0;
  height: 100%;
  width: 0%;
}
.workPostWrap.fadeInTransition .bgSidebarworkPost {
  background-color: #f7f6e8;
  position:absolute;
  right:0; 
  top:0;
  bottom:0;
  height: 100%;
  width: 0%;
}
.workPostWrap.fadeInTransition .sidebarworkPost_work {
  opacity: 0;
  position:absolute;
  right:0; 
  top:0;
  height: 100%'
}
.workPostWrap.fadeInTransition .sidebarworkPost_contact {
  position:absolute;
  right:0;
  bottom:0;
  height: 15vw;
}
.workPostWrap.fadeInTransition .sidebarworkPost_contact .animatable {
  opacity: 0;
}
.workPostWrap.fadeInTransition .contentworkPost .animatable {
  opacity: 0;
}
.workPostWrap.fadeInTransition .workPostsidebar{
  position:absolute;
  left:15%;
  top:0;
  height: 100%;
}


/* transition To Home / fadeFromworkPost
* --------------------------------------- */
.workPostWrap.fadeToHome.fadeFromworkPost .flyBoxworkPost {
  z-index: 2;
  height: 15vw;
  width: 0vh;
  position: fixed;
  left: 15%;
  background-color: #bed5e1;
  bottom:0;
}
.workPostWrap.fadeToHome .sidebarworkPost {
  z-index: 1;
}
.workPostWrap.fadeToHome .bgSidebarworkPost {
  background-color: #fcfcfc;
  position:absolute;
  left:0; 
  top:0;
  bottom:0;
  height: 100%;
  width: 0;
  z-index: 2;
}
.workPostWrap.fadeToHome .sidebarworkPost {
  position:fixed;
}
.workPostWrap.fadeFromworkPost.fadeToHome .sidebarworkPost_work { z-index: 1; }
.workPostWrap.fadeFromworkPost.fadeToHome .sidebarworkPost_contact { z-index: 2; }



/* transition To Contact / switchBetweenWC
* --------------------------------------- */
.workPostWrap.fadeFromworkPost.fadeTocontactPage .flyBoxworkPost {
  background-color: #bed5e1;
  z-index: 2;
  height: 0;
  width: 85%;
  position: fixed;
  left: 15%;
  bottom:0;
}


/* transition To workPost / switchBetweenWW
* --------------------------------------- */
.workPostWrap.fadeFromworkPost.fadeToworkPage .flyBoxworkPost {
  background-color: #f7f6e8;
  z-index: 2;
  height: 100%;
  width: 0;
  position: fixed;
  left: 15%;
  top:0;
}


/* transition To Home / fadeFromworkPost
* --------------------------------------- */
.workPostWrap.fadeToHome.fadeFromworkPost .flyBoxworkPost {
  z-index: 2;
  height: 15vw;
  width: 0vh;
  position: fixed;
  left: 15%;
  background-color: #bed5e1;
  bottom:0;
}
.workPostWrap.fadeToHome .sidebarworkPost {
  z-index: 1;
}
.workPostWrap.fadeToHome .bgSidebarworkPost {
  background-color: #fcfcfc;
  position:absolute;
  left:0; 
  top:0;
  bottom:0;
  height: 100%;
  width: 0;
  z-index: 2;
}
.workPostWrap.fadeToHome .sidebarworkPost {
  position:fixed;
}
.workPostWrap.fadeFromworkPost.fadeToHome .sidebarworkPost_work { z-index: 1; }
.workPostWrap.fadeFromworkPost.fadeToHome .sidebarworkPost_contact { z-index: 2; }














/* ---------------------------------------
* PORTRAIT
* --------------------------------------- */
/* transition From Home / fadeFromHome
* --------------------------------------- */
.portrait .workPostWrap.fadeToHome.fadeFromworkPost .contentworkPost {
  background-color:#f7f6e8;
}
.portrait .workPostWrap.fadeInTransition .bgSidebarworkPost {
  background-color: #f7f6e8;
  position:absolute;
  right:0; 
  top:0;
  bottom:0;
  height: 100%;
  width: 0%;

  display: none;
}
.portrait .workPostWrap.fadeInTransition .sidebarworkPost_work {
  opacity: 0;
  position:absolute;
  right:0; 
  top:0;
  height: 100%;
}
.portrait .workPostWrap.fadeInTransition .sidebarworkPost_contact {
  position:absolute;
  right:0;
  bottom:0;
  height: 15vw;
}
.portrait .workPostWrap.fadeInTransition .sidebarworkPost_contact .animatable {
  opacity: 0;
}
.portrait .workPostWrap.fadeInTransition .contentworkPost .animatable {
  opacity: 0;
}
.portrait .workPostWrap.fadeInTransition .workPostsidebar{
  position:absolute;
  left:15%;
  top:0;
  height: 100%;
}


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

  display: none;
}
.portrait .workPostWrap.fadeToHome .sidebarworkPost {
  z-index: 1;
  position:fixed;
}
.portrait .workPostWrap.fadeToHome .bgSidebarworkPost {
  background-color: #fcfcfc;
  position:absolute;
  left:0; 
  top:0;
  bottom:auto;
  height: 0%;
  width: 100%;
  z-index: 2;
}
.portrait .workPostWrap.fadeFromworkPost.fadeToHome .sidebarworkPost_work { z-index: 1; }
.portrait .workPostWrap.fadeFromworkPost.fadeToHome .sidebarworkPost_contact { z-index: 2; }



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

}


/* transition To workPost / switchBetweenWW
* --------------------------------------- */
.portrait .workPostWrap.fadeFromworkPost.fadeToworkPage .flyBoxworkPost {
  background-color: #f7f6e8;
  z-index: 3;
  width: 100%;
  height: 0%;
  position: fixed;
  bottom: auto;
  left: 0;
  right: 0;
  top: 10%;
}