/* transition From Home / fadeFromHome
* --------------------------------------- */
.homePageWrap.fadeFromHome .flyBoxhomePage {
  z-index: 2;
  height: 15vw!important;
  width: 15%;
  position: fixed;
  right: 0;
}
.homePageWrap.fadeFromHome.fadeToworkPage .flyBoxhomePage {
  background-color: #bed5e1;
  bottom:0;
}
.homePageWrap.fadeFromHome.fadeToworkPost .flyBoxhomePage {
  background-color: #bed5e1;
  bottom:0;
}
.homePageWrap.fadeFromHome.fadeTocontactPage .flyBoxhomePage {
  background-color: #f7f6e8;
  top:0;
}
.homePageWrap.fadeFromHome .sidebarhomePage {
  position:fixed;
}
.homePageWrap.fadeFromHome.fadeToworkPage .sidebarhomePage_work { z-index: 1; }
.homePageWrap.fadeFromHome.fadeToworkPage .sidebarhomePage_contact { z-index: 2; }
.homePageWrap.fadeFromHome.fadeToworkPost .sidebarhomePage_work { z-index: 1; }
.homePageWrap.fadeFromHome.fadeToworkPost .sidebarhomePage_contact { z-index: 2; }
.homePageWrap.fadeFromHome.fadeTocontactPage .sidebarhomePage_work { z-index: 2; }
.homePageWrap.fadeFromHome.fadeTocontactPage .sidebarhomePage_contact { z-index: 1; }




/* transition To Home / fadeToHome
* --------------------------------------- */
.homePageWrap.fadeToHome .flyBoxhomePage {
  background-color: #bed5e1;
  z-index: 2;
  height: 15vw;
  width: 15%;
  position: fixed;
  bottom: 0;
  right: 15%;
}
.homePageWrap.fadeToHome.fadeFromworkPage .flyBoxhomePage {
  background-color: #bed5e1;
  bottom:0;
}
.homePageWrap.fadeToHome.fadeFromworkPage .sidebarhomePage {
  background-color: #f7f6e8;
}
.homePageWrap.fadeToHome.fadeFromcontactPage .flyBoxhomePage {
  background-color: #f7f6e8;
  top:0;
}
.homePageWrap.fadeToHome.fadeFromcontactPage .sidebarhomePage {
  background-color: #bed5e1!important;
}
.homePageWrap.fadeToHome .bgSidebarhomePage {
  background-color: #f7f6e8;
  position:absolute;
  right:0; 
  top:0;
  bottom:0;
  height: 100%;
  width: 0%;
}
.homePageWrap.fadeToHome .sidebarhomePage_work {
  position:absolute;
  right:0;
  top:0;
  height: 50%;
}
.homePageWrap.fadeToHome.fadeFromcontactPage .sidebarhomePage_work {
  position:absolute;
  right:0;
  top:0;
  height: 15vw;
}
.homePageWrap.fadeToHome .sidebarhomePage_contact {
  position:absolute;
  right:0;
  bottom:0;
  height: 15vw;
}
.homePageWrap.fadeToHome .sidebarhomePage_contact .animatable {
  opacity: 0;
}

.homePageWrap.fadeToHome .contenthomePage .animatable {
  opacity: 0;
}
.homePageWrap.fadeToHome .homePagesidebar{
  position:absolute;
  left:15%;
  top:0;
  height: 100%;
}



















/* ---------------------------------------
* PORTRAIT
* --------------------------------------- */

/* transition From Home / fadeFromHome
* --------------------------------------- */
.portrait .homePageWrap.fadeFromHome .flyBoxhomePage {
  z-index: 4;
  width: 10vw;
  height: 0vh;
  position: fixed;
  top: auto;
  bottom: 10%;

  display: none;
}
.portrait .homePageWrap.fadeFromHome.fadeToworkPage .flyBoxhomePage {
  background-color: #bed5e1;
  right:0;
}
.portrait .homePageWrap.fadeFromHome.fadeToworkPost .flyBoxhomePage {
  background-color: #bed5e1;
  right:0;
}
.portrait .homePageWrap.fadeFromHome.fadeTocontactPage .flyBoxhomePage {
  background-color: #f7f6e8;
  left:0;
}
.portrait .homePageWrap.fadeFromHome .sidebarhomePage {
  position:fixed;
}
.portrait .homePageWrap.fadeFromHome.fadeToworkPage .sidebarhomePage_work { z-index: 1; }
.portrait .homePageWrap.fadeFromHome.fadeToworkPage .sidebarhomePage_contact { z-index: 2; }
.portrait .homePageWrap.fadeFromHome.fadeTocontactPage .sidebarhomePage_work { z-index: 2; }
.portrait .homePageWrap.fadeFromHome.fadeTocontactPage .sidebarhomePage_contact { z-index: 1; }




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

  display: none;
}
.portrait .homePageWrap.fadeToHome.fadeFromworkPage .flyBoxhomePage {
  background-color: #bed5e1;
  right:0;
}
.portrait .homePageWrap.fadeToHome.fadeFromworkPage .sidebarhomePage {
  background-color: #f7f6e8;
}
.portrait .homePageWrap.fadeToHome.fadeFromcontactPage .flyBoxhomePage {
  background-color: #f7f6e8;
  left:0;
}
.portrait .homePageWrap.fadeToHome.fadeFromcontactPage .sidebarhomePage {
  background-color: #bed5e1!important;
}
.portrait .homePageWrap.fadeToHome .bgSidebarhomePage {
  background-color: #f7f6e8;
  position:absolute;
  bottom:0; 
  left:0;
  right:0;
  width: 100%;
  height: 0%;
}
.portrait .homePageWrap.fadeToHome .sidebarhomePage_work {
  position:absolute;
  right:0;
  top:0;
  height: 50%;
}
.portrait .homePageWrap.fadeToHome.fadeFromcontactPage .sidebarhomePage_work {
  position: absolute;
  bottom: 0;
  left: 0;
  right: auto;
  width: 0vh;
  height: 100%;
}
.portrait .homePageWrap.fadeToHome.fadeFromworkPage .sidebarhomePage_contact {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 100%;
  left: auto;
}
.portrait .homePageWrap.fadeToHome.fadeFromworkPost .sidebarhomePage_contact {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 100%;
  left: auto;
}
.homePageWrap.fadeToHome .sidebarhomePage_contact .animatable {
  opacity: 0;
}

.homePageWrap.fadeToHome .contenthomePage .animatable {
  opacity: 0;
}
.portrait .homePageWrap.fadeToHome .homePagesidebar{
  position:absolute;
  top:10%;
  right:0;
  width: 100%;
}









/* media
* --------------------------------------- */
@media only screen and (min-width : 480px) { }
@media only screen and (min-width : 576px) { }
@media only screen and (min-width : 768px) { }
@media only screen and (min-width : 992px) { }
@media only screen and (min-width : 1120px) { }