Animation breaks on different screen resolutions

Animation breaks on different screen resolutions

Hi all.
The code below is expected to fade out the overlay and animate left property of two divs which are captions.
Well, this code works like a charm at 1920x1080. It works as well in my tablet 7inchs (where overing is replaced by tapping). And the same happens in the 1024x768 res!
But in my laptop at 1366x768 two things happen:
 
  mg_caption moves in only for 1/3 of its width
  mg_caption2 doesn't appear at all

And the same happen in following resolutions:
1280x720 (mg_caption shows only a smallest portion)
1280x768 (mg_caption shows only a smallest portion)
1360x768

How to fix that?
Many thanks in advance

HTML: 
  1. <div class="col-lg-4 no-pad">
 <div class ="kenburns">
   <img class="img-responsive" src="<?php  echo base_url( 'assets/images/WESTMINSTER_SINGLE.jpg' )  ?>" />
    <div class="overlay"></div>
    <div class="mg_caption">Westminster Single</div>
    <div class="mg_caption2">Lorem ipsum dedicat aliquod</div>
 </div>
</div>
JS: 
  1. $('.overlay').on('mouseenter',function(){
	$(this).fadeOut('slow');
	$(this).closest('.kenburns').css({
		"z-index": "11000",
		border: "inset 2px #000;"
	});
	$(this).siblings('.mg_caption').animate({
		left: "400px"
	}, {
		duration:400, 
		queue:false,
		easing:'easeOutQuad'
	});
	$(this).siblings('.mg_caption2').animate({
		left:"0px"
	}, {
		duration:500, 
		queue:false,
		easing:'easeOutQuad'
	});
});
$('.kenburns').on('mouseleave', function(){
	$(this).children('.mg_caption2').animate({
		left: "-700px"
	}, {
		duration:500, 
		queue:false,
		easing:'easeOutQuad'
	});
	$(this).children('.mg_caption').animate({
		left: "2000px"
	}, {
		duration:1000, 
		queue:false,
		easing:'easeOutQuad'//,
	});
	$(this).children('.overlay').fadeIn('slow');
});
CSS: 
  1. .img-responsive{
	width: 100%;
}
.kenburns {
	overflow: hidden;
	position: relative;
	float: left;
}
.kenburns img {
	transition-duration: 20s;
	transform: scale(1.0);
	transform-origin: 50% 50%;
}
.kenburns img:hover {
	transform: scale(1.5);
	transform-origin: 50% 0%;
}
.mg_caption{
	position:absolute;
	top:30px;
	background: rgba(100,59,15,1.0);
	background: #FABC59;
	color: #B19D87;
	background: #000;
	color: #fff;
	width: 300px;
	height:50px;
	padding:10px;
	font-size:1.2em;
	display:block;
	left:2000px;
	z-index:12000;
}
.mg_caption2{
	position:absolute;
	top:330px;
	background: rgba(100,59,15,1.0);
	background: #FABC59;
	color: #B19D87;
	background: #000;
	color: #fff;
	width: 600px;
	height:50px;
	padding:10px;
	font-size:1.2em;
	display:block;
	left:-700px;
	z-index:12000;
	text-align: center;
}
.overlay{
	background: rgba(100,59,15,0.5);
	width:100%;
	height: 100%;
	position: absolute;
	display: block;
	top:0;
	left:0;
	opacity:1;
}