

.banner .titulo{
	z-index: 10;
	top: 220px;
	left: 5%;
	position: absolute;
	opacity: 1.00;

	-moz-animation-name: txt1_anim;
	-moz-animation-duration: 3.20s;
	-moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-animation-iteration-count: stop;

	-webkit-animation-name: txt1_anim;
	-webkit-animation-duration: 3.20s;
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-animation-iteration-count: stop;

	-o-animation-name: txt1_anim;
	-o-animation-duration: 3.20s;
	-o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-o-animation-iteration-count: stop;

	-ms-animation-name: txt1_anim;
	-ms-animation-duration: 3.20s;
	-ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-ms-animation-iteration-count: stop;

	-webkit-transform-origin: center;
	-moz-transform-origin: center;
	-o-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
}

@-webkit-keyframes txt1_anim {
	from { -webkit-transform: translateY(  90% ); opacity: 0.00;}
     60% { -webkit-transform: translateY(   60% ); opacity: 0.00;}
      to { -webkit-transform: translateY(    0% ); opacity: 1.00;}
}

@-moz-keyframes txt1_anim {
	from { -moz-transform: translateY(  90% ); opacity: 0.00;}
     60% { -moz-transform: translateY(   60% ); opacity: 0.00;}
      to { -moz-transform: translateY(    0% ); opacity: 1.00;}
}

@-ms-keyframes txt1_anim {
	from { -ms-transform: translateY(  90% ); opacity: 0.00;}
     60% { -ms-transform: translateY(   60% ); opacity: 0.00;}
      to { -ms-transform: translateY(    0% ); opacity: 1.00;}
}

@-o-keyframes txt1_anim {
	from { -o-transform: translateY(  90% ); opacity: 0.00;}
     60% { -o-transform: translateY(   60% ); opacity: 0.00;}
      to { -o-transform: translateY(    0% ); opacity: 1.00;}
}

@keyframes txt1_anim {
	from { transform: translateY(  90% ); opacity: 0.00;}
	 60% { transform: translateY(   60% ); opacity: 0.00;}
      to { transform: translateY(    0% ); opacity: 1.00;}
}





.banner .frontlayer{

	-moz-animation-name: txt2_anim;
	-moz-animation-duration: 2.80s;
	-moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-animation-iteration-count: stop;

	-webkit-animation-name: txt2_anim;
	-webkit-animation-duration: 2.80s;
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-animation-iteration-count: stop;

	-o-animation-name: txt2_anim;
	-o-animation-duration: 2.80s;
	-o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-o-animation-iteration-count: stop;

	-ms-animation-name: txt2_anim;
	-ms-animation-duration: 2.80s;
	-ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-ms-animation-iteration-count: stop;

	-webkit-transform-origin: center;
	-moz-transform-origin: center;
	-o-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
}

@-webkit-keyframes txt2_anim {
	from { -webkit-transform: translateX(  20% );}
      to { -webkit-transform: translateX(   0% );}
}

@-moz-keyframes txt2_anim {
	from { -moz-transform: translateX(  20% );}
      to { -moz-transform: translateX(   0% );}
}

@-ms-keyframes txt2_anim {
	from { -ms-transform: translateX(  20% );}
      to { -ms-transform: translateX(   0% );}
}

@-o-keyframes txt2_anim {
	from { -o-transform: translateX(  20% );}
      to { -o-transform: translateX(   0% );}
}

@keyframes txt2_anim {
	from { transform: translateX(  20% );}
      to { transform: translateX(   0% );}
}





.bglayer{
	mask-image: url(../lib/ux_txt.webp);
  	mask-repeat: space;
  	mask-size: 100% auto;
	-webkit-mask-image: url(../lib/ux_txt.webp);
  	-webkit-mask-repeat: space;
  	-webkit-mask-size: 100% auto;
	background: linear-gradient(127deg, rgba(238,117,36,0.00), rgba(0,0,0,0.20), rgba(238,117,36,0.00));
	background-size: 600% 600%;
	
    -webkit-transition: background-color 20s cubic-bezier(.54,.2,1,.4);
    -moz-transition: background-color 20s cubic-bezier(.54,.2,1,.4);
    -o-transition: background-color 20s cubic-bezier(.54,.2,1,.4);
    -ms-transition: background-color 20s cubic-bezier(.54,.2,1,.4);
    transition: background-color 20s cubic-bezier(.54,.2,1,.4);
}
#efect.scrolled {
    background: linear-gradient(127deg, rgba(238,117,36,0.30), rgba(0,0,0,0.10), rgba(238,117,36,0.30));
    background-size: 60% 10%;
}
/*
@-webkit-keyframes AnimationName {
    0%{background-position:4% 0%}
    50%{background-position:55% 100%}
    100%{background-position:4% 0%}
}

@-moz-keyframes AnimationName {
    0%{background-position:4% 0%}
    50%{background-position:55% 100%}
    100%{background-position:4% 0%}
}

@keyframes AnimationName {
    0%{background-position:4% 0%}
    50%{background-position:55% 100%}
    100%{background-position:4% 0%}
}
*/

#pageslide{
	animation-name: menu-dsp_anim;
	animation-duration: 0.7s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}

@keyframes menu-dsp_anim{
	from { height:   0%; }
      to { height: 100%; }
}


/* item 1 */
.cntMs nav ul li:nth-child(1){
	opacity: 0.00;
	animation-name: menu-itmp_anim;
	animation-duration: 2.0s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop !important;
	transform-origin: center;

	-webkit-animation-name: menu-itmp_anim;
	-webkit-animation-duration: 1.6s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: stop !important;
	-webkit-transform-origin: center;
}
@keyframes menu-itmp_anim{
	from { opacity: 1.00; }
     30% { opacity: 1.00; }
      to { opacity: 0.00; }
}
@-webkit-keyframes menu-itmp_anim{
	from { opacity: 1.00; }
     30% { opacity: 1.00; }
      to { opacity: 0.00; }
}

.modal-open .cntMs nav ul li:nth-child(1){
	opacity: 1.00;
	animation-name: menu-itmo_anim;
	animation-duration: 1.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: menu-itmo_anim;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes menu-itmo_anim{
	from { opacity: 0.00; }
     80% { opacity: 0.00; }
      to { opacity: 1.00; }
}
@-webkit-keyframes menu-itmo_anim{
	from { opacity: 0.00; }
     80% { opacity: 0.00; }
      to { opacity: 1.00; }
}
/* item 1 */

/* item 2 */
.cntMs nav ul li:nth-child(2){
	opacity: 0.00;
	animation-name: menu-itmp2_anim;
	animation-duration: 1.8s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmp2_anim{
	from { opacity: 1.00; }
     27% { opacity: 1.00; }
      to { opacity: 0.00; }
}

.modal-open .cntMs nav ul li:nth-child(2){
	opacity: 1.00;
	animation-name: menu-itmo2_anim;
	animation-duration: 1.2s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmo2_anim{
	from { opacity: 0.00; }
     45% { opacity: 0.00; }
      to { opacity: 1.00; }
}
/* item 2 */

/* item 3 */
.cntMs nav ul li:nth-child(3){
	opacity: 0.00;
	animation-name: menu-itmp3_anim;
	animation-duration: 1.6s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmp3_anim{
	from { opacity: 1.00; }
     24% { opacity: 1.00; }
      to { opacity: 0.00; }
}

.modal-open .cntMs nav ul li:nth-child(3){
	opacity: 1.00;
	animation-name: menu-itmo3_anim;
	animation-duration: 1.4s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmo3_anim{
	from { opacity: 0.00; }
     50% { opacity: 0.00; }
      to { opacity: 1.00; }
}
/* item 3 */

/* item 4 */
.cntMs nav ul li:nth-child(4){
	opacity: 0.00;
	animation-name: menu-itmp4_anim;
	animation-duration: 1.4s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmp4_anim{
	from { opacity: 1.00; }
     21% { opacity: 1.00; }
      to { opacity: 0.00; }
}

.modal-open .cntMs nav ul li:nth-child(4){
	opacity: 1.00;
	animation-name: menu-itmo4_anim;
	animation-duration: 1.6s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmo4_anim{
	from { opacity: 0.00; }
     55% { opacity: 0.00; }
      to { opacity: 1.00; }
}
/* item 4 */

/* item 5 */
.cntMs nav ul li:nth-child(5){
	opacity: 0.00;
	animation-name: menu-itmp5_anim;
	animation-duration: 1.2s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmp5_anim{
	from { opacity: 1.00; }
     19% { opacity: 1.00; }
      to { opacity: 0.00; }
}

.modal-open .cntMs nav ul li:nth-child(5){
	opacity: 1.00;
	animation-name: menu-itmo5_anim;
	animation-duration: 1.8s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmo5_anim{
	from { opacity: 0.00; }
     60% { opacity: 0.00; }
      to { opacity: 1.00; }
}

/* item 5 */

/* item 6 */
.cntMs nav ul li:nth-child(6){
	opacity: 0.00;
	animation-name: menu-itmp6_anim;
	animation-duration: 1.0s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmp6_anim{
	from { opacity: 1.00; }
     16% { opacity: 1.00; }
      to { opacity: 0.00; }
}

.modal-open .cntMs nav ul li:nth-child(6){
	opacity: 1.00;
	animation-name: menu-itmo6_anim;
	animation-duration: 2.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmo6_anim{
	from { opacity: 0.00; }
     65% { opacity: 0.00; }
      to { opacity: 1.00; }
}

/* item 6 */

/* item 7 */

.cntMs nav ul li:nth-child(7){
	opacity: 0.00;
	animation-name: menu-itmp7_anim;
	animation-duration: 1.0s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmp7_anim{
	from { opacity: 1.00; }
     13% { opacity: 1.00; }
      to { opacity: 0.00; }
}

.modal-open .cntMs nav ul li:nth-child(7){
	opacity: 1.00;
	animation-name: menu-itmo7_anim;
	animation-duration: 2.2s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmo7_anim{
	from { opacity: 0.00; }
     70% { opacity: 0.00; }
      to { opacity: 1.00; }
}

/* item 7 */

/* item 8 */

.cntMs nav ul li:nth-child(8){
	opacity: 0.00;
	animation-name: menu-itmp8_anim;
	animation-duration: 1.0s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmp8_anim{
	from { opacity: 1.00; }
     10% { opacity: 1.00; }
      to { opacity: 0.00; }
}

.modal-open .cntMs nav ul li:nth-child(8){
	opacity: 1.00;
	animation-name: menu-itmo8_anim;
	animation-duration: 2.4s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itmo8_anim{
	from { opacity: 0.00; }
     75% { opacity: 0.00; }
      to { opacity: 1.00; }
}

/* item 8 */

.modal-open .cntMs nav ul li:nth-child(9){
	animation-name: menu-itm9_anim;
	animation-duration: 2.6s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes menu-itm9_anim{
	from { opacity: 0.00; }
     80% { opacity: 0.00; }
      to { opacity: 1.00; }
}



/* BOTÓN BANNER */

.bord-a{
	animation-name: br-top_anim;
	animation-duration: 3.10s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
	
	-webkit-animation-name: br-top_anim;
	-webkit-animation-duration: 3.10s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes br-top_anim{
	from { width:     0; }
	 80% { width:     0; }
      to { width: 360px; }
}
@-webkit-keyframes br-top_anim{
	from { width:     0; }
	 80% { width:     0; }
      to { width: 360px; }
}


.bord-a:before{
	animation-name: br-rg_anim;
	animation-duration: 3.40s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: br-rg_anim;
	-webkit-animation-duration: 3.40s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes br-rg_anim{
	from { height:     0; }
	 90% { height:     0; }
      to { height:  58px; }
}
@-webkit-keyframes br-rg_anim{
	from { height:     0; }
	 90% { height:     0; }
      to { height:  58px; }
}


.bord-a:after{
	animation-name: br-btm_anim;
	animation-duration: 3.90s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: br-btm_anim;
	-webkit-animation-duration: 3.90s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes br-btm_anim{
	from { width:     0; }
	 85% { width:     0; }
      to { width: 360px; }
}
@-webkit-keyframes br-btm_anim{
	from { width:     0; }
	 85% { width:     0; }
      to { width: 360px; }
}


.btn01:before{
	animation-name: br-lft_anim;
	animation-duration: 4.20s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: br-lft_anim;
	-webkit-animation-duration: 4.20s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes br-lft_anim{
	from { height:     0; }
	 90% { height:     0; }
      to { height:  58px; }
}
@-webkit-keyframes br-lft_anim{
	from { height:     0; }
	 90% { height:     0; }
      to { height:  58px; }
}


.txt-btn{
	animation-name: txt-btn_anim;
	animation-duration: 4.80s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: txt-btn_anim;
	-webkit-animation-duration: 4.80s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}

@keyframes txt-btn_anim {
	from { opacity: 0.00; }
	 80% { opacity: 0.00; }
      to { opacity: 1.00; }
}
@-webkit-keyframes txt-btn_anim {
	from { opacity: 0.00; }
	 80% { opacity: 0.00; }
      to { opacity: 1.00; }
}




/* BOTÓN BANNER */


.cntMs .elm1{
	animation-name: elm1p_anim;
	animation-duration: 2.4s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm1p_anim;
	-webkit-animation-duration: 2.4s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm1p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 55% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}
@-webkit-keyframes elm1p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 55% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}


.modal-open .cntMs .elm1{
	animation-name: elm1_anim;
	animation-duration: 1.0s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm1_anim;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm1_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 40% { opacity: 1.00; transform: translateX(    140% );}
	  to { opacity: 1.00; transform: translateX(      0% );}
}
@-webkit-keyframes elm1_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 40% { opacity: 1.00; transform: translateX(    140% );}
	  to { opacity: 1.00; transform: translateX(      0% );}
}



.cntMs .elm2{
	animation-name: elm2p_anim;
	animation-duration: 2.2s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm2p_anim;
	-webkit-animation-duration: 2.2s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm2p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 50% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}
@-webkit-keyframes elm2p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 50% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}

.modal-open .cntMs .elm2{
	animation-name: elm2_anim;
	animation-duration: 1.05s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm2_anim;
	-webkit-animation-duration: 1.05s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm2_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 50% { opacity: 1.00; transform: translateX(    140% );}
	  to { opacity: 1.00; transform: translateX(      0% );}
}
@-webkit-keyframes elm2_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 50% { opacity: 1.00; transform: translateX(    140% );}
	  to { opacity: 1.00; transform: translateX(      0% );}
}



.cntMs .elm3{
	animation-name: elm3p_anim;
	animation-duration: 2.0s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm3p_anim;
	-webkit-animation-duration: 2.0s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm3p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 50% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}
@-webkit-keyframes elm3p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 50% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}

.modal-open .cntMs .elm3{
	animation-name: elm3_anim;
	animation-duration: 1.10s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm3_anim;
	-webkit-animation-duration: 1.10s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm3_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 60% { opacity: 1.00; transform: translateX(    140% );}
	  to { opacity: 1.00; transform: translateX(      0% );}
}
@-webkit-keyframes elm3_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 60% { opacity: 1.00; transform: translateX(    140% );}
	  to { opacity: 1.00; transform: translateX(      0% );}
}



.cntMs .elm4{
	animation-name: elm4p_anim;
	animation-duration: 1.8s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm4p_anim;
	-webkit-animation-duration: 1.8s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm4p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 50% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}
@-webkit-keyframes elm4p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 50% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}

.modal-open .cntMs .elm4{
	animation-name: elm4_anim;
	animation-duration: 1.15s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm4_anim;
	-webkit-animation-duration: 1.15s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm4_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 70% { opacity: 1.00; transform: translateX(   140% );}
	  to { opacity: 1.00; transform: translateX(     0% );}
}
@-webkit-keyframes elm4_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 70% { opacity: 1.00; transform: translateX(   140% );}
	  to { opacity: 1.00; transform: translateX(     0% );}
}


.cntMs .elm5{
	animation-name: elm5p_anim;
	animation-duration: 1.6s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm5p_anim;
	-webkit-animation-duration: 1.6s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm5p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 40% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}
@-webkit-keyframes elm5p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 40% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}

.modal-open .cntMs .elm5{
	animation-name: elm5_anim;
	animation-duration: 1.20s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm5_anim;
	-webkit-animation-duration: 1.20s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm5_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 80% { opacity: 1.00; transform: translateX(    140% );}
	  to { opacity: 1.00; transform: translateX(      0% );}
}
@-webkit-keyframes elm5_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 80% { opacity: 1.00; transform: translateX(    140% );}
	  to { opacity: 1.00; transform: translateX(      0% );}
}


.cntMs .elm6{
	animation-name: elm6p_anim;
	animation-duration: 1.4s;
	animation-timing-function: ease-out;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm6p_anim;
	-webkit-animation-duration: 1.4s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm6p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 40% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}
@-webkit-keyframes elm6p_anim{
	from { opacity: 1.00; transform: translateX(   0% );}
	 40% { opacity: 1.00; transform: translateX(   0% );}
	  to { opacity: 1.00; transform: translateX( 200% );}
}

.modal-open .cntMs .elm6{
	animation-name: elm6_anim;
	animation-duration: 1.25s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: elm6_anim;
	-webkit-animation-duration: 1.25s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
@keyframes elm6_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 90% { opacity: 1.00; transform: translateX(   140% );}
	  to { opacity: 1.00; transform: translateX(     0% );}
}
@-webkit-keyframes elm6_anim{
	from { opacity: 0.00; transform: translateX(   200% );}
	 90% { opacity: 1.00; transform: translateX(   140% );}
	  to { opacity: 1.00; transform: translateX(     0% );}
}




ul.liBlog li:hover .bxMsk .btn-vp .bord-btn-vp,
ul.liProd li:hover .bxMsk .btn-vp .bord-btn-vp/*,
ul.liProd li .bxMsk .aos-animate .bord-btn-vp*/{
	animation-name: btn-vp-top_anim;
	animation-duration: 0.50s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes btn-vp-top_anim{
	from { width:     0; }
	 30% { width:     0; }
      to { width: 180px; }
}

ul.liBlog li:hover .bxMsk .btn-vp .bord-btn-vp:before,
ul.liProd li:hover .bxMsk .btn-vp .bord-btn-vp:before/*,
ul.liProd li .bxMsk .aos-animate .bord-btn-vp:before*/{
	animation-name: btn-vp-rg_anim;
	animation-duration: 0.70s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes btn-vp-rg_anim{
	from { height:     0; }
	 80% { height:     0; }
      to { height:  38px; }
}

ul.liBlog li:hover .bxMsk .btn-vp .bord-btn-vp:after,
ul.liProd li:hover .bxMsk .btn-vp .bord-btn-vp:after/*,
ul.liProd li .bxMsk .aos-animate .bord-btn-vp:after*/{
	animation-name: btn-vp-btm_anim;
	animation-duration: 1.20s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes btn-vp-btm_anim{
	from { width:     0; }
	 70% { width:     0; }
      to { width: 180px; }
}


ul.liBlog li:hover .bxMsk .btn-vp:before,
ul.liProd li:hover .bxMsk .btn-vp:before/*,
ul.liProd li .bxMsk .aos-animate .btn-vp:before*/{
	animation-name: btn-vp-lft_anim;
	animation-duration: 1.40s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}
@keyframes btn-vp-lft_anim{
	from { height:     0; }
	 90% { height:     0; }
      to { height:  38px; }
}


ul.liBlog li:hover .bxMsk .btn-vp .txt-btn-vp,
ul.liProd li:hover .bxMsk .btn-vp .txt-btn-vp{
	animation-name: txt-btn_anim;
	animation-duration: 1.50s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
}



ul.liProd li:hover .bxPvw img:nth-child(1){
	animation-name: img-vw1_anim;
	animation-duration: 10.00s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	transform-origin: center;
}
@keyframes img-vw1_anim {
	from { opacity: 0.00; }
	 20% { opacity: 0.00; }
	 30% { opacity: 1.00; }
	 35% { opacity: 1.00; }
      to { opacity: 0.00; }
}


ul.liProd li:hover .bxPvw img:nth-child(2){
	animation-name: img-vw2_anim;
	animation-duration: 10.00s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	transform-origin: center;
}
@keyframes img-vw2_anim {
	from { opacity: 0.00; }
	 30% { opacity: 0.00; }
	 40% { opacity: 1.00; }
	 45% { opacity: 1.00; }
      to { opacity: 0.00; }
}

ul.liProd li:hover .bxPvw img:nth-child(3){
	animation-name: img-vw3_anim;
	animation-duration: 10.00s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	transform-origin: center;
}
@keyframes img-vw3_anim {
	from { opacity: 0.00; }
	 40% { opacity: 0.00; }
	 50% { opacity: 1.00; }
	 55% { opacity: 1.00; }
      to { opacity: 0.00; }
}
ul.liProd li:hover .bxPvw img:nth-child(4){
	animation-name: img-vw4_anim;
	animation-duration: 10.00s;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	transform-origin: center;
}
@keyframes img-vw4_anim {
	from { opacity: 0.00; }
	 50% { opacity: 0.00; }
	 60% { opacity: 1.00; }
	 65% { opacity: 1.00; }
	 75% { opacity: 0.00; }
      to { opacity: 0.00; }
}
ul.liProd li:hover .bxPvw img:nth-child(5){
	z-index: 14px;
}
ul.liProd li:hover .bxPvw img:nth-child(6){
	z-index: 15px;
}



@media screen and (min-width:1191px) and (max-width:1440px){




	.banner .titulo{
		top: 130px;
		left: 5%;
	}



	
}




/* ---------------------------- TABLET H ---------------------------- */

@media screen and (min-width:921px) and (max-width:1190px){




	.bglayer{
		background: linear-gradient(127deg, rgba(238,117,36,0.00), rgba(0,0,0,0.20), rgba(238,117,36,0.00));
		background-size: 100% 100%;
	}
	#efect.scrolled {
	    background-size: 120% 120%;
	}




	
}




/* ---------------------------- TABLET V ---------------------------- */

@media screen and (min-width:581px) and (max-width:920px){




	.banner .titulo{
		top: 160px;
		left: 4%;
	}




	.bglayer{
		background: linear-gradient(127deg, rgba(238,117,36,0.00), rgba(0,0,0,0.20), rgba(238,117,36,0.00));
		background-size: 100% 100%;
	}
	#efect.scrolled {
	    background-size: 120% 120%;
	}






}



@media screen and (min-width:321px) and (max-width:815px) and (orientation: landscape) { 

	.banner .titulo{
		top: 70px;
		left: 5%;
	}

}


/* ---------------------------- MOBILE H ---------------------------- */


@media screen and (min-width:321px) and (max-width:580px){



	.banner .titulo{
		top: 40px;
		left: 5%;
	}



.bord-a{
	animation-name: br-top_anim;
	animation-duration: 3.10s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
	
	-webkit-animation-name: br-top_anim;
	-webkit-animation-duration: 3.10s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
	@keyframes br-top_anim{
		from { width:     0; }
		 80% { width:     0; }
	      to { width: 200px; }
	}
	@-webkit-keyframes br-top_anim{
		from { width:     0; }
		 80% { width:     0; }
	      to { width: 200px; }
	}



.bord-a:before{
	animation-name: br-rg_anim;
	animation-duration: 3.40s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: br-rg_anim;
	-webkit-animation-duration: 3.40s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}

	@keyframes br-rg_anim{
		from { height:     0; }
		 90% { height:     0; }
	      to { height:  35px; }
	}
	@-webkit-keyframes br-rg_anim{
		from { height:     0; }
		 90% { height:     0; }
	      to { height:  35px; }
	}




.bord-a:after{
	animation-name: br-btm_anim;
	animation-duration: 3.90s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: br-btm_anim;
	-webkit-animation-duration: 3.90s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
	
	@keyframes br-btm_anim{
		from { width:     0; }
		 85% { width:     0; }
	      to { width: 200px; }
	}
	@-webkit-keyframes br-btm_anim{
		from { width:     0; }
		 85% { width:     0; }
	      to { width: 200px; }
	}



	.btn01:before{
		animation-name: br-lft_anim;
		animation-duration: 4.20s;
		animation-timing-function: ease-in;
		animation-iteration-count: stop;
		transform-origin: center;

		-webkit-animation-name: br-lft_anim;
		-webkit-animation-duration: 4.20s;
		-webkit-animation-timing-function: ease-in;
		-webkit-animation-iteration-count: stop;
		-webkit-transform-origin: center;
	}

	@keyframes br-lft_anim{
		from { height:     0; }
		 90% { height:     0; }
	      to { height:  35px; }
	}
	@-webkit-keyframes br-lft_anim{
		from { height:     0; }
		 90% { height:     0; }
	      to { height:  35px; }
	}









}


/* ---------------------------- MOBILE V ---------------------------- */



@media screen and (max-width: 320px) {


	.banner .titulo{
		top: 25px;
		left: 5%;
	}

.bord-a{
	animation-name: br-top_anim;
	animation-duration: 3.10s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;
	
	-webkit-animation-name: br-top_anim;
	-webkit-animation-duration: 3.10s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
	@keyframes br-top_anim{
		from { width:     0; }
		 80% { width:     0; }
	      to { width: 200px; }
	}
	@-webkit-keyframes br-top_anim{
		from { width:     0; }
		 80% { width:     0; }
	      to { width: 200px; }
	}



.bord-a:before{
	animation-name: br-rg_anim;
	animation-duration: 3.40s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: br-rg_anim;
	-webkit-animation-duration: 3.40s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}

	@keyframes br-rg_anim{
		from { height:     0; }
		 90% { height:     0; }
	      to { height:  35px; }
	}
	@-webkit-keyframes br-rg_anim{
		from { height:     0; }
		 90% { height:     0; }
	      to { height:  35px; }
	}




.bord-a:after{
	animation-name: br-btm_anim;
	animation-duration: 3.90s;
	animation-timing-function: ease-in;
	animation-iteration-count: stop;
	transform-origin: center;

	-webkit-animation-name: br-btm_anim;
	-webkit-animation-duration: 3.90s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;
	-webkit-transform-origin: center;
}
	
	@keyframes br-btm_anim{
		from { width:     0; }
		 85% { width:     0; }
	      to { width: 200px; }
	}
	@-webkit-keyframes br-btm_anim{
		from { width:     0; }
		 85% { width:     0; }
	      to { width: 200px; }
	}



	.btn01:before{
		animation-name: br-lft_anim;
		animation-duration: 4.20s;
		animation-timing-function: ease-in;
		animation-iteration-count: stop;
		transform-origin: center;

		-webkit-animation-name: br-lft_anim;
		-webkit-animation-duration: 4.20s;
		-webkit-animation-timing-function: ease-in;
		-webkit-animation-iteration-count: stop;
		-webkit-transform-origin: center;
	}

	@keyframes br-lft_anim{
		from { height:     0; }
		 90% { height:     0; }
	      to { height:  35px; }
	}
	@-webkit-keyframes br-lft_anim{
		from { height:     0; }
		 90% { height:     0; }
	      to { height:  35px; }
	}





}




