body{
	background-color: #ffffff;
	padding:0px;
	margin: 0px;
	font-family: 'Prompt', sans-serif;
}

@media screen and (min-width: 576px){
/*---*/
.is-mobile{
	display: none;
}

.page-top{
	background-color: #000000;
}

.content{
	color: #000000;
}

.menu-list{
	margin: 0px;
	padding: 0px;
	padding-top: 15px;
	padding-bottom: 35px;
	width: 100%;
	color: #ffffff;
}

.menu-list-li{
	float: left;
	text-align: center;
	border-right-style: solid;
	border-right-width: 1px;
	font-family: 'Prompt', sans-serif;
	font-size: 14px;
}

.menu-list-li a{
	color: #ffffff;
}

.sub-menu{
	
	position: absolute;
	display: none;
	color: #ffffff;
	z-index: 99;
}

.sub-menu-content{
	border-radius: 2px;
	background-color: #ffffff;
	min-width: 200px;
	color: #ffffff;
}

.sub-menu-content-data{
	position: relative;
	z-index: 100;
	margin-top: 20px;
	padding: 10px;
}

.sub-menu-content-data ul{
	padding: 0px;
	margin: 0px;
}

.sub-menu-content-data li {
	list-style: none;
	text-align: left;
}

.sub-menu-content-data li a{
	color:#000000;
	font-size: 16px;
	font-weight: bold;
}

.img-hover-zoom {
  height: 405px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}



/*---*/
}

@media screen and (max-width: 576px){
   .is-web{
   		display: none;
   }
   
   .top-mobile{
   		padding-top: 10px;
   		padding-bottom: 10px;
   }
   
   #menu-mobile{
   		position: absolute;
   		z-index: 9;
   		display:none;
   		top:0;
   		width: 100%;
   		background-color: #0482fb;
   		opacity: 0.9;
   }
   
   .menu-list li{
   		list-style: none;
   		color: #ffffff;
   }
   
   .menu-list-sub{
   		
   }
   
   .page-content img{
		width: 100%;
		height: auto;
	 	display: block;
	  	margin-left: auto;
	  	margin-right: auto;
	}
}


/*------------------------------------------*/


.four-bx {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
}
.four-bx a:hover{
	 text-decoration: none;
}

.four-bx:hover{
	 text-decoration: none;
}

.four-bx:after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
   text-decoration: none;
}

.four-bx img {
    width: 100%;
    max-height: 192px;
    object-fit: cover;
    transition: transform .5s ease;
}

.feature-box {
    position: relative;
    min-height: 120px;
    width: 100%;
    z-index: 10;
    padding-bottom: 0px;
    background: rgb(67, 69, 71);
}

.feature-box::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 80px;
    transform-origin: right center;
    transform: skewY(10deg);
    transition: all 0.5s ease 0s;
    background: rgb(67, 69, 71);
}

.feature-box::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 80px;
    transform-origin: left center;
    transform: skewY(-10deg);
    transition: all 0.5s ease 0s;
    background: rgb(67, 69, 71);
}

.four-bx:hover img {
	transform: scale(1.08);
	position: relative;
	z-index: 50;
}

.feature-box p{
	padding: 10px;
	position: relative;
	z-index: 50;
	text-align: center;
	color: #ffffff;
}

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}