/* 
	V2 - 19/7/2018
	CIPLA - 2018
	Design: Logos Comunicaciones
	www.logoscomunicaciones.com
*/



.banner .titulo-desc{
	left: 50%;
	opacity: 1.00;

	-moz-animation-name: txt1_anim;
	-moz-animation-duration: 1.10s;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: stop;

	-webkit-animation-name: txt1_anim;
	-webkit-animation-duration: 1.10s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;

	-o-animation-name: txt1_anim;
	-o-animation-duration: 1.10s;
	-o-animation-timing-function: ease-in;
	-o-animation-iteration-count: stop;

	-ms-animation-name: txt1_anim;
	-ms-animation-duration: 1.10s;
	-ms-animation-timing-function: ease-in;
	-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(  100% ); opacity: 0.00;}
     30% { -webkit-transform: translateY(  100% ); opacity: 0.00;}
     50% { -webkit-transform: translateY(   60% ); opacity: 0.00;}
      to { -webkit-transform: translateY(    0% ); opacity: 1.00;}
}

@-moz-keyframes txt1_anim {
	from { -moz-transform: translateY(  100% ); opacity: 0.00;}
     30% { -moz-transform: translateY(  100% ); opacity: 0.00;}
     50% { -moz-transform: translateY(   60% ); opacity: 0.00;}
      to { -moz-transform: translateY(    0% ); opacity: 1.00;}
}

@-ms-keyframes txt1_anim {
	from { -ms-transform: translateY(  100% ); opacity: 0.00;}
     30% { -ms-transform: translateY(  100% ); opacity: 0.00;}
     50% { -ms-transform: translateY(   60% ); opacity: 0.00;}
      to { -ms-transform: translateY(    0% ); opacity: 1.00;}
}

@-o-keyframes txt1_anim {
	from { -o-transform: translateY(  100% ); opacity: 0.00;}
     30% { -o-transform: translateY(  100% ); opacity: 0.00;}
     50% { -o-transform: translateY(   60% ); opacity: 0.00;}
      to { -o-transform: translateY(    0% ); opacity: 1.00;}
}

@keyframes txt1_anim {
	from { transform: translateY(  100% ); opacity: 0.00;}
	 30% { transform: translateY(  100% ); opacity: 0.00;}
	 50% { transform: translateY(   60% ); opacity: 0.00;}
      to { transform: translateY(    0% ); opacity: 1.00;}
}



.banner .flex-active-slide .desc{
	bottom: 220px;
	left: 25px;
	opacity: 1.00;

	-moz-animation-name: txt2_anim;
	-moz-animation-duration: 1.10s;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: stop;

	-webkit-animation-name: txt2_anim;
	-webkit-animation-duration: 1.10s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;

	-o-animation-name: txt2_anim;
	-o-animation-duration: 1.10s;
	-o-animation-timing-function: ease-in;
	-o-animation-iteration-count: stop;

	-ms-animation-name: txt2_anim;
	-ms-animation-duration: 1.10s;
	-ms-animation-timing-function: ease-in;
	-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: translateY(  100% ); opacity: 0.00;}
     30% { -webkit-transform: translateY(  100% ); opacity: 0.00;}
     50% { -webkit-transform: translateY(   60% ); opacity: 0.00;}
      to { -webkit-transform: translateY(    0% ); opacity: 1.00;}
}

@-moz-keyframes txt2_anim {
	from { -moz-transform: translateY(  100% ); opacity: 0.00;}
     30% { -moz-transform: translateY(  100% ); opacity: 0.00;}
     50% { -moz-transform: translateY(   60% ); opacity: 0.00;}
      to { -moz-transform: translateY(    0% ); opacity: 1.00;}
}

@-ms-keyframes txt2_anim {
	from { -ms-transform: translateY(  100% ); opacity: 0.00;}
     30% { -ms-transform: translateY(  100% ); opacity: 0.00;}
     50% { -ms-transform: translateY(   60% ); opacity: 0.00;}
      to { -ms-transform: translateY(    0% ); opacity: 1.00;}
}

@-o-keyframes txt2_anim {
	from { -o-transform: translateY(  100% ); opacity: 0.00;}
     30% { -o-transform: translateY(  100% ); opacity: 0.00;}
     50% { -o-transform: translateY(   60% ); opacity: 0.00;}
      to { -o-transform: translateY(    0% ); opacity: 1.00;}
}

@keyframes txt2_anim {
	from { transform: translateY(  100% ); opacity: 0.00;}
	 30% { transform: translateY(  100% ); opacity: 0.00;}
	 50% { transform: translateY(   60% ); opacity: 0.00;}
      to { transform: translateY(    0% ); opacity: 1.00;}
}






.banner .flex-active-slide .botones{
	top: 480px;
	left: 90px;
	opacity: 1.00;

	-moz-animation-name: btn_anim;
	-moz-animation-duration: 1.70s;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: stop;

	-webkit-animation-name: btn_anim;
	-webkit-animation-duration: 1.70s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: stop;

	-o-animation-name: btn_anim;
	-o-animation-duration: 1.70s;
	-o-animation-timing-function: ease-in;
	-o-animation-iteration-count: stop;

	-ms-animation-name: btn_anim;
	-ms-animation-duration: 1.70s;
	-ms-animation-timing-function: ease-in;
	-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 btn_anim {
	from { opacity: 0.00;}
     30% { opacity: 0.00;}
     50% { opacity: 0.00;}
      to { opacity: 1.00;}
}

@-moz-keyframes btn_anim {
	from { opacity: 0.00;}
     30% { opacity: 0.00;}
     50% { opacity: 0.00;}
      to { opacity: 1.00;}
}

@-ms-keyframes btn_anim {
	from { opacity: 0.00;}
     30% { opacity: 0.00;}
     50% { opacity: 0.00;}
      to { opacity: 1.00;}
}

@-o-keyframes btn_anim {
	from { opacity: 0.00;}
     30% { opacity: 0.00;}
     50% { opacity: 0.00;}
      to { opacity: 1.00;}
}

@keyframes btn_anim {
	from { opacity: 0.00;}
	 30% { opacity: 0.00;}
	 50% { opacity: 0.00;}
      to { opacity: 1.00;}
}





/* ---------------------------- MEDIA QUERIES ---------------------------- */



@media screen and (min-width:1351px) and (max-width:1440px){




    .banner .titulo-desc{
        bottom: 360px;
        left: 50%;
    }

    
	.banner .flex-active-slide .botones{
        top: 410px;
        left: 90px;
    }


	
}


/* ---------------------------- TABLET V ---------------------------- */

@media screen and (min-width:581px) and (max-width:920px){






	.banner .titulo-desc{
		bottom: 150px;
		left: 50%;
	}



	
}



/* ---------------------------- MOBILE H ---------------------------- */



@media screen and (min-width:321px) and (max-width:580px){




	.banner .titulo-desc{
		left: 50%;
	}



	
}





@media screen and (max-width: 320px) {




	.banner .titulo-desc{
		left: 50%;
	}


	
}