
.obj_behind{
	z-index: 200;
    color: transparent;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: auto;
    position: relative;
}

.ActionButton{
	width: 250px; 
	padding-top: 10px;
	padding-bottom: 10px; 
	color: #eed01a;  
	text-decoration: none; 
	border: 1px solid #eed01a; 
	border-radius: 10px; 
	display: flex; 
	align-content: center; 
	justify-content: center; 
	align-items: center;
}

.ActionButton:hover{
	background-color:#eed01a;
	color:black;
}

.obj {    
    z-index: 300;
    position: absolute;
    color: transparent;
    width: 43%;
    height: 43%;
    object-fit: contain;
    top: 0;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;
}


.obj_reflect{
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);

	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);

	-webkit-mask-image: -webkit-linear-gradient(top, #ffffff00 0%, #ffffff00 70%, #ffffff59 100%);
	mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,  rgba(0,0,0,0) 70%, rgba(0,0,0,0.4) 100%  );
	position:absolute;
	z-index: 150;
	color: transparent;
    width: 100%;
    height: 42%;
    object-fit: contain;
    top: calc( 100% - 80px);
}




.border_yellow_LR{
	border: 2px solid yellow;
	border-image: linear-gradient(to left, #000000a3 0%, #eed01aa3 10%, #eed01aa3 90%, #000000 100%);
	border-image-slice: 1;
	border-left: 0;
	border-right: 0;
	color: #eed01a;
	font-weight: 700 !important;
	font-size: 20px;
}



#rippletext{
	padding-bottom: 350px!important;
}

@media(min-width:1200px){
	#rippletext{
		padding-bottom: 280px!important;
	}
}



#panel_2{
	display: flex;
    align-items: center;
}

#panel_3{
	display: flex;
    align-items: center;
}

#panel_4{
	display: flex;
    align-items: center;
}

#panel_5{
	display: flex;
    align-items: center;
}

@media(min-width:1700px){
	.otechtextleft{
		color:white !important;
		width: 750px  !important;
		text-align: start !important;
		left: calc(50% - 750px) !important;
		top: 20% !important;
		position: absolute !important;
	}
	
	
	#panel_2{
		display: block;
		align-items: start;
	}
		
	#panel_3{
		display: block;
		align-items: start;
	}	
	
	#panel_4{
		display: block;
		align-items: start;
	}	
	
	#panel_5{
		display: block;
		align-items: start;
	}	
	
	.otechtextright{
		color:white !important;
		top: 25%!important;
		right:  calc(50% - 600px) !important;
		width: 50%!important;
		text-align: end!important;
		position: absolute !important;
	}
	
	.otechStopThere{
		 top: 20% !important;
		 left: calc(50% - 600px) !important;
		 width: 55% !important;
		 text-align: start !important;
		 position: absolute !important;
	}
	
	.otechWeAreDetermined{
		max-width: 800px !important;
		top: 30% !important; 
		right:  calc(50% - 700px) !important;
		width: 50% !important;
		text-align: end !important;
		position: absolute !important;
	}
	
	
	
	.otechtextleft_product{
		right:  150px !important;
		left: auto !important;
		position: absolute !important;
		bottom: 0px !important;
		position: absolute !important;
		    display: initial!important;
	}
	
	
	.otechStopThere_product{
		right:  calc(50% - 750px) !important;
		left: auto!important;
		position: absolute!important;
		bottom: 0px!important;
		display: initial!important;
		
		
	}
	
}



.otechtextleft_product{
    display:none;
}

.otechStopThere_product{
	  display:none;
}






.otechtextleft{
	color:white;
	text-align: center ;
	width:100%;
	left: 0px;
	top: 0px;
}

.otechtextright{
	color:white;
	text-align: center ;
	width:100%;
	right: 0px;
	top: 0px;
}

.otechStopThere{
	color:white;
	text-align: center ;
	width:100%;
	right: 0px;
	top: 0px;		
}

.otechWeAreDetermined{
	color:white;
	text-align: center;
	width:100%;
	right: 0px;
	top: 0px;		
}













/* SCROLL ICON */

#scroll_icon {
	width: 60px;
	height: 60px;
	z-index: 9999; 
	position: fixed; 
	left: calc( 50% - 30px);
	bottom: 40px; 
	margin: 0 auto;
	border: 2px solid #fff;
	border-radius: 50%;
	animation: down 1.5s infinite;
	-webkit-animation: down 1.5s infinite;
	
	-webkit-backface-visibility: hidden;
	-webkit-transform: scale(1);

}
	
	
video{
	-webkit-backface-visibility: hidden;
	-webkit-transform: scale(1);
}

p{
	-webkit-backface-visibility: hidden;
	-webkit-transform: scale(1);
}


#scroll_icon_up {
	width: 60px;
	height: 60px;
	z-index: 9999; 
	position: fixed; 
	left: calc( 50% - 30px);
	bottom: 40px; 
	margin: 0 auto;
	border: 2px solid #fff;
	border-radius: 50%;
	animation: down 1.5s infinite;
	-webkit-animation: down 1.5s infinite;

}
	
	
#scroll_icon_up:hover{
	cursor:pointer;
	background-color: #393939;
}

	
#scroll_icon_up::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 18px;
    width: 18px;
    height: 18px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-225deg);
}

	
	
	
	
#scroll_icon:hover{
	cursor:pointer;
	background-color: #393939;
}

	
#scroll_icon::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 18px;
    width: 18px;
    height: 18px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

@keyframes down {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translateY(15px);
	}
	40% {
		transform: translate(0);
	}
}

@-webkit-keyframes down {
	0% {
		transform: translate(0);
	}
	20% {
		transform: translateY(15px);
	}
	40% {
		transform: translate(0);
	}
}

.noscroll{
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
	scrollbar-width: none;  /* Firefox */
}

.noscroll::-webkit-scrollbar { 
	display: none;  /* Safari and Chrome */
}


.fa {
    font-size: 30px;
    width: 40px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    height: 40px;
    display: inline-block;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}




@media(min-width:576px){
	
	.roadTextTop{
		top: 25% !important; 
	}

	.roadTextBottom{
		bottom: 25% !important; 
	}



}


.roadTextTop{
	z-index: 900;
	margin-bottom: 0px;
	position: absolute!important; 
	top: 15% ; 
	width: 100%;
}

.roadTextBottom{
	 z-index: 900;
	 margin-bottom: 0px;
	 position: absolute !important; 
	 bottom: 15%; 
	 width: 100%;     
	 clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
}






@media(min-width:1700px){
	#parenttoppanel{
		background-color:  transparent !important;
	}

}

	#parenttoppanel{
		background-color:  #00000096;
	}
	
	
@media(max-width:576px){	
	.otechtextleft_product{
		bottom: 0px !important;
	}
	
	.otechtextleft{
	    font-size: 16px !important;
	}
}