/*Company Begin*/


.topBanner_Company{
	height: 240px;

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

    background-attachment: fixed;
    background-position: top center;
    background-repeat: repeat-y;
    
}

.companyContainer {
	position: relative;
	z-index: 10;
	
   
    background-image: url('../media/c_banner_img_1.png'), url('../media/c_banner_img_2.png');
   
    background-repeat: no-repeat;	
    background-position-x: 150%, -150%;
    background-position-y: 380px, 1120px;
    background-size: auto 50%, auto 25%;
    transition:background-position 3s ease;	
}

.companyContainer.show{
	background-position-x: calc(100% + 130px), -50px;
}
.bottomBanner_Company{
	height: 430px;

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

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

.bgRight,
.bgLeft{
	display: none;
}

@media (max-width: 1720px){
	.companyContainer{
		background-position-y: 550px, 1120px;
        background-size: auto 35%, auto 25%;
	}
	
	.companyContainer.show{
		background-position-x: calc(100% + 190px), -210px;
	}	
}	

@media (max-width: 1420px){
	.companyContainer{
		background-position-y: 550px, 1120px;
        background-size: auto 35%, auto 25%;
	}

	.companyContainer.show{
		background-position-x: calc(100% + 230px), -310px;
	}
}
	
@media (max-width: 1200px){
	.companyContainer{
		background-image: none;
	}	
	
}

@media (max-width: 1024px){
	
	.bottomBanner_Company{
		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/c_banner_img_1_crop.png');
	    background-position-x: right;
	}

	.bgLeft{
		background-image: url('../media/c_banner_img_2_crop.png');
	    background-position-x: left;
	}


}

@media (max-width: 840px){
	
}

@media (max-width: 430px) {

	
}




/*Company 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;	
}



/*Temp*/

/*

img[data-direction="fromRight"]{
	transition: right 2s ease, opacity 2s ease;
	right: -60%;
	opacity: 0;

}
img[data-direction="fromRight"].show{
	right: 0;
	opacity: 1;

}

img[data-direction="fromLeft"]{
	transition: left 2s ease, opacity 2s ease;
	left: -50%;
	opacity: 0;

}
img[data-direction="fromLeft"].show{
	left: 0;
	opacity: 1;

}
*/