header,
#banner
{ transition: background-color 0.3s ease; }





/*MENU MOBILE*/
#openMobileMenu { position:relative; cursor:pointer; }

#openMobileMenu span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #000;
  border-radius: 5px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .20s ease-in-out;
  -moz-transition: .20s ease-in-out;
  -o-transition: .20s ease-in-out;
  transition: .25s ease-in-out;
}

#openMobileMenu span:nth-child(1) {
  top: 0px;
}

#openMobileMenu span:nth-child(2) {
  top: 14px;
}

#openMobileMenu span:nth-child(3) {
  top: 28px;
}

.active #openMobileMenu span:nth-child(1) {
  top: 14px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.active #openMobileMenu span:nth-child(2) {
  opacity: 0;
  left: -30px;
  -webkit-transition: .16s ease-in-out;
  -moz-transition: .16s ease-in-out;
  -o-transition: .16s ease-in-out;
  transition: .16s ease-in-out;
}

.active #openMobileMenu span:nth-child(3) {
  top: 14px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}













.animate1 {

	-webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.animate1.ng-enter {
  animation: enter_animation 0.5s linear;
  -webkit-animation: enter_animation 0.5s linear;
}

@keyframes enter_animation {
  from { opacity:0; }
  to { opacity:1; }
}

@-webkit-keyframes enter_animation {
  from { opacity:0; }
  to { opacity:1; }
}



.animate1.ng-leave {
  animation: my_fade_animation 0.5s linear;
  -webkit-animation: my_fade_animation 0.5s linear;
}

@keyframes my_fade_animation {
  from { opacity:1; }
  to { opacity:0; }
}

@-webkit-keyframes my_fade_animation {
  from { opacity:1; }
  to { opacity:0; }
}




/*ANIMAÇÃO DA NAVEGAÇÃO*/

#masterUI[ui-view].ng-enter{
	-webkit-animation-delay: 0.15s; /* Chrome, Safari, Opera */
    animation-delay: 0.15s;
	/*height:0;*/
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}


#masterUI[ui-view].ng-leave{
	-webkit-animation-duration: 0;
	animation-duration: 0;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}


@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(15px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/*@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}*/


#masterUI[ui-view].ng-enter {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

#masterUI[ui-view].ng-enter-active {
  opacity:1;
}

#masterUI[ui-view].ng-leave {
/*  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;*/
}

#masterUI[ui-view].ng-leave-active {
  opacity:0;
}