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

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform:translateX(1000px);
            transform:translateX(1000px);
    opacity:0
  }
  100% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
    opacity:1
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform:translateX(1000px);
            transform:translateX(1000px);
    opacity:0
  }
  100% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
    opacity:1
  }
}
@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform:translateY(-500px);
            transform:translateY(-500px);
    opacity:0
  }
  100% {
    -webkit-transform:translateY(0);
            transform:translateY(0);
    opacity:1
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform:translateY(-500px);
            transform:translateY(-500px);
    opacity:0
  }
  100% {
    -webkit-transform:translateY(0);
            transform:translateY(0);
    opacity:1
  }
}
@-webkit-keyframes orange-line-left {
  0% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
    opacity:0
  }
  100% {
    -webkit-transform:translateX(-100%);
            transform:translateX(-100%);
    opacity:1
  }
}
@keyframes orange-line-left {
  0% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
  }
  100% {
    -webkit-transform:translateX(-100%);
            transform:translateX(-100%);
  }
}
@-webkit-keyframes orange-line-right {
  0% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
  }
  100% {
    -webkit-transform:translateX(100%);
            transform:translateX(100%);
  }
}
@keyframes orange-line-right {
  0% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
  }
  100% {
    -webkit-transform:translateX(100%);
            transform:translateX(100%);
  }
}
@-webkit-keyframes card_slide_out {
  0% {
    -webkit-transform:translateX(0%);
            transform:translateX(0%);
  }
  30% {
    -webkit-transform:translateX(10%);
            transform:translateX(10%);
  }    
  60% {
    -webkit-transform:translateX(0%);
            transform:translateX(0%);
  }
 100% {
    -webkit-transform:translateX(-120%);
            transform:translateX(-120%);
  }
}
@keyframes card_slide_out {
  0% {
    -webkit-transform:translateX(0%);
            transform:translateX(0%);
  }
  30% {
    -webkit-transform:translateX(10%);
            transform:translateX(10%);
  }     
  60% {
    -webkit-transform:translateX(0%);
            transform:translateX(0%);
  }
  100% {
    -webkit-transform:translateX(-120%);
            transform:translateX(-120%);
  }
}
@-webkit-keyframes slide-in-card-right {
  0% {
    -webkit-transform:translateX(1000px);
            transform:translateX(1000px);
    opacity:0
  }
  100% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
    opacity:1
  }
}
@keyframes slide-in-card-right {
  0% {
    -webkit-transform:translateX(1000px);
            transform:translateX(1000px);
    opacity:0
  }
  100% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
    opacity:1
  }
}
@-webkit-keyframes slide-in-card-left {
  0% {
    -webkit-transform:translateX(-1000px);
            transform:translateX(-1000px);
    opacity:0
  }
  100% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
    opacity:1
  }
}
@keyframes slide-in-card-left {
  0% {
    -webkit-transform:translateX(-1000px);
            transform:translateX(-1000px);
    opacity:0
  }
  100% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
    opacity:1
  }
}
@-webkit-keyframes slide-out-cards-left {
  0% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
    opacity:1
  }
  100% {
    -webkit-transform:translateX(-1000px);
            transform:translateX(-1000px);
    opacity:1
  }
}
@keyframes slide-out-cards-left {
  0% {
    -webkit-transform:translateX(0);
            transform:translateX(0);
    opacity:1
  }
  100% {
    -webkit-transform:translateX(-1000px);
            transform:translateX(-1000px);
    opacity:1
  }
}
@-webkit-keyframes card_slide_out2 {
  0% {
    -webkit-transform:translateX(0%);
            transform:translateX(0%);
    opacity:1
  }
  100% {
    -webkit-transform:translateX(-120%);
            transform:translateX(-120%);
    opacity:1
  }
}
@keyframes card_slide_out2 {
  0% {
    -webkit-transform:translateX(0%);
            transform:translateX(0%);
    opacity:1
  }
  100% {
    -webkit-transform:translateX(-120%);
            transform:translateX(-120%);
    opacity:1
  }
}
@-webkit-keyframes business_card_scale_pos {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-190.2px);
            transform:scale(0.729) translateY(-190.2px);
  }
}
@keyframes business_card_scale_pos {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-190.2px);
            transform:scale(0.729) translateY(-190.2px);
  }
}
@-webkit-keyframes business_card_scale_pos_414 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-184px);
            transform:scale(0.729) translateY(-184px);
  }
}
@keyframes business_card_scale_pos_414 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-184px);
            transform:scale(0.729) translateY(-184px);
  }
}

@-webkit-keyframes business_card_scale_pos_393 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-174.6px);
            transform:scale(0.729) translateY(-174.6px);
  }
}
@keyframes business_card_scale_pos_393 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-174.6px);
            transform:scale(0.729) translateY(-174.6px);
  }
}
@-webkit-keyframes business_card_scale_pos_384 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-170.6px);
            transform:scale(0.729) translateY(-170.6px);
  }
}
@keyframes business_card_scale_pos_384 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-170.6px);
            transform:scale(0.729) translateY(-170.6px);
  }
}
@-webkit-keyframes business_card_scale_pos_375 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-166.6px);
            transform:scale(0.729) translateY(-166.6px);
  }
}
@keyframes business_card_scale_pos_375 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-166.6px);
            transform:scale(0.729) translateY(-166.6px);
  }
}
@-webkit-keyframes business_card_scale_pos_360 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-160px);
            transform:scale(0.729) translateY(-160px);
  }
}
@keyframes business_card_scale_pos_360 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-160px);
            transform:scale(0.729) translateY(-160px);
  }
}
@-webkit-keyframes business_card_scale_pos_320 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-142.2px);
            transform:scale(0.729) translateY(-142.2px);
  }
}
@keyframes business_card_scale_pos_320 {
  0% {
    -webkit-transform:scale(1) translateY(0px);
            transform:scale(1) translateY(0px);
  }
  100% {
    -webkit-transform:scale(0.729) translateY(-142.2px);
            transform:scale(0.729) translateY(-142.2px);
  }
}


@-webkit-keyframes button_scale_in {
  0% {
    -webkit-transform:scale(0%);
            transform:scale(0%);
   opacity:1      
  }
  100% {
    -webkit-transform:scale(100%);
            transform:scale(100%);
   opacity:1      
  }
}
@keyframes button_scale_in {
  0% {
    -webkit-transform:scale(0%);
            transform:scale(0%);
      opacity:1
  }
  100% {
    -webkit-transform:scale(100%);
            transform:scale(100%);
      opacity:1
  }
}
@-webkit-keyframes hellenic_bank_fade_in_left {
  0% {
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
   opacity:0     
  }
  100% {
    -webkit-transform:translateX(0%);
            transform:translateX(0%);
   opacity:1      
  }
}
@keyframes hellenic_bank_fade_in_left {
  0% {
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
      opacity:0
  }
  100% {
    -webkit-transform:translateX(0%);
            transform:translateX(0%);
      opacity:1
  }
}
@-webkit-keyframes mastercard_card_fade_in_right {
  0% {
    -webkit-transform:translateX(50%);
            transform:translateX(50%);
   opacity:0      
  }
  100% {
    -webkit-transform:translateX(0%);
            transform:translateX(0%);
   opacity:1      
  }
}
@keyframes mastercard_card_fade_in_right {
  0% {
    -webkit-transform:translateX(50%);
            transform:translateX(50%);
      opacity:0
  }
  100% {
    -webkit-transform:translateX(0%);
            transform:translateX(0%);
      opacity:1
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity:0
  }
  100% {
    opacity:1
  }
}
@keyframes fade-in {
  0% {
    opacity:0
  }
  100% {
    opacity:1
  }
}
@-webkit-keyframes button_scale_in_loop {
  0% {
  -webkit-transform:scale(1);
  transform:scale(1);
  opacity:1      
  }
  10%{
  -webkit-transform:scale(1.03);
  transform:scale(1.03);
  opacity:1 
    }  
  20%{
  -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
  }
  10%{
  -webkit-transform:scale(1.03);
  transform:scale(1.03); 
  opacity:1      
    }  
  20%{
  -webkit-transform:scale(1);
  transform:scale(1); 
  opacity:1      
    }    
  100% {
  -webkit-transform:scale(1);
  transform:scale(1);
  opacity:1      
  }
}

.slide-in-right {
	-webkit-animation: slide-in-right 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-in-top {
	-webkit-animation: slide-in-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.orange-line-left {
	-webkit-animation: orange-line-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: orange-line-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.orange-line-right {
	-webkit-animation: orange-line-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: orange-line-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.card_slide_out{
    -webkit-animation: card_slide_out 1s ease both;
	        animation: card_slide_out 1s ease both;
}
.slide-in-cards-right {
	-webkit-animation: slide-in-card-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-card-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-in-cards-left {
	-webkit-animation: slide-in-card-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-card-left 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-out-cards-left {
	-webkit-animation: slide-out-cards-left 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-cards-left 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.di3e{display:flex!important}
.slide-in-right2 {
	-webkit-animation: slide-in-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.gray_card_flip{-webkit-transform:rotateX(180deg); transform:rotateX(180deg); transition:.4s; transition-timing-function:ease}
.card_slide_out2{
    -webkit-animation: card_slide_out2 .4s ease-out both;
	        animation: card_slide_out2 .4s ease-out both;
}
.business_card_scale_pos{-webkit-animation:business_card_scale_pos .4s both; animation:business_card_scale_pos .4s both; transform-origin:50% 0%}
.button_scale_in{ -webkit-animation: button_scale_in .4s ease-in both;
    animation: button_scale_in .4s ease-in both; }
.fade-in2 {
	-webkit-animation: fade-in .4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in .4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.hellenic_bank_fade_in_left{-webkit-animation:hellenic_bank_fade_in_left .4s ease-in both; 
    animation:hellenic_bank_fade_in_left .4s ease-in both}

.mastercard_card_fade_in_right{-webkit-animation:mastercard_card_fade_in_right .4s ease-in both; 
    animation:mastercard_card_fade_in_right .4s ease-in both}
.fade-in {
	-webkit-animation: fade-in .6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in .6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.button_scale_in_loop{-webkit-animation:button_scale_in_loop 4s infinite both; animation:button_scale_in_loop 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-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center; position:absolute; width:100%; height:100%; background-color:#e0e4e7; z-index:40}
a.exit_link{position:absolute; z-index:900; width:100%; height:100%}

/* SCENE 1 */

.gray_card{position:absolute; z-index:50; display:flex; justify-content:center; align-items:center; overflow:hidden; width:380.444px}
.an_exeis{position:absolute; display:flex; width:267.9px; opacity:0}
.orange_line{position:absolute; display:flex; width:69.8px; bottom:29.3px}
.orange_line_left{content:""; position:absolute; background-color:#bbbdbf; width:50%; height:100%; left:0; top:0}
.orange_line_right{content:""; position:absolute; background-color:#bbbdbf; width:50%; height:100%; right:0; top:0}

/* SCENE 2 */

.three-cards-wrap{z-index:60; position:absolute; display:flex; flex-wrap:wrap; align-items:center; justify-content:center}
.pharmacy_card{display:flex; align-items:center; opacity:0; width:297.222px}
.barber_shop_card{display:flex; align-items:center; opacity:0; width:297.222px; margin-top:12.7px}
.coffee_shop_card{display:flex; align-items:center; opacity:0; width:297.222px; margin-top:12.7px}


/* SCENE 3 */

.gray_card2{position:absolute; z-index:70; display:none; justify-content:center; align-items:center; overflow:hidden; width:380.444px}


.orange_line2{position:absolute; display:flex; width:69.8px; bottom:59.8px}
.orange_line_left2{content:""; position:absolute; background-color:#bbbdbf; width:50%; height:100%; left:0; top:0}
.orange_line_right2{content:""; position:absolute; background-color:#bbbdbf; width:50%; height:100%; right:0; top:0}



.gray_card2_flip{position:absolute; display:flex; align-items:center; width:100%; height:100%; background-color:transparent; perspective:1000px}
.gray_card2_flip-inner{display:flex; align-items:center; justify-content:center; position:relative; width:100%; height:100%; transform-style:preserve-3d}


.iparxei_mia{position:absolute; display:flex; align-items:center; width:314.3px; bottom:91.5px; opacity:0; -webkit-backface-visibility:hidden; backface-visibility:hidden}
.mastercard-business{position:absolute; display:flex; align-items:center; width:332.9px; top:105.8px; -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:rotateX(180deg)}


/* SCENE 4 */

.business_card_wrap{position:absolute; z-index:80; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; height:100%}
.business_card{display:none; align-items:center; width:386px}

.business_card_info_wrap{position:absolute; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; top:calc(50% - 5.5px)}
.apoktise_ti_diki_sou{display:flex; align-items:center; opacity:0; width:370.9px}
.isxioun{display:flex; align-items:center; opacity:0; width:235px; margin-top:83.6px}

.bank_logos_wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; width:325px; margin-top:20.2px}
.hellenic_bank_logo{display:flex; opacity:0; width:242.1px}
.bank_logos_divider{display:flex; opacity:0; width:1px; height:39.6px; background-color:#717171}
.mastercard_card_logo{display:flex; opacity:0; width:59.1px}

/* Big Phone (tall screen) */
@media screen and (max-device-width:414px) and (-webkit-min-device-pixel-ratio:1.5) {
    
.business_card_scale_pos{-webkit-animation:business_card_scale_pos_414 .4s both; animation:business_card_scale_pos_414 .4s both; transform-origin:50% 0%}    
    
/* SCENE 1 */
    
.gray_card{width:368px}
.an_exeis{width:259.1px}
.orange_line{width:67.5px; bottom:28.3px}

/* SCENE 2 */

.pharmacy_card{width:287.5px}
.barber_shop_card{width:287.5px; margin-top:12.3px}
.coffee_shop_card{width:287.5px; margin-top:12.3px}
    
/* SCENE 3 */

.gray_card2{width:368px}
.orange_line2{width:67.5px; bottom:57.8px}
.iparxei_mia{width:304px; bottom:88.5px}
.mastercard-business{width:322px; top:102.3px}    
    
/* SCENE 4 */

.business_card{width:373.4px}
.business_card_info_wrap{top:calc(50% - 5.3px)}
.apoktise_ti_diki_sou{width:358.8px}
.isxioun{width:227.3px; margin-top:80.9px}
.bank_logos_wrap{width:314.4px; margin-top:19.5px}
.hellenic_bank_logo{width:234.2px}
.bank_logos_divider{height:38.3px}
.mastercard_card_logo{width:57.2px}    
      
}


/* Big Phone (short screen) */
@media  screen and (max-device-width:414px) and (min-device-width: 394px) and (max-height:622px) and (-webkit-min-device-pixel-ratio:1.5) {
    
/* SCENE 2 */

.pharmacy_card{width:237.5px}
.barber_shop_card{width:237.5px; margin-top:10.2px}
.coffee_shop_card{width:237.5px; margin-top:10.2px}    
       
}


/* Medium++ Phone (tall screen) */
@media  screen and (max-device-width:393px) and (-webkit-min-device-pixel-ratio:1.5) {
    
.business_card_scale_pos{-webkit-animation:business_card_scale_pos_393 .4s both; animation:business_card_scale_pos_393 .4s both; transform-origin:50% 0%}      
    
/* SCENE 1 */

.gray_card{width:349.3px}
.an_exeis{width:246px}
.orange_line{width:64.1px; bottom:26.9px}
 
/* SCENE 2 */

.pharmacy_card{width:272.9px}
.barber_shop_card{width:272.9px; margin-top:11.7px}
.coffee_shop_card{width:272.9px; margin-top:11.7px}
    
/* SCENE 3 */

.gray_card2{width:349.3px}
.orange_line2{width:64.1px; bottom:54.9px}
.iparxei_mia{width:288.6px; bottom:84px}
.mastercard-business{width:305.7px; top:97.1px}    
    
/* SCENE 4 */

.business_card{width:354.4px}
.business_card_info_wrap{top:calc(50% - 5.1px)}
.apoktise_ti_diki_sou{width:340.6px}
.isxioun{width:215.8px; margin-top:76.8px}

.bank_logos_wrap{width:298.4px; margin-top:18.5px}
.hellenic_bank_logo{width:222.3px}
.bank_logos_divider{height:36.4px}
.mastercard_card_logo{width:54.3px}    

}

/* Medium+ Phone */
@media  screen and (max-device-width:384px) and (-webkit-min-device-pixel-ratio:1.5) {
   
.business_card_scale_pos{-webkit-animation:business_card_scale_pos_384 .4s both; animation:business_card_scale_pos_384 .4s both; transform-origin:50% 0%}       
    
/* SCENE 1 */

.gray_card{width:341.3px}
.an_exeis{width:240.4px}
.orange_line{width:62.6px; bottom:26.3px}
   
/* SCENE 2 */

.pharmacy_card{width:266.7px}
.barber_shop_card{width:266.7px; margin-top:11.4px}
.coffee_shop_card{width:266.7px; margin-top:11.4px}    
    
/* SCENE 3 */

.gray_card2{width:341.3px}
.orange_line2{width:62.6px; bottom:53.7px}
.iparxei_mia{width:282px; bottom:82.1px}
.mastercard-business{width:298.7px; top:94.9px}    
    
/* SCENE 4 */

.business_card{width:346.3px}
.business_card_info_wrap{top:calc(50% - 4.9px)}
.apoktise_ti_diki_sou{width:332.8px}
.isxioun{width:210.8px; margin-top:75px}

.bank_logos_wrap{width:291.6px; margin-top:18.1px}
.hellenic_bank_logo{width:217.2px}
.bank_logos_divider{height:35.5px}
.mastercard_card_logo{width:53px}    
       
}

/* Medium Phone (tall screen) */
@media  screen and (max-device-width:375px) and (-webkit-min-device-pixel-ratio:1.5) {
  
.business_card_scale_pos{-webkit-animation:business_card_scale_pos_375 .4s both; animation:business_card_scale_pos_375 .4s both; transform-origin:50% 0%}      
    
/* SCENE 1 */

.gray_card{width:333.3px}
.an_exeis{width:234.7px}
.orange_line{width:61.2px; bottom:25.7px}
   

/* SCENE 2 */

.pharmacy_card{width:260.4px}
.barber_shop_card{width:260.4px; margin-top:11.1px}
.coffee_shop_card{width:260.4px; margin-top:11.1px}    
    
/* SCENE 3 */

.gray_card2{width:333.3px}
.orange_line2{width:61.2px; bottom:52.4px}
.iparxei_mia{width:275.4px; bottom:80.2px}
.mastercard-business{width:291.7px; top:92.7px}
    
/* SCENE 4 */

.business_card{width:338.2px}
.business_card_info_wrap{top:calc(50% - 4.8px)}
.apoktise_ti_diki_sou{width:325px}
.isxioun{width:205.9px; margin-top:73.2px}

.bank_logos_wrap{width:284.8px; margin-top:17.7px}
.hellenic_bank_logo{width:212.1px}
.bank_logos_divider{height:34.7px}
.mastercard_card_logo{width:51.8px}    
    
}


/* Medium Phone (short screen) */
@media  screen and (max-device-width:375px) and (min-device-width:361px) and (max-height:628px) and (-webkit-min-device-pixel-ratio:1.5) {
       
/* SCENE 2 */

.pharmacy_card{width:228.9px}
.barber_shop_card{width:228.9px; margin-top:9.8px}
.coffee_shop_card{width:228.9px; margin-top:9.8px}      
    
 
}

/* Small Phone */
@media screen and (max-device-width:360px) and (-webkit-min-device-pixel-ratio:1.5) {
    
.business_card_scale_pos{-webkit-animation:business_card_scale_pos_360 .4s both; animation:business_card_scale_pos_360 .4s both; transform-origin:50% 0%}       
    
/* SCENE 1 */
    
.gray_card{width:320px}
.an_exeis{width:225.3px}
.orange_line{width:58.7px; bottom:24.6px}
   
/* SCENE 2 */

.pharmacy_card{width:250px}
.barber_shop_card{width:250px; margin-top:10.7px}
.coffee_shop_card{width:250px; margin-top:10.7px}    
    
/* SCENE 3 */

.gray_card2{width:320px}
.orange_line2{width:58.7px; bottom:50.3px}
.iparxei_mia{width:264.4px; bottom:77px}
.mastercard-business{width:280px; top:89px}    
    
/* SCENE 4 */

.business_card{width:324.7px}
.business_card_info_wrap{top:calc(50% - 4.6px)}
.apoktise_ti_diki_sou{width:312px}
.isxioun{width:197.7px; margin-top:70.3px}

.bank_logos_wrap{width:273.4px; margin-top:17px}
.hellenic_bank_logo{width:203.6px}
.bank_logos_divider{height:33.3px}
.mastercard_card_logo{width:49.7px}    
       
}

/* Very Small Phone */
@media screen and (max-device-width:320px) and (-webkit-min-device-pixel-ratio:1.5) {
    
.business_card_scale_pos{-webkit-animation:business_card_scale_pos_320 .4s both; animation:business_card_scale_pos_320 .4s both; transform-origin:50% 0%}    
    
/* SCENE 1 */

.gray_card{width:284.4px}
.an_exeis{width:200.3px}
.orange_line{width:52.2px; bottom:21.9px}

/* SCENE 2 */

.pharmacy_card{width:222.2px}
.barber_shop_card{width:222.2px; margin-top:9.5px}
.coffee_shop_card{width:222.2px; margin-top:9.5px}    
    
/* SCENE 3 */

.gray_card2{width:284.4px}
.orange_line2{width:52.2px; bottom:44.7px}
.iparxei_mia{width:235px; bottom:68.4px}
.mastercard-business{width:248.9px; top:79.1px}    
    
/* SCENE 4 */

.business_card{width:288.6px}
.business_card_info_wrap{top:calc(50% - 4.1px)}
.apoktise_ti_diki_sou{width:277.3px}
.isxioun{width:235px; margin-top:62.5px}

.bank_logos_wrap{width:243px; margin-top:15.1px}
.hellenic_bank_logo{width:181px}
.bank_logos_divider{height:29.6px}
.mastercard_card_logo{width:44.2px}    
    
}


/* Very Small Phone (short screen) */
@media screen and (max-device-width:320px) and (max-height:460px) and (-webkit-min-device-pixel-ratio:1.5) {
    
/* SCENE 2 */

.pharmacy_card{width:191.8px}
.barber_shop_card{width:191.8px; margin-top:8.2px}
.coffee_shop_card{width:191.8px; margin-top:8.2px}      
       
}