/*technology Begin*/


.topBanner_technology{
	height: 240px;

	background-image: url('../media/banner_technology.jpg');

    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    
    
}



.technologyContainer {
	position: relative;
	z-index: 10;
	
   
    background-image: url('../media/t_banner_img_1.png'), url('../media/t_banner_img_2.png');
   
    background-repeat: no-repeat;	
    background-position-x: calc(100% + 500px), -750px;
    background-position-y: 400px, 1000px;
    background-size: auto 35%, auto 35%;	
    transition:background-position 3s ease;
}

.technologyContainer.show{
	background-position-x: 100%, -250px;
}

.bottomBanner_technology{
	height: 430px;

	background-image: url('../media/technology_bottom.jpg');  
	
    background-attachment: fixed;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;	
}

.technologyContainer::before, 
.technologyContainer::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 50px;
  bottom: -25px;
  z-index: -1;
  background-color: #FFFFFF;
}
.technologyContainer::before {
  right: 50%;
  transform: skew(0, 22.5deg);
}
.technologyContainer::after {
  left: 50%;
  transform: skew(0, -22.5deg);
}

.bgRight,
.bgLeft{
	display: none;
}

@media (max-width: 1700px){
		.technologyContainer.show {
		    background-position-x: calc(100% + 260px), -500px;
		}
	
}

@media (max-width: 1200px){
	.technologyContainer{
		background-image: none;
	}
	
	.topBanner_technology{
    	background-size: unset;
	}
	
}


@media (max-width: 1024px){
	
	.bottomBanner_technology{
		background-attachment: local;
		background-size: cover;
	}

	.bgRight,
	.bgLeft{
		display: unset;
		
		background-repeat: no-repeat;
		background-position-y: center;	
	    background-size: contain;

		width: 100%;
		height: 100%;
	}
	
	.bgRight{
		background-image: url('../media/t_banner_img_1.png');
	    background-position-x: right;
	}

	.bgLeft{
		background-image: url('../media/t_banner_img_2.png');
	    background-position-x: -50px;
	}

}


/*technology End*/

/*Animation*/
.animationObserver img.zoomImage{
	transition: transform 2s ease;
	transform: scale(0);	
}
.animationObserver.show img.zoomImage{
	transform: scale(1);
}

.animationObserver img.slideFromLeft{
	transition: left 2s ease;
	left: -100%;
	position: relative;	
}
.animationObserver.show img.slideFromLeft{
	left: 0;
	position: relative;	
}
.animationObserver img.slideFromRight{
	transition: right 2s ease;
	right: -100%;
	position: relative;	
}
.animationObserver.show img.slideFromRight{
	right: 0;
	position: relative;	
}