﻿.active_id .loading .work {
	visibility: visible;
	animation: activeid 1s linear;
	display: block;
	overflow: hidden;
}
@keyframes activeid {
    0% {opacity: 0.1; margin-right: -100%; visibility: hidden; display: block;}
    98% {opacity: 1; margin-right: 0px; visibility: visible; display: block;}
    99% {opacity: 1; margin-right: auto; visibility: visible; display: block;}
    100% {opacity: 1; margin-right: auto; visibility: visible; display: block;}
}
.previous_id .loading .work {
	margin-left: -100%;
	visibility: hidden;
	animation: previousid 3s linear;
	display: none;
}
@keyframes previousid {
    0% {opacity: 0.1; margin-left: 0px; display: block; visibility: visible;}
    90% {opacity: 1; margin-left: display: block; visibility: visible;}
    100% {opacity: 1; margin-left: -100%; visibility: hidden;}
}

.next_id .loading .work {
	margin-right: -100%;
	visibility: hidden;
	animation: nextid 3s linear;
	display: none;
}
@keyframes nextid {
    0% {opacity: 0.1; margin-right: 0px; display: block; visibility: visible;}
    90% {opacity: 1; margin-right: 0px; display: block; visibility: visible;}
    100% {opacity: 1; margin-right: -100%; visibility: hidden;}
}
.bahubali_water_falls {
	background: url("../movie/img/bahubali-water-falls-bg-2.jpg") center bottom repeat-y;
	overflow: hidden;
	animation: bahubaliwaterfalls 5s infinite linear;
	position: relative;
}
@keyframes bahubaliwaterfalls {
    0% {background-position: center 0px;}
    100% {background-position: center 3131px;}
}
.bahubali_water_falls_fog {
	width: 100%;
	height: 100%;
	background: url("../movie/img/bahubali-water-falls-fog-1.png") left bottom repeat-x;
	overflow: hidden;
	animation: bahubaliwaterfallsfog 10s infinite linear;
	position: absolute;
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	z-index: 1;
}
@keyframes bahubaliwaterfallsfog {
    0% {opacity: 0.1; background-position: 0px bottom;}
    50% {opacity: 0.5; background-position: -1644px bottom;}
    100% {opacity: 0.1; background-position: -3188px bottom;}
}
.premam_water_bg {
	background: url("../movie/img/premam-water-bg.png") left 300px repeat-x;
	overflow: hidden;
	animation: premamwaterbg 20s infinite linear;
	position: relative;
}
@keyframes premamwaterbg {
    0% {background-position: 0px 300px ;}
    100% {background-position: -1200px 300px;}
}
.faid_in {
	opacity: 1;
	animation: faidin 6s linear;
}
@keyframes faidin {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.faid_in_fast {
	opacity: 1;
	animation: faidinfast 2s linear;
}
@keyframes faidinfast {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.faid_in_bor {
	opacity: 1;
	animation: faidinbor 8s linear;
}
@keyframes faidinbor {
    0% {opacity: 0;}
    60% {opacity: 0;}
    100% {opacity: 1;}
}
.premam_boat {
	width: 100%;
	height: 100%;
	background: url("../movie/img/premam-boat.png") 50% 230px no-repeat;
	overflow: hidden;
	animation: premamboat 18s linear;
	position: absolute;
	-webkit-filter: blur(0.6px);
	-moz-filter: blur(0.6px);
	-o-filter: blur(0.6px);
	-ms-filter: blur(0.6px);
	filter: blur(0.6px);
	z-index: 0;
}
@keyframes premamboat {
    0% {background-position: 300% 230px;}
    100% {background-position: 50% 230px;}
}
.work_content_blk {
	animation: workcontentblk 2s linear;
}
.movie_home .work_content_blk {
	animation: workcontentblk 2s linear !important;
}
@keyframes workcontentblk {
    0% {opacity: 0; bottom: -100%;}
    30% {opacity: 0; bottom: -100%;}
    100% {opacity: 1; bottom: 0px;}
}
.work_content_blk_fast {
	animation: workcontentblkfast 6s linear;
}
.movie_home .work_content_blk_fast {
	animation: workcontentblkfast 2s linear;
}
@keyframes workcontentblkfast {
    0% {opacity: 0; bottom: -100%;}
    50% {opacity: 0; bottom: -100%;}
    100% {opacity: 1; bottom: 0px;}
}
.pathemari_moveimg {
	width: 100%;
	height: 100%;
	background: url("../movie/img/pathemari-move-img.png") left bottom no-repeat;
	overflow: hidden;
	animation: pathemarimoveimg 3s linear;
	position: absolute;
	z-index: 1;
}
@keyframes pathemarimoveimg {
    0% {background-position: -100% bottom;}
    100% {background-position: 0px bottom;}
}
.pathemari_water_bg {
	background: url("../movie/img/pathemari-move-img.png") 0px bottom no-repeat;
	overflow: hidden;
	animation: pathemariwaterbg 3s ease;
	position: relative;
}
@keyframes pathemariwaterbg {
    0% {opacity: 0; background-position: -1225px bottom;}
    100% {opacity: 1; background-position: 0px bottom;}
}
.pathemari_title {
	width: 100%;
	height: 100%;
	background: url("../movie/img/pathemari-title.png") 50% 50px no-repeat;
	overflow: hidden;
	animation: pathemarititle 8s linear;
	position: absolute;
	z-index: 0;
}
@keyframes pathemarititle {
    0% {background-position: 300% 50px;}
    50% {background-position: 300% 50px;}
    100% {background-position: 50% 50px;}
}
.moyteen_water_falls {
	background: url("../movie/img/moyteen-title-img.png") center 220px no-repeat;
	overflow: hidden;
	animation: moyteenwaterfalls 2s linear;
	position: relative;
}
@keyframes moyteenwaterfalls {
    0% {opacity: 0; background-position: center -100%;}
    100% {opacity: 1; background-position: center 220px;}
}
.furious7_flight {
	background: url("../movie/img/furious7-flight.png") -300px -300px no-repeat;
	overflow: hidden;
	animation: furious7flight 5s linear;
	position: relative;
}
@keyframes furious7flight {
    0% {background-position: -300px -300px;}
    30% {background-position: -300px -300px;}
    100% {background-position: 300% 500%;}
}
.furious7_page_id .furious7_left_img.faid_in, .furious7_page_id .furious7_right_img.faid_in {
	animation: furious7faidin 15s linear;
}
@keyframes furious7faidin {
    0% {opacity: 0;}
    30% {opacity: 0;}
    100% {opacity: 1;}
}
.furious7_car_1 {
	animation: furious7car1 7s linear;
}
@keyframes furious7car1 {
    0% {width: 0px;}
    27% {width: 0px; top: 20px; left: 200px;}
    28% {width: 50px; transform: rotate(7deg); filter: blur(0px);}
    50% {width: 519px; top: 100%; left: 30%; transform: rotate(90deg); filter: blur(0px); opacity: 1;}
    56% {width: 1000px; top: 200%; left: 30%; transform: rotate(0deg); filter: blur(1px); opacity: 1;}
    60% {width: 1000px; top: 200%; left: 50%; transform: rotate(0deg); filter: blur(1px); opacity: 0;}
    100% {width: 1000px; top: 200%; left: 50%; transform: rotate(0deg); filter: blur(1px); opacity: 0;}
}
.furious7_car_2 {
	animation: furious7car2 8s linear;
}
@keyframes furious7car2 {
    0% {width: 0px;}
    27% {width: 0px; top: 80px; left: 360px;}
    28% {width: 50px; transform: rotate(7deg); filter: blur(0px);}
    50% {width: 519px; top: 100%; left: 30%; transform: rotate(-90deg); filter: blur(0px); opacity: 1;}
    56% {width: 1000px; top: 300%; left: 50%; transform: rotate(-180deg); filter: blur(1px); opacity: 1;}
    60% {width: 1000px; top: 300%; left: 50%; transform: rotate(0deg); filter: blur(1px); opacity: 0;}
    100% {width: 1000px; top: 300%; left: 50%; transform: rotate(0deg); filter: blur(1px); opacity: 0;}
}
.yearender_logo_plane {
	animation: yearenderlogoplane 1s linear;
}
@keyframes yearenderlogoplane {
    /*0% {width: 20px; top: 181px; left: 240px; transform: rotate(50deg) translate(21px);}
    15% {width: 20px; top: 181px; left: 240px; transform: rotate(-180deg) translate(21px);}
    30% {width: 20px; top: 181px; left: 250px; transform: rotate(-360deg) translate(32px);}
    45% {width: 20px; top: 186px; left: 230px; transform: rotate(-540deg) translate(51px);}
    60% {width: 20px; top: 180px; left: 230px; transform: rotate(-720deg) translate(90px);}
    75% {width: 20px; top: 26px; left: 200px; transform: rotate(-900deg) translate(100);}
    90% {width: 20px; top: 26px; left: 100px; transform: rotate(-1080deg) translate(180);}
    100% {width: 20px; top: 26px; left: 60px; transform: rotate(-1080deg) translate(180);}*/
    
    0% {opacity: 0;}
    0% {width: 50px; top: 140px; left: 180px; transform: rotate(-224deg) translate(158px, 82px); opacity: 0;}
    50% {top: 140px; left: 180px; transform: rotate(-287deg) translate(158px, 82px); opacity: 1;}
    100% {width: 78px; top: 150px; left: 180px; transform: rotate(-352deg) translate(75px, 120px); opacity: 1;}
    
    /*40% {width: 42px; top: 157px; left: 228px; transform: rotate(-360deg) translate(66px);}
    41% {width: 42px; top: 162px; left: 235px; transform: rotate(0deg) translate(65px);}
    60% {width: 52px; top: 142px; left: 195px; transform: rotate(-360deg) translate(65px);}
    61% {width: 52px; top: 142px; left: 195px; transform: rotate(0deg) translate(65px);}
    80% {width: 62px; top: 113px; left: 191px; transform: rotate(-360deg) translate(65px);}
    81%   {width: 78px; top: 0px; left: 0px; transform: rotate(0deg) translate(65px);}
	100%   {width: 78px; top: 0px; left: 0px; transform: rotate(-360deg) translate(150px);}*/
    
}
.movie_1 {
	animation: movie1 3s linear;
}
@keyframes movie1 {
    0% {visibility: hidden;}
    60% {visibility: hidden; top: -1000px; left: -1000px}
    100% {top: 0px; left: 0px;}
}
.movie_2 {
	animation: movie2 2s linear;
}
@keyframes movie2 {
    0% {visibility: hidden;}
    60% {visibility: hidden; top: -100px; left: -1000px}
    100% {visibility: visible; top: 0px; left: 0px;}
}
.movie_3 {
	animation: movie3 3s linear;
}
@keyframes movie3 {
    0% {visibility: hidden;}
    60% {visibility: hidden; top: 0px; left: -1000px}
    100% {visibility: visible; top: 0px; left: 0px;}
}
.movie_4 {
	animation: movie4 2s linear;
}
@keyframes movie4 {
    0% {visibility: hidden;}
    60% {visibility: hidden; bottom: 0px; left: -1000px}
    100% {visibility: visible; bottom: 0px; left: 0px;}
}
.movie_5 {
	animation: movie5 3s linear;
}
@keyframes movie5 {
    0% {visibility: hidden;}
    60% {visibility: hidden; top: -1000px; left: 0px}
    100% {visibility: visible; top: 0px; left: 0px;}
}
.movie_6 {
	animation: movie6 2s linear;
}
@keyframes movie6 {
    0% {visibility: hidden;}
    60% {visibility: hidden; bottom: -1000px; left: -1000px}
    100% {visibility: visible; bottom: 0px; left: 0px;}
}
.movie_7 {
	animation: movie1 3s linear;
}
@keyframes movie7 {
    0% {visibility: hidden;}
    60% {visibility: hidden; bottom: -1000px; left: 0px}
    100% {visibility: visible; bottom: 0px; left: 0px;}
}
.movie_8 {
	animation: movie8 2s linear;
}
@keyframes movie8 {
    0% {visibility: hidden;}
    60% {visibility: hidden; top: -1000px; right: -1000px}
    100% {visibility: visible; top: 0px; right: 0px;}
}
.movie_9 {
	animation: movie9 3s linear;
}
@keyframes movie9 {
    0% {visibility: hidden;}
    60% {visibility: hidden; top: -1000px; right: -1000px}
    100% {visibility: visible; top: 0px; right: 0px;}
}
.movie_10 {
	animation: movie10 2s linear;
}
@keyframes movie10 {
    0% {visibility: hidden;}
    60% {visibility: hidden; top: -1000px; right: -1000px}
    100% {visibility: visible; top: 0px; right: 0px;}
}
.section_title {
	animation: sectiontitle 6s linear;
}
@keyframes sectiontitle {
    0% {opacity: 0;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}



/* Responsive Media Queries */
@media screen and (max-width:1280px)
{
	.pathemari_water_bg {
	    background-position: -120px bottom;
	    animation: pathemariwaterbg 3s ease;
	}
	@keyframes pathemariwaterbg {
	    0% {opacity: 0; background-position: -1225px bottom;}
	    100% {opacity: 1; background-position: -120px bottom;}
	}
}

@media screen and (max-width:800px)
{
	.work_content_blk {
		position: static !important;
		animation: workcontentblk 0s linear !important;
	}
	@keyframes workcontentblk {
		0% {opacity: 1; bottom: 0px; !important}
		100% {opacity: 1; bottom: 0px; !important}
	}
	.work_content_blk_fast  {
		position: static !important;
		animation: workcontentblkfast 0s linear !important;
	}
	@keyframes workcontentblkfast {
		0% {opacity: 1; bottom: 0px; !important}
		100% {opacity: 1; bottom: 0px; !important}
	}
	.premam_boat {
		background-position: 50% 300px !important;
		background-size: 50% auto !important;
		animation: premamboat 10s linear !important;
	}
	@keyframes premamboat {
	    0% {background-position: 300% 300px; !important}
	    100% {background-position: 50% 300px; !important}
	}
	.pathemari_title {
	    background-position: 10% 50% !important;
    }
    .pathemari_right_img {
		width: 50%;
	}
/*}

@media screen and (max-width:800px)
{*/
	.premam_left_img, .premam_right_img {
	    width: 50%;
	}
	.premam_left_img {
	    margin-top: 10px;
	}
	.premam_boat {
		background-position: 50% 420px !important;
		background-size: 80% auto !important;
		animation: premamboat 10s linear !important;
	}
	@keyframes premamboat {
	    0% {background-position: 300% 420px; !important}
	    100% {background-position: 50% 420px; !important}
	}
	.pathemari_title {
	    background-position: 10% 80% !important;
		background-size: 50%;
    }
    .pathemari_water_bg {
		background-size: 160%;
	}
}

@media screen and (max-width:640px)
{
	.pathemari_water_bg {
		background-position: 0px bottom;
		background-size: 100%;
	 	animation: pathemariwaterbg 3s ease;
	}
	@keyframes pathemariwaterbg {
	    0% {opacity: 0; background-position: -1225px bottom;}
	    100% {opacity: 1; background-position: -0px bottom;}
	}
	.pathemari_title {
	    background-position: 10% 60% !important;
		background-size: 50%;
    }
    .active_id .moyteen_page_id .work {
		background-position: center 170px !important;
	}
}

@media screen and (max-width:480px)
{
	.furious7_flight {
		background: url("../movie/img/furious7-flight.png") 360px 300% no-repeat;
		animation: furious7flight 5s linear;
		background-size: 80% !important;
	}
	@keyframes furious7flight {
	    0% {background-position: -300%  -100%; !important}
	    20% {background-position:  -300%  -100%; !important}
	    100% {background-position: 300% 300%; !important}
	}
	.furious7_car_1, .furious7_car_2 {
	    top: 30% !important;
	    left: 30% !important;
	}
	.furious7_left_img {
		width: 52%;
	}
	.furious7_right_img {
		width: 30%;
	}
}

@media screen and (max-width:360px)
{
	.pathemari_title {
	    background-position: 10% 70% !important;
    }
}