.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
   

  .custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
  }
  .custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
  }

/*------------------services start-----------------------*/
.heading__pre-title1 {
    color: #292c2f ;
    font-size: 25px;
    font-weight: 500;
}
.block-new{
	background: #fff;
    padding: 30px;
    height: 100%;
    border: 0.5px solid #1D4C6A7A;
    border-radius: 8px;
    position: relative;
    display: block;
    padding-bottom: 80px;
	margin:20px;
}
/*------------------Sub solution start-----------------------*/
   .subSolution__img1{
	height: 200px !important;
   }
   .subSolution__heading{
	color: #056cab;
    font-size: 50px !important;
   }
   .subSolution__title{
	color: #056cab;
    font-size: 35px !important;
   }
   .para__solution{
	   font-size: 17px;
   }
/*------------------solution end-----------------------*/
/*------------------solution start-----------------------*/
.solution_hover figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.solution_hover figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
.text_hover {  
  /*transition: all 2s ease;
  border: 5px solid red;*/
  
}
.text_hover:hover {   
  /*border: 5px solid green;*/
	
}

.solution__lower {
    padding: 8px 4px 8px 4px;
	background: #fdfbfb;
}

.solution-item {
    display: inline-block;
    margin-bottom: 7px;
    color: #003d90;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
}
.solution {
    background: #fff;
    -webkit-clip-path: polygon(92% 0,100% 7%,100% 100%,0 100%,0 0);
	
}
.solution__img { 
    position: relative;
    padding-top: 60.43956%;
    overflow: hidden;
	clip-path: polygon(92% 0,100% 7%,100% 100%,0 100%,0 0); 
}

.solution__text {
    margin-bottom: 0;
	padding: 8px 4px 8px 4px;
	background: #fdfbfb;
}
.solution__details {
    margin-top: 20px;
    font-size: 14px;
    color: #767f7f;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}




/*---------------------solution end--------------------------*/
@import url('https://fonts.googleapis.com/css?family=Montserrat');
.dot {
  height: 30px;
  width: 30px;
  background-color: #d0192;
  border-radius: 50%;
  display: inline-block;
}
.line2{ 
    border: 1px dotted #a5888887;
}

.vertical-box{
	background-color: #60608edb;
    color: white;
}
.highLight-box{
	padding-left: 1%;
    padding-right: 2%;
}



.horizontal-tabs li.r-tabs-state-active {
    position: relative;
    border: 1.5px solid #f3f9f8;
    border-bottom: 1px solid #9d94f7;
}
.img-block{
	width: 100%;
	height: 80%;
	padding-left:0px;
	 box-shadow: 0 4px 8px 0 rgb(113 107 107), 0 6px 20px 0 rgb(0 0 0 / 78%);
	}

.heading2{
	text-align: center;
	padding-left: 200px;
	padding-right: 200px;

}
.quote1-icon{
	padding-left: 20px;

}
.image12{
	background-attachment: fixed;
}
.p12345{
	
background-color: #f3f6f5;

}
.services-section{
	background-image: url(ai3.jpg);
	background-size: cover;
	padding: 60px,0;

}
.inner-width{
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 0 20px;
	overflow: hidden;
}
.section-title{
	padding-top: 100px;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 50px;

}
.border{
	

}
.border{
	width: 100px;
	height: 2px;
	background:	white;
	margin: 40px auto;

}
.services-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}
.service-box{
	max-width: px;
	padding: 80px;
	text-align: center;
	color: 	white;white
	cursor: pointer;
	height: 100%;
} 
.service-icon{
	display: inline-block;
	width: 100px;
	height: 100px;
	border: 3px solid #82ccdd;
	color: white;
	transform: rotate(45deg);
	margin-bottom: 30px;
	margin-top: 16px;
	transition: 0.3s linear;
}
.service-icon i{
	line-height: 70px;
	transform: rotate(-45deg);
	font-size: 26px;


}
.service-box:hover .service-icon{
	background: white;	
	color: #ddd;

}
.service-title{
	font-size: 10px;
	text-transform: uppercase;
	margin-bottom: 10px;

}
.service-desc{
	font-size: 14px;

}

.blockblue{
	background:#79efe41a;
}

	
	
}
.textblue{
	padding-top: 50px;
	text-align: center;
	font-family: sans-serif;
	padding-left: 50%;
}
.textblue p{
	text-align: center;
	padding-left: 30px;
}
.textblue h1{
	padding-left: 30px;
	padding-top: 50px;
}
{
	 width: 100px;
	 height: 2px
	 color:  6px solid green;
  height: 500px;
}
.v h1{
	padding-top: 50px;
	padding-bottom:  50px;
	padding-left: 3px;
	padding-right:50px;

	text-align: center;
}
.v1{
padding-left: 20px;
padding-bottom: 10px;
}

.blueblock11{

	padding: 10px;
}
.blockblue121 {
    background-color: #bcc7c61c;
    border-radius: 30px;
    padding-bottom: 1%;
    padding-left: 20px;
    box-shadow: 0 4px 8px 0 rgb(47 44 44 / 48%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.blueblock12{
	 border-radius: 25px;
	 padding-left: 5%;

	text-align: left;
	width: 100%;
	
	background: #182d4af2;
	font-family: sans-serif;
	
	font-size: 15px;

}
.heading123{
	width: 700px;
	padding-top: -100px;

}
.text123{
	border: 5px #000000;
	background-color: white;
	box-shadow:0 5px 10px #000000;
}



/* section end*/



ul{
	list-style-type: square;
}

..blockblue1{
	border-color:  black;
	border-width:   5%;
	padding-left: 50px;

}
.blockblue12{
background-color: #f3f6f5;
border-radius: 30px;
padding-bottom: 1%;
padding-left: 20px;
}
.textblue1 h1{
	text-align: left;
		padding-top: 50px;
	text-align: center;
	font-family: sans-serif;
	
}

/*service3*/




}
.services-section{
	
	background-size: cover;
	padding: 60px,0;

}
.inner-width{
	width: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 0 20px;
	overflow: hidden;
}
.section-title{
	padding-top: 100px;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 50px;

}
.border{
	

}
.border{
	width: 100px;
	height: 2px;
	background:	white;
	margin: 40px auto;

}
.services-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}
.service-box{
	max-width: px;
	padding: 80px;
	text-align: center;
	color: 	white;white
	cursor: pointer;
	height: 100%;
} 
.service-icon{
	display: inline-block;
	width: 100px;
	height: 100px;
	border: 3px solid #82ccdd;
	color: white;
	transform: rotate(45deg);
	margin-bottom: 30px;
	margin-top: 16px;
	transition: 0.3s linear;
}
.service-icon i{
	line-height: 70px;
	transform: rotate(-45deg);
	font-size: 26px;


}
.service-box:hover .service-icon{
	background: white;	
	color: #ddd;

}
.service-title{
	font-size: 10px;
	text-transform: uppercase;
	margin-bottom: 10px;

}
.service-desc{
	font-size: 14px;

}
.block5 p{
font-size: 3px;
}
.table12{
    border: 3px solid #d9e2e0;
    margin-top: -1px;
}
/*-------------------------------services end------------------------------------------*/
hr.new1 {
    border: 1px dotted #a5888887;
}
hr.new2 {
	padding-bottom: 0px;
    width: 1150px;
    border: 25px solid black;
}
.whole-block:hover{
width: 200px;
  height: 200px;
   
	
}
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.15s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 2.5s;
  animation-name: fadeIn;
  animation-duration: 2.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
/*--------------------------------------------------*/
img .img-join-us{
	display: inline-block;
    max-width: 100%;
    height: 100px;
}

.img-middle{
	
    display: inline-block;
    height: auto;
    border-radius: 4px;
    padding: 1px;
    width: auto;
    border-radius: 15%;
    back: 1%;
    border-radius: 1%;
    box-shadow: 0 4px 8px 0;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    clip-path: polygon(90% 0,100% 12%,100% 100%,0 100%,0 0);
}
}
.btnsvg{
	padding-left:5px;
}

.search-text-line {
    background-color: transparent;
    color: #a2a0a0;
    outline: none;
    outline-style: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid #2d242438 1px;
    padding: 3px 10px;
}


.sub-list--style-3 li a{
	  
float: none;
	  
color: #0c0707;
	  
padding: 2px;
	  
text-decoration: none;
	  
display: block;
	  
text-align: left;
} 
.header-icon{
	padding-right:17px;
}
 
/*.sub-list--style-3 li:hover {
  background-color: #ddd;
}*/
.icon-menu2{
	padding-right:5px;
	
}
.banner 1 {
	height: 100vh;
	width: 100%;
	position:relative;
	left:0;
	top:0;
}
text-banner{
	width: 120%;
	position: absolute;
	left:200px;
	top:100px;
	color: #fff;
	}
text-banner h1{
	margin-bottom :40
	}
image {
	width: 600px;
	position: absolute;
	left:50%;
	top:50%;
	transform: transform(-50%,-50%);
	
}
.banner1 {
	animation: slide1 12s linear infinite;
}
.banner1 {
	animation: slide2 12s linear infinite;
}
.banner1 {
	animation: slide3 12s linear infinite;
}
.banner1 {
	animation: slide4 12s linear infinite;
}
@keyframes slide1{
	0%{
		visibility: visible;
	}
	25%{
		visibility: hidden;
	}50%
	{
		visibility: hidden;
	}75%
	{
		visibility: hidden;
	}100%
	{
		visibility: visible;
	}
}@keyframes slide2{
	0%{
		visibility: visible;
	}
	25%{
		visibility: hidden;
	}50%
	{
		visibility: hidden;
	}75%
	{
		visibility: hidden;
	}100%
	{
		visibility: visible;
	}
}@keyframes slide3 {
	0%{
		visibility: visible;
	}
	25%{
		visibility: hidden;
	}50%
	{
		visibility: hidden;
	}75%
	{
		visibility: hidden;
	}100%
	{
		visibility: visible;
	}
}

 .title h1 {
	background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
	background-size: cover;
	color: transparent;
	-moz-background-clip: text;
	-webkit-background-clip: text;
	text-transform: uppercase;
	font-size: 120px;
	line-height: .75;
	margin: 10px 0;
}
.video12 video
{
	position: absolute;
	top:0;
	left: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	 pointer-events: none;
}
.align-container video
{
	position: absolute;
	top:0;
	left: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	 pointer-events: none;
}

.container1 span 
{
	background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4)
}

.demo123{
	opacity: 0;

}
.demo123 .animated.
{
	 opacity: 1;
}

.demo123  {
   margin-top: 10rem;
   text-align: center;
}

.demo123  h3 {
  font-size: 9rem;
  text-align: center;
   font-weight: bold;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
}


.promo-slider__overlay span


@-webkit-keyframes glow {
     from {
      color: #fff;
    text-shadow: 0 0 10px #00fff2, 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 90px #00fff2;
  }
  
  to {
     color: gray;
    text-shadow: 0 0 20px #00fff2, 0 0 30px #00fff2, 0 0 40px #00fff2, 0 0 50px #00fff2, 0 0 60px #00fff2, 0 0 70px #00fff2, 0 0 80px #00fff2, 0 1 90px #00fff2;
  }
}
.demo123.animation-directionFestkorp, a compliance automation solution company. We provide regulatory compliance forward by offering greater efficiencies, greater cost savings, and greater accuracy. Our approach is to have encompassing strategy, software and managed services with technology solutions boost operational efficiency and provide real-time visibility. 
Festkorp simplifies even complex cloud migration initiatives to streamline your operating environment and broaden your capabilities. It connect virtually every step and piece of data together across the entire source-to-pay process can reduce leakage, increase speed, and strengthen control over spending. {
	opacity: 1;
}
.content:hover{
  position: relative;
  bottom: 0;
  background: rgb(249 248 248); /* Black background with 0.5 opacity */
  color: #908888;
  width: 100%;
  height:  70%;
  padding: 10px;
  border-radius: 5%;
  text-align: justify; 
  cursor:pointer;
}
.content{
  position: relative;
  bottom: 0;
  background: rgb(255 255 255); /* Black background with 0.5 opacity */
  color: #908888;
  width: 100%;
  height:  50%;
  padding: 10px; 
  border-radius: 5%;
  text-align: justify;
  cursor:pointer;
}

 {
    position: relative;
    margin-bottom: 11px;
    overflow: hidden;
    -webkit-clip-path: polygon(90% 0,100% 12%,100% 100%,0 100%,0 0);
    clip-path: polygon(90% 0,100% 12%,100% 100%,0 100%,0 0);
}
















{
overflow: hidden;

}

@keyframes anim{
0%{
	margin-top :     -180px;
}
25%{
	 margin-top:-120px;
}
50%{
		margin-top: -600px;
}

75%{
	margin-top: -120px;
}
100%{
	margin-top:-60px;
}

} 


 .col1  h3
{
	   animation: slideInLeft 3s infinite;
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}



@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}





.col-lg-92 

{
	   animation:lightSpeedInRight 6s infinite;
}



@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

  } 


}


.col2

{
	   animation:lightSpeedInRight 6s infinite;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}






@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}


@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}




{
	   animation: backInDown 3s ;
	   visibility: scroll:down;
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-100px) scale(0.3);
    transform: translateY(-100px) scale(0.3);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}




{
	   animation: backInRight 3s ;
}

@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}
.btn:hover {background: #eee;}

.info {color: dodgerblue;}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: ;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
} 

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}

.section-new-style .section-wrapper .vc_row.container, .section-new-style .vc_section.section-wrapper {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}