@charset "utf-8";
/* CSS Document */

.wrpContainerBobAnim {
	position: relative;
	display: inline-block;
	vertical-align: top;
    width: 530px;
    height: 250px;
	margin: 0px auto 0px 135px;
	padding-top: 30px;
	box-sizing: border-box;
	overflow: hidden;
}

.wrpBobAnimado {
	position: relative;
	width: 75.47%;
   	height: 68.18%;
}

.wrpBobAnimado .cuerpo {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	margin: auto;
	background: url(../images/svgBobAnimado/cuerpo.svg) no-repeat;
	-webkit-animation-name: cuerpo1;
	-webkit-animation-duration: 10s;
	animation-name: cuerpo1;
	animation-duration: 10s;
	animation-fill-mode: forwards;
}

/* Safari chafa 4.0 - 8.0 */
@-webkit-keyframes cuerpo1 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, -8%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    15%  {animation-timing-function: ease;transform:translate(0%, 0%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(100%, 35%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 45%) rotate(10deg); opacity: 1;}
    95%   {animation-timing-function: ease;transform:translate(100%, 0%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
	}

/* Standard cool syntax */
@keyframes cuerpo1 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, -8%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    15%  {animation-timing-function: ease;transform:translate(0%, 0%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(100%, 35%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 45%) rotate(10deg); opacity: 1;}
    95%   {animation-timing-function: ease;transform:translate(100%, 0%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

.wrpBobAnimado .ojos {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	margin: auto;
	background: url(../images/svgBobAnimado/ojos.svg) no-repeat;
	-webkit-animation-name: ojos1;
	-webkit-animation-duration: 10s;
	animation-name: ojos1;
	animation-duration: 10s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes ojos1 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, -15%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    15%  {animation-timing-function: ease;transform:translate(0%, 0%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(100%, 40%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 40%) rotate(10deg); opacity: 1;}
    95%   {animation-timing-function: ease;transform:translate(100%, 0%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

@keyframes ojos1 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, -15%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    15%  {animation-timing-function: ease;transform:translate(0%, 0%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(100%, 40%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 40%) rotate(10deg); opacity: 1;}
    95%   {animation-timing-function: ease;transform:translate(100%, 0%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

.wrpBobAnimado .rostro {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	margin: auto;
	background: url(../images/svgBobAnimado/lentes.svg) no-repeat;
	-webkit-animation-name: rostro1;
	-webkit-animation-duration: 10s;
	animation-name: rostro1;
	animation-duration: 10s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes rostro1 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, -15%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    15%  {animation-timing-function: ease;transform:translate(0%, 0%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(100%, 40%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 40%) rotate(10deg); opacity: 1;}
    95%   {animation-timing-function: ease;transform:translate(100%, 0%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

/* Standard cool syntax */
@keyframes rostro1 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, -15%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    15%  {animation-timing-function: ease;transform:translate(0%, 0%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(100%, 40%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 40%) rotate(10deg); opacity: 1;}
    95%   {animation-timing-function: ease;transform:translate(100%, 0%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

.wrpBobAnimado .b1 {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	margin: auto;
	background: url(../images/svgBobAnimado/b1.svg) no-repeat;
	-webkit-animation-name: brazo1;
	-webkit-animation-duration: 10s;
	animation-name: brazo1;
	animation-duration: 10s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes brazo1 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, -15%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    11%   {animation-timing-function: ease;transform:translate(0%, 0.5%) rotate(0deg); opacity: 1;}
    15%  {animation-timing-function: ease;transform:translate(0%, 1%) rotate(14deg); opacity: 1;}
	19% {animation-timing-function: ease;transform:translate(0%, 0.5%) rotate(0deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(100%, 40%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 40%) rotate(10deg); opacity: 1;}
    95%   {animation-timing-function: ease;transform:translate(100%, 0%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

/* Standard cool syntax */
@keyframes brazo1 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, -15%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    11%   {animation-timing-function: ease;transform:translate(0%, 0.5%) rotate(0deg); opacity: 1;}
    15%  {animation-timing-function: ease;transform:translate(0%, 1%) rotate(14deg); opacity: 1;}
	19% {animation-timing-function: ease;transform:translate(0%, 0.5%) rotate(0deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(100%, 40%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 40%) rotate(10deg); opacity: 1;}
    95%   {animation-timing-function: ease;transform:translate(100%, 0%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

.wrpBobAnimado .b2 {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	display: block;
	margin: auto;
	background: url(../images/svgBobAnimado/b2.svg) no-repeat;
	-webkit-animation-name: brazo2;
	-webkit-animation-duration: 10s;
	animation-name: brazo2;
	animation-duration: 10s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes brazo2 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, -8%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    15%  {animation-timing-function: ease;transform:translate(0%, 0%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(-1%, 0%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(98%, 35%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 45%) rotate(10deg); opacity: 1;}
    95%   {animation-timing-function: ease;transform:translate(100%, 0%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

/* Standard cool syntax */
@keyframes brazo2 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, -8%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
    15%  {animation-timing-function: ease;transform:translate(0%, 0%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(-1%, 0%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(98%, 35%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 45%) rotate(10deg); opacity: 1;}
    95%   {animation-timing-function: ease;transform:translate(100%, 0%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

.wrpBobAnimado .c1 {
	width: 100%;
	height: 100%;
	z-index: -3;
	position: absolute;
	display: block;
	margin: auto;
	background: url(../images/svgBobAnimado/cuad1.svg) no-repeat;
	-webkit-animation-name: c1;
	-webkit-animation-duration: 10s;
	animation-name: c1;
	animation-duration: 10s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes c1 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, 20%) rotate(0deg); opacity: 0;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
    15%  {animation-timing-function: ease;transform:translate(0%, 2%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
    40%   {animation-timing-function: ease;transform:translate(100%, 45%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 47%) rotate(0deg); opacity: 0;}
	75%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 47%) rotate(10deg); opacity: 0;}
    95%   {animation-timing-function: ease;transform:translate(100%, 2%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

/* Standard cool syntax */
@keyframes c1 {
    0%   {animation-timing-function: ease;transform:translate(0%, 100%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, 20%) rotate(0deg); opacity: 0;}
	6% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
    15%  {animation-timing-function: ease;transform:translate(0%, 2%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
    40%   {animation-timing-function: ease;transform:translate(100%, 45%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 47%) rotate(0deg); opacity: 0;}
	75%  {animation-timing-function: ease;transform:translate(100%, 40%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 47%) rotate(10deg); opacity: 0;}
    95%   {animation-timing-function: ease;transform:translate(100%, 2%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

.wrpBobAnimado .c2 {
	width: 100%;
	height: 100%;
	z-index: -4;
	position: absolute;
	display: block;
	margin: auto;
	background: url(../images/svgBobAnimado/cuad2.svg) no-repeat;
	-webkit-animation-name: c2;
	-webkit-animation-duration: 10s;
	animation-name: c2;
	animation-duration: 10s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes c2 {
    0%   {animation-timing-function: ease;transform:translate(0%, 95%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, 22%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 2%) rotate(0deg); opacity: 0;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 5%) rotate(0deg); opacity: 0;}
    15%  {animation-timing-function: ease;transform:translate(0%, 7%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 5%) rotate(0deg); opacity: 0;}
    40%   {animation-timing-function: ease;transform:translate(100%, 40%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 45%) rotate(0deg); opacity: 0;}
	75%  {animation-timing-function: ease;transform:translate(100%, 35%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 42%) rotate(10deg); opacity: 0;}
    95%   {animation-timing-function: ease;transform:translate(100%, 5%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 98%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

/* Standard cool syntax */
@keyframes c2 {
    0%   {animation-timing-function: ease;transform:translate(0%, 95%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, 22%) rotate(0deg); opacity: 1;}
	6% {animation-timing-function: ease;transform:translate(0%, 2%) rotate(0deg); opacity: 0;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 5%) rotate(0deg); opacity: 0;}
    15%  {animation-timing-function: ease;transform:translate(0%, 7%) rotate(10deg); opacity: 1;}
	20% {animation-timing-function: ease;transform:translate(0%, 5%) rotate(0deg); opacity: 0;}
    40%   {animation-timing-function: ease;transform:translate(100%, 40%) rotate(20deg); opacity: 1;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 45%) rotate(0deg); opacity: 0;}
	75%  {animation-timing-function: ease;transform:translate(100%, 35%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 42%) rotate(10deg); opacity: 0;}
    95%   {animation-timing-function: ease;transform:translate(100%, 5%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 98%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

.wrpBobAnimado .c3 {
	width: 100%;
	height: 100%;
	z-index: -5;
	position: absolute;
	display: block;
	margin: auto;
	background: url(../images/svgBobAnimado/cuad3.svg) no-repeat;
	-webkit-animation-name: c3;
	-webkit-animation-duration: 10s;
	animation-name: c3;
	animation-duration: 10s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes c3 {
    0%   {animation-timing-function: ease;transform:translate(0%, 90%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, 27%) rotate(0deg); opacity: 0;}
	6% {animation-timing-function: ease;transform:translate(0%, 7%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 10%) rotate(0deg); opacity: 0;}
    15%  {animation-timing-function: ease;transform:translate(0%, 12%) rotate(10deg); opacity: 0;}
	20% {animation-timing-function: ease;transform:translate(0%, 10%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(100%, 45%) rotate(20deg); opacity: 0;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 48%) rotate(0deg); opacity: 0;}
	75%  {animation-timing-function: ease;transform:translate(100%, 39%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 48%) rotate(10deg); opacity: 0;}
    95%   {animation-timing-function: ease;transform:translate(100%, 9%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

/* Standard cool syntax */
@keyframes c3 {
    0%   {animation-timing-function: ease;transform:translate(0%, 90%) rotate(0deg); opacity: 0;}
    4%  {animation-timing-function: ease;transform:translate(0%, 27%) rotate(0deg); opacity: 0;}
	6% {animation-timing-function: ease;transform:translate(0%, 7%) rotate(0deg); opacity: 1;}
	/*aparece bob*/
    10%   {animation-timing-function: ease;transform:translate(0%, 10%) rotate(0deg); opacity: 0;}
    15%  {animation-timing-function: ease;transform:translate(0%, 12%) rotate(10deg); opacity: 0;}
	20% {animation-timing-function: ease;transform:translate(0%, 10%) rotate(0deg); opacity: 1;}
    40%   {animation-timing-function: ease;transform:translate(100%, 45%) rotate(20deg); opacity: 0;}
	/*bob avanza y aparece logo*/
    55%  {animation-timing-function: ease;transform:translate(100%, 48%) rotate(0deg); opacity: 0;}
	75%  {animation-timing-function: ease;transform:translate(100%, 39%) rotate(0deg); opacity: 1;}
	90% {animation-timing-function: ease;transform:translate(100%, 48%) rotate(10deg); opacity: 0;}
    95%   {animation-timing-function: ease;transform:translate(100%, 9%) rotate(0deg); opacity: 1;}
	99% {animation-timing-function: ease;transform:translate(100%, 100%) rotate(0deg); opacity: 0;}
	100% {animation-timing-function: ease;transform:translate(0%, 0%) rotate(0deg); opacity: 0;}
}

.wrpBobAnimado .factory{
	width: 100%;
	height: 100%;
	z-index: -6;
	position: absolute;
	background: url(../images/svgBobAnimado/logo-digital-thinkers.svg) no-repeat;
	-webkit-animation-name: log;
	-webkit-animation-duration: 10s;
	animation-name: log;
	animation-duration: 10s;
	animation-fill-mode: forwards;
}

@-webkit-keyframes log {
	0% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
	19% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
	20% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
	35% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
	100% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
}

/*Standard cool syntax*/
@keyframes log {
	0% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
	19% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
	20% {clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
	35% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
	100% {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
}

/*******************************************************************************************************************************************
														configuracion de las interfaces - responsivo
*******************************************************************************************************************************************/
@media (max-width: 800px) {
	.wrpContainerBobAnim {
	    width: 400px;
	    height: 188.68px;
		margin: 0px auto 0px 100px;
		padding-top: 20px;
	}
}

@media (max-width: 550px) {
	.wrpContainerBobAnim {
	    width: 250px;
	    height: 118px;
		margin: 0px auto 0px 60px;
		padding-top: 12px;
	}
}

@media (max-width: 400px) {
	.wrpContainerBobAnim {
	    width: 200px;
	    height: 94.32px;
		margin: 0px auto 0px 50px;
		padding-top: 10px;
	}
}