@font-face {
    font-family: FloodStd;
    src: url(AkzidenzGrotesk-Bold.otf);
}
@font-face {
    font-family: AkzidenzGrotesk-Bold;
    src: url(FloodStd.otf);
}
@font-face {
    font-family: GillSans;
    src: url(GillSans.ttc);
}


.noselect{
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  cursor: default;
}

body{
  margin: 0px;
  padding: 0px;
}
a{
  color: white;
  text-decoration: none;
  border:1px dashed teal;
  margin: 3px 0px;
  cursor: pointer;
}
a[disabled='true'] {
    pointer-events: none;
}

#application{
  position: fixed;
  top: 0px;
  bottom: 00px;
  left: 0px;
  right: 0px;
  background-color: black;
}


header div {
  border:1px solid red;
  height:  7vh;
  white-space: nowrap;
  position: absolute;
  padding: 0px 1vw ;
}
header div.btn_language{
  top: 0px;
  left:0px;
  text-align: left;

}
header div.btn_soc_contact{
  top: 0px;
  right: 13vw;
}
header div.btn_soc_donate{
  top: 0px;
  right: 10vw;
}
header div.btn_soc{
  top: 0px;
  right: 0px;
  text-align: right;
}
header div.btn_nav{
  text-align: center;
  top: 0px;
  left:50%;
  transform: translateX(-50% );
}

header{
/*  display: flex;                  /* establish flex container */
/*  flex-direction: row;            /* default value; can be omitted */
/*  flex-wrap: nowrap;              /* default value; can be omitted */
/*  justify-content: space-between; /* switched from default (flex-start, see below) */

  border:1px solid blue;
  z-index: 99999;
  background-color: transparent;
  position: absolute;
  top: 0px;
  left: 0px; right: 0px;
  height: 7vh;
}

header div.btn_nav a{
  width: 10vmin; height: 5vmin;
  border: 1px solid green;
  margin-right: 1.5vmin;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
header div.btn_nav a:first-child{
  width: 5vmin !important;
  height: 5vmin !important;
  background-size: 50% !important;
}
header div.btn_soc a{
  display: inline-block;
  margin:0.15vmin;
  margin-top: 1.75vmin;
  width: 3vmin; height: 3vmin;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
header div.btn_soc_contact button,header div.btn_soc_donate button{
  display: inline-block;
  margin:0.15vmin;
  margin-top: 1.3vmin;
  width: 3vmin; height: 3vmin;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  cursor: pointer;
  border-style: none;
}
header div.btn_language button{
  display: inline-block;
  width: 10vmin; height: 5vmin;
  margin-right: 0.5vmin;
  margin-top: 1vmin;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  cursor: pointer;
  border-style: none;
}

header div button.selecten{
  background-image: url('../img/icons/en/icon english yellow.png');
}
header div button.selectfr{
  background-image: url('../img/icons/en/icon français yellow.png');
}

header div button.notselecten{
  background-image: url('../img/icons/en/icon english white.png');
}
header div button.notselectfr{
  background-image: url('../img/icons/en/icon français white.png');
}

header div button.notselecten:hover{
  background-image: url('../img/icons/en/icon english yellow.png');
}
header div button.notselectfr:hover  {
  background-image: url('../img/icons/en/icon français yellow.png');
}


header div a.selectmenu{
  background-image: url('../img/icons/en/camera yellow.png');
}
header div a.selectabout[hreflang='en']{
  background-image: url('../img/icons/en/about yellow.png');
}
header div a.selectteam[hreflang='en']{
  background-image: url('../img/icons/en/team yellow.png');
}
header div a.selectsupport[hreflang='en']{
  background-image: url('../img/icons/en/support yellow.png');
}
header div a.selectabout[hreflang='fr']{
  background-image: url('../img/icons/fr/about yellow 2.png');
}
header div a.selectteam[hreflang='fr']{
  background-image: url('../img/icons/fr/team yellow 2.png');
}
header div a.selectsupport[hreflang='fr']{
  background-image: url('../img/icons/fr/support yellow 2.png');
}

header div a.notselectmenu{
  background-image: url('../img/icons/en/camera white.png');
}
header div a.notselectabout[hreflang='en']{
  background-image: url('../img/icons/en/about white.png');
  background-size: 70% !important;

}
header div a.notselectteam[hreflang='en']{
  background-image: url('../img/icons/en/team white.png');
}
header div a.notselectsupport[hreflang='en']{
  background-image: url('../img/icons/en/support white.png');
  background-size: 90% !important;

}
header div a.notselectabout[hreflang='fr']{
  background-image: url('../img/icons/fr/about white.png');
  background-size: 90% !important;

}
header div a.notselectteam[hreflang='fr']{
  background-image: url('../img/icons/fr/team white.png');
  background-size: 90% !important;

}
header div a.notselectsupport[hreflang='fr']{
  background-image: url('../img/icons/fr/support white.png');
  background-size: 90% !important;
}

header div a.notselectmenu:hover{
  background-image: url('../img/icons/en/camera yellow.png');
}
header div a.notselectabout[hreflang='en']:hover{
  background-image: url('../img/icons/en/about yellow 2.png');
}
header div a.notselectteam[hreflang='en']:hover{
  background-image: url('../img/icons/en/team yellow 2.png');
}
header div a.notselectsupport[hreflang='en']:hover{
  background-image: url('../img/icons/en/support yellow 2.png');
}
header div a.notselectabout[hreflang='fr']:hover{
  background-image: url('../img/icons/fr/about yellow.png');
}
header div a.notselectteam[hreflang='fr']:hover{
  background-image: url('../img/icons/fr/team yellow.png');
}
header div a.notselectsupport[hreflang='fr']:hover{
  background-image: url('../img/icons/fr/support yellow.png');
}


header div button#soc_contact{
  background-image: url('../img/icons/en/enveloppe white.png');
  width: 4vmin; height: 4vmin;
}
header div button#soc_donate{
  background-image: url('../img/icons/en/dollar white.png');
  width: 4vmin; height: 4vmin;
}
header div a#soc_fb{
  background-image: url('../img/icons/en/facebook white.png');
}
header div a#soc_insta{
  background-image: url('../img/icons/en/instagram white.png');
}
header div a#soc_you{
  background-image: url('../img/icons/en/youtube white.png');
}
header div a#soc_vim{
  background-image: url('../img/icons/en/vimeo white.png');
}

header div button#soc_contact:hover{
  background-image: url('../img/icons/en/enveloppe yellow.png');
  transform: scale(1.5);
}
header div button#soc_donate:hover{
  background-image: url('../img/icons/en/dollar yellow.png');
  transform: scale(1.5);
}
header div a#soc_fb:hover{
  background-image: url('../img/icons/en/facebook yellow.png');
}
header div a#soc_insta:hover{
  background-image: url('../img/icons/en/instagram yellow.png');
}
header div a#soc_you:hover{
  background-image: url('../img/icons/en/youtube yellow.png');
}
header div a#soc_vim:hover{
  background-image: url('../img/icons/en/vimeo yellow.png');
}

div.background_page{
  position: absolute;
  top: 0px;  left: 0px; bottom: 0px; right: 0px;
  z-index: -99999;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform-origin: center;
  transform: scale(1.1);
}
@-webkit-keyframes bluring{
  from{
    filter: blur(0px);
    transform-origin: center;
    transform: scale(1.1);
  }
  to{
    filter: blur(6px);
    transform-origin: center;
    transform: scale(1);
  }
}
@-webkit-keyframes debluring{
  from{
    filter: blur(6px);
    transform-origin: center;
    transform: scale(1);
  }
  to{
    filter: blur(0px);
    transform-origin: center;
    transform: scale(1.1);
  }
}
div.background_blur{
  animation: bluring 0.5s ease-in-out ;
  animation-fill-mode: forwards;
}
div.background_deblur{
  animation: debluring 0.75s ease-in-out ;
  animation-fill-mode: forwards;
}

div.video-background{
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
}

div#about_background{
  background-image: url('../img/background/about.jpg');
}
div#team_background{
  background-image: url('../img/background/team.jpg');
}
div#women_background{
  background-image: url('../img/background/women.jpg');
}
div#support_background{
  background-image: url('../img/background/support.jpg');
}
div#supporters_background{
  background-image: url('../img/background/supporters.jpg');
}

div#about_textbox{
  border:1px solid orange;
  position: relative;
  top: 15vh;
  left: 15vw;
  width: 35vw;
}

div#about_textbox p{
  color:white;
  font-size: 1.75vmin;
  font-weight: lighter;
  line-height: 2.5vmin;
  font-family: GillSans;
  text-align: justify;
}

div#about_textbox p span.highlight{
  font-size: 2vmin;
  font-family: AkzidenzGrotesk-Bold;
}

div#team_textbox{
  border:1px solid orange;
  position: absolute;
  top: 15%;
  right: 70%;
  width: 13vw;
}

div#team_textbox p{
  color:white;
  font-size: 1.75vmin;
  font-weight: lighter;
  line-height: 2.5vmin;
  font-family: GillSans;
  text-align: justify;
}
div#coco_box{
  border:1px solid yellow;
  position: absolute;
  top: 15%;
  left:35%;
  width: 12vw;
}
div#coco_box .pic{
  border:1px dashed green;
  margin: 0px;
  margin-bottom: 10px;
  width: 12vw;
  height: 12vw;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
div#coco_box #pic_coco .pic{
  background-image: url('../img/team/coco.png');
}
div#coco_box #pic_jacki .pic{
  background-image: url('../img/team/jackie.png');
}

div#team_box{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;

  overflow-x: scroll;

  border:1px solid red;
  position: absolute;
  right: 0px; bottom: 15%;
  top:10%; left:50%;
}
div#team_box::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
div#team_box::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
}

div#team_box .teammembers{
  border:1px dashed red;
  width: 23%;
  margin-bottom: 10px;
  height: 20vh;
}
div#team_box .teammembers .pic{
  border:1px dashed green;
  margin: auto;
  margin-bottom: 5px;
  width: 60%;
  height: auto;
}
div#team_box .teammembers .pic img{
  width: 100%;
  height: auto;
}


figure#support_arrow{
  border: 1px solid teal;
  position: relative;
  left:95%;margin-top: -8vh;
  height: 10vmin; width: 10vmin;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../img/icons/en/arrow alone.png');
}

div#support_box{
  border:1px solid orange;
  position: absolute;
  top: 15%;
  left: 60%;
  width: 30vw;
  text-align: center;
}

div#support_box p{
  color:white;
  font-size: 1.75vmin;
  font-weight: lighter;
  line-height: 2.5vmin;
  font-family: GillSans;
  text-align: center;
}

div#support_box a{
  display: inline-block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
div#support_box img{
  margin: auto;
  display: inline-block;
  height: 7vh; width: auto;
}
div.logos{
  border:1px solid blue;
  text-align: center;
  position: relative;
  top: 15%;
}
div.logos img{
  height: 5vh;
  width: auto;
  margin: 1%;
  display: inline-block;
}
div.supporter_list {
  border:1px solid blue;
  position: relative;
  top: 15%;
  width: 60vw;
  margin: auto;
  margin-bottom: 3vh;
}
div.supporter_list p{
  color:white;
  font-family: GillSans;
  font-size: 1.25vmin;
  line-height: 1.25vmin;
  column-count: 4;
  text-align: center;
  column-gap: 20px;
}
div.special_thanks{
  border:1px solid blue;
  position: relative;
  top: 15%;
  width: 45vw;
  margin: auto;
  margin-bottom: 5vh;
}
div.filmmakers{
  border:1px solid blue;
  position: relative;
  top: 15%;
  width: 45vw;
  margin: auto;
}
div.special_thanks p,div.filmmakers p{
  color:white;
  font-family: GillSans;
  font-size: 1.25vmin;
  font-size: 1.2vmin;
  text-align: justify;
  margin: 0px;
}
div.special_thanks p span.highlighter,div.filmmakers p span.highlighter{
  color:white;
  font-size: 3vmin;
  font-family: AkzidenzGrotesk-Bold;
}
div.special_thanks p span.highlight,div.filmmakers p span.highlight{
  color:white;
  font-size: 1.4vmin;
  font-family: AkzidenzGrotesk-Bold;
}
div.special_thanks p:first-child,div.filmmakers p:first-child{
  text-align: center;
}


a.nav_btn{
  display: block;
  height: 6vmin; width: 6vmin;
  position: absolute;
  bottom: 20px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
a#nav_women{
  right: 20px;
  background-image: url('../img/icons/en/fleche_right_white.png');
}
a#nav_women:hover{
  background-image: url('../img/icons/en/fleche_right_yellow.png');
}

a#nav_back{
  left: 20px;
  background-image: url('../img/icons/en/fleche_right_white.png');
  transform: rotate(180deg);
}
a#nav_back:hover{
  background-image: url('../img/icons/en/fleche_right_yellow.png');
  transform: rotate(180deg);
}

a#nav_team{
  left: 50%;
  transform: translateX(-50%);
  background-image: url('../img/icons/en/fleche_bas_white.png');
}
a#nav_team:hover{
  background-image: url('../img/icons/en/fleche_bas_yellow.png');
}

a#nav_moreteam{
  right: 20px;
  background-image: url('../img/icons/en/fleche_right_white.png');
}
a#nav_moreteam:hover{
  background-image: url('../img/icons/en/fleche_right_yellow.png');
}
a#nav_support{
  left: 50%;
  background-image: url('../img/icons/en/fleche_bas_white.png');
  transform: translateX(-50%);
}
a#nav_support:hover{
  background-image: url('../img/icons/en/fleche_bas_yellow.png');
}
a#nav_about{
  left: 50%;
  background-image: url('../img/icons/en/fleche_bas_white.png');
  transform: translateX(-50%);
}
a#nav_about:hover{
  background-image: url('../img/icons/en/fleche_bas_yellow.png');
}
a#nav_supporters{
  right: 20px;
  background-image: url('../img/icons/en/fleche_right_white.png');
}
a#nav_supporters:hover{
  background-image: url('../img/icons/en/fleche_right_yellow.png');
}
a#nav_skip_trailer{
  right: 4vw;
  width: 15vmin !important;
  background-image: url('../img/icons/en/skip trailer blanc.png');
}
a#nav_skip_trailer:hover{
  background-image: url('../img/icons/en/skip trailer jaune.png');
}
a#nav_watch_trailer{
  right: 4vw;
  width: 15vmin !important;
  background-image: url('../img/icons/en/watch trailer white.png');
}
a#nav_watch_trailer:hover{
  background-image: url('../img/icons/en/watch trailer yellow.png');
}
a#nav_mute{
  right: 1vw;
  width: 3vmin !important;
  background-image: url('../img/icons/en/icon sound white.png');
}
a#nav_mute:hover{
  background-image: url('../img/icons/en/icon sound yellow.png');
}

a.en_help{
  left: 50%;
  width: 17vw !important;
  background-size: 80% !important;
  background-image: url('../img/icons/en/help here white.png');
  transform: translateX(-50%);
}
a.en_help:hover{
  background-image: url('../img/icons/en/help here yellow.png');
}

a.fr_help{
  left: 50%;
  width: 17vw !important;
  background-size: 80% !important;
  background-image: url('../img/icons/fr/help here white.png');
  transform: translateX(-50%);
}
a.fr_help:hover{
  background-image: url('../img/icons/fr/help here yellow.png');
}

div#support_box a{
  width: 100%;
  height: 7vmin;
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

}
div#support_box a.en_finance{
  background-image: url('../img/icons/en/financial support.png');
}
div#support_box a.en_support{
  background-image: url('../img/icons/en/follow us.png');
}
div#support_box a.en_spread{
  background-image: url('../img/icons/en/spread the word.png');
}
div#support_box a.fr_finance{
  background-image: url('../img/icons/fr/financial support.png');
}
div#support_box a.fr_support{
  background-image: url('../img/icons/fr/follow us.png');
}
div#support_box a.fr_spread{
  background-image: url('../img/icons/fr/spread the word.png');
}


/*#########''MODAL BOXES''************************************************/
div.hidecontact{
  display:none;
}
div.hidedonate{
  display:none;
}
@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.hidecontrole{
  animation: fadeout 0.3s ease-in;
  animation-fill-mode: forwards;
}
.showcontrole{
  animation: fadein 0.3s ease-in;
  animation-fill-mode: forwards;
}


div#donate_box{
  background-color: white;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

  border: 5px solid red;

  position: fixed;
  top:50%;left: 50%;
  transform: translate(-50%, -50%);

  height: 40vmin;
  width: 35vmin;

  z-index: 99999;

}
div#contact_box{
  background-image: url('../img/modals/CONTACT_plain.jpg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

  border: 5px solid red;

  position: fixed;
  top:50%;left: 50%;
  transform: translate(-50%, -50%);

  height: 53vmin;
  width: 83vmin;

  z-index: 99999;

}
div#contact_box p#header{
  position: absolute;
  top:3%;  left: 9%;
  display: block;
  border: 1px solid pink;
}

div#contact_box p#header span:first-child{
  font-size: 2vmin;
  font-family: AkzidenzGrotesk-Bold;
}
div#contact_box p#header span:last-child{
  font-size: 1vmin;
  font-family: AkzidenzGrotesk-Bold;
}

div#contact_box div.email_box{
  position: absolute;
  border: 1px solid pink;

  bottom: 16%;
  left: 7%;
}
div#contact_box div.email_box label{
  font-size: 2vmin;
  font-family: AkzidenzGrotesk-Bold;
  border: 1px solid blue;
  margin: 0px;
  position: relative;
  top:-0.25vmin;
  margin-right: 0.5vmin;
  padding: 0px;
}

div#contact_box div.email_box input{
  font-size: 2vmin;
  font-family: GillSans;
  border: 1px solid blue;
  margin: 0px;
  width: 60%;
  padding: 0px;
  background: none;
}

div#contact_box textarea{
  font-family: GillSans;
  font-size: 2vmin;
  line-height: 2.6vmin;
  background-color: transparent;
  border:1px dashed green;
  position: absolute;
  top:14%;
  width: 39%; height: 52%;
  left: 9%;
  overflow-y: scroll;
}
div#contact_box textarea::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
div#contact_box textarea::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
}


div#contact_box a{
  display: inline-block;
  width: 3vmin; height: 3vmin;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0px;
  margin: 0.1vmin;
}

div#contact_box div.env_soc{
  position: absolute;
  bottom: 7%;
  left: 9%;
  padding: 0px;

}

div#contact_box a#env_fb{
  background-image: url('../img/modals/facebook.png');
}
div#contact_box a#env_insta{
  background-image: url('../img/modals/instagram.png');
}
div#contact_box a#env_you{
  background-image: url('../img/modals/youtube.png');
}
div#contact_box a#env_vim{
  background-image: url('../img/modals/vimeo.png');
}

div#contact_box button#send_envol{
  background-image: url('../img/modals/croix white.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border: 1px solid black;
  background-color: transparent;
  position: absolute;
  bottom: 10%; left: 30%;
  height: 10%;
  width: 17%;
  cursor: pointer;
}

button#close{
  background-image: url('../img/modals/croix white.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  background-color: transparent;
  position: absolute;
  top:-5%; right: -5%;
  height: 10%;
  width: 10%;
}

button#close:hover{
  background-image: url('../img/modals/croix yellow.png');
  cursor: pointer;
}


/*#########''HEADER''************************************************/
h1{
  display:none;
}

h2{
  font-family: FloodStd;
  color:white;
  white-space: nowrap;
  font-size: 3vmin;

}
h3{
  font-size: 1.3vmin;
  color: white;
  margin: 0px; padding: 0px;
  text-align: center;
  text-transform: uppercase;
  font-family: FloodStd;
  white-space: pre
}
h4{
  font-size: 1.25vmin;
  margin: 0px; padding: 0px;
  margin-bottom: 20px;
  color: white;
  text-align: center;
  font-family: FloodStd;
}
h5{
  font-size: 1.25vmin;
  color: white;
  margin: 0px; padding: 0px 10px;
  text-align: center;
  text-transform: uppercase;
  font-family: FloodStd;

}
h6{
  font-size: 1.2vmin;
  margin: 0px; padding: 0px;
  color: white;
  text-align: center;
  font-family: FloodStd;
}



/*#########''NG VIEW''************************************************/
.page{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 3;
    overflow:hidden;

}

/*#########''TRANISITIONS''************************************************/


.from-bottom.ng-enter,.from-bottom.ng-leave,.from-bottom.ng-enter-active,.from-bottom.ng-leave-active,.to-top.ng-enter,.to-top.ng-leave,.to-top.ng-enter-active,.to-top.ng-leave-active,.from-top.ng-enter,.from-top.ng-leave,.from-top.ng-enter-active,.from-top.ng-leave-active,.to-bottom.ng-enter,.to-bottom.ng-leave,.to-bottom.ng-enter-active,.to-bottom.ng-leave-active,.to-left.ng-enter,.to-left.ng-leave,.to-left.ng-enter-active{
		transition: all 1.25s cubic-bezier(.47,.81,.69,1);
		z-index: 1;
}
.to-left.ng-leave-active,.to-right.ng-enter,.to-right.ng-leave,.to-right.ng-enter-active,.to-right.ng-leave-active,.from-right.ng-enter,.from-right.ng-leave,.from-right.ng-enter-active,.from-right.ng-leave-active,.from-left.ng-enter,.from-left.ng-leave,.from-left.ng-enter-active,.from-left.ng-leave-active{
		transition: all 1.25s cubic-bezier(.47,.81,.69,1);
		z-index: 1;
}

.from-bottom.ng-enter {

}
.from-bottom.ng-enter-active {
}
.from-bottom.ng-leave {
  transform: translateY(0);
}
.from-bottom.ng-leave-active {
  transform: translateY(-100%);
}


.to-top.ng-enter {
  transform: translateY(100%);
}
.to-top.ng-enter-active {
  transform: translateY(0);
}
.to-top.ng-leave {

}
.to-top.ng-leave-active {
}


.from-top.ng-enter {
  transform: translateY(-100%);
}
.from-top.ng-enter-active {
  transform: translateY(0);
}
.from-top.ng-leave {
}
.from-top.ng-leave-active {
}


.to-bottom.ng-enter {
  transform: translateY(0);
}
.to-bottom.ng-enter-active {
  transform: translateY(100%);
}
.to-bottom.ng-leave {
	transform: translateY(0);
}
.to-bottom.ng-leave-active {
	transform: translateY(100%);
}


.to-left.ng-enter {

}
.to-left.ng-enter-active {

}
.to-left.ng-leave {
  transform: translateX(0);
}
.to-left.ng-leave-active {
  transform: translateX(-100%);
}


.to-right.ng-enter {

}
.to-right.ng-enter-active {

}
.to-right.ng-leave {
  transform: translateX(0);
}
.to-right.ng-leave-active {
  transform: translateX(100%);
}


.from-right.ng-enter {
  transform: translateX(100%);
}
.from-right.ng-enter-active {
  transform: translateX(0);
}
.from-right.ng-leave {
}
.from-right.ng-leave-active {
}


.from-left.ng-enter {
  transform: translateX(-100%);
}
.from-left.ng-enter-active {
  transform: translateX(0);
}
.from-left.ng-leave {
}
.from-left.ng-leave-active {
}