/* make keyframes that tell the start state and the end state of our object */
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
 opacity:0;  /* make things invisible upon start */
 -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
 -moz-animation:fadeIn ease-in 1;
 animation:fadeIn ease-in 1;
 
 -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
 -moz-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
 
 -webkit-animation-duration:1s;
 -moz-animation-duration:1s;
 animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
 

 
/*---make a basic box ---*/
.boxfadein{
width: 100%;
height: 30%;
position: absolute;
top:80px;
background-image:url("../imm/goldword.png");
background-size:33% 100%;
background-repeat:no-repeat;
background-position:center;

}
.bannerpage {
	position:relative;
width:100%;
height:25%;
background-image:url("../imm/company_final.PNG");
background-size:100% 100%;
}

@media screen and (max-width : 420px){
	.bannerpage {
		background-image:url("../imm/banner1.PNG");
		background-size:100% 100%;
	}
	
}
@media screen and (max-width : 420px){
.boxfadein{

top:100px;
background-image:url("../imm/goldword.png");
background-size:48% 100%;
background-repeat:no-repeat;
background-position:center;

}
	
}


/*-----Effect for DeSCRIPTION Index Page*/
			.indexeffect {
				height:auto!important;
				min-height:100px;
                width: 100%;
                margin:30px auto;
				position:relative;

            }
            .indexeffect h4 {
                text-transform: uppercase;
                
            }
            .indexeffect h4, .indexeffect p {
                transition: all 0.8s ease;
            }
            .indexeffect.hidden h4 {
                opacity: 0;
                transform: translate3d(0, 0, 400px) rotateY(-40deg);
            }
            .indexeffect.hidden p {
                opacity: 0;
                transform: translate3d(0, 0, 400px) rotateY(40deg);
            }
/*End Code*/