@charset "utf-8";
/* CSS Document */

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


@-webkit-keyframes button_scale_in_loop {
  0% {
  -webkit-transform:scale(1);
  transform:scale(1);
  opacity:1      
  }
  28.6%{
  -webkit-transform:scale(1.05);
  transform:scale(1.05);
  opacity:1       
    } 
  57.2%{
  -webkit-transform:scale(1);
  transform:scale(1);
  opacity:1       
    }      
  100%{
  -webkit-transform:scale(1);
  transform:scale(1); 
  opacity:1      
    }    
}
@keyframes button_scale_in_loop {
  0% {
  -webkit-transform:scale(1);
  transform:scale(1);
  opacity:1      
  }
  28.6%{
  -webkit-transform:scale(1.05);
  transform:scale(1.05);
  opacity:1       
    } 
  57.2%{
  -webkit-transform:scale(1);
  transform:scale(1);
  opacity:1       
    }      
  100%{
  -webkit-transform:scale(1);
  transform:scale(1); 
  opacity:1      
    }  
}

.fade-in-bottom{-webkit-animation:fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation:fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both}
.button_scale_in_loop{-webkit-animation:button_scale_in_loop 1.4s infinite both; animation:button_scale_in_loop 1.4s infinite both}


/* Div layer for the entire container. */

#dc_container {
	position: fixed;
	width: 100%;
	height: 100%;
	margin: auto;
    font-size:0;
	top:0;
	left:0;
	z-index: 999999999999;
}
#dc_content {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 100;
}
#info {
	position:absolute;
	display:block;
	display:none;
	bottom:0.75%;
	z-index: 999;
	left:1.25%;
	width:20px;
	height:20px; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-callout:none
}
#info img {
	position:inherit;
	width:100%
}

/* Invisible button for background clickthrough. */

#dc_background_exit{
	position: absolute;
	width: 25px;
	height: 25px;
	top: 10px;
	left: 10px;
	z-index: 998;
	cursor: pointer;
	opacity: 0;
}
#dc_bgImage{
	position: absolute;
	bottom: 0px;
	left: 0px;
}
#dc_expand_logo{
	position: absolute;
	left: 5px;
	top: 5px;
}
#dc_btnClose{
	display:block;
	display:none;
	position: absolute;
	width: 25px;
	height: auto;
	top: 1.5%;
	left: 3%;
	z-index: 999;	
	cursor:pointer; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-callout:none
}
#dc_content img, #dc_content svg{width:100%; height:auto}

.hellenic-bank-connect-contact-pay-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; width:100%; height:100%; background-color:#a47fb9; background-image:url("img/purple-bg.jpg"); background-repeat:no-repeat; background-position:bottom center; background-size:100% auto; z-index:40}

.hellenic_bank_logo{position:absolute; width:71%; bottom:8.7%}

.hb_ccp_metafores_ani{position:absolute; width:86.1%; top:16.1%; right:5%}
.hb_ccp_metafores_ani svg{overflow:visible}


.hellenic-bank-final-scene-wrap{position:relative;  left:0; top:0; display:flex;  flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; z-index:50}

.hb_ccp_connect_ani{position:absolute; top:25.2%; width:85.6%}
.hb_ccp_connect_ani svg{overflow:visible}

.hb_ccp_kane_connect_btn{position:absolute; top:48.75%; width:46.666%; opacity:0; overflow:visible}
.hb_ccp_kane_connect_btn img{overflow:visible}

.connect_btn_appear{opacity:1}

a.exit_link{position:absolute; z-index:900; width:100%; height:100%; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-callout:none}