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

@-webkit-keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes blink-1 {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@-webkit-keyframes shake-horizontal {
  0%,
  20% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  2.5%,
  7.5%,
  12.5%,
  17.5% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  5%,
  10%,
  15% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  22.5%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes shake-horizontal {
  0%,
  20% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  2.5%,
  7.5%,
  12.5%,
  17.5% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  5%,
  10%,
  15% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  22.5%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}


.blink-1 {
	-webkit-animation: blink-1 1s infinite both;
	        animation: blink-1 1s infinite both;
}

.shake-horizontal {
	-webkit-animation: shake-horizontal 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both!important;
	        animation: shake-horizontal 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both!important;
			opacity:1!important
}



/* 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;
  display:none;
}
#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%;*/
  top: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%; top:0.75%;
  /*left: 3%;*/ right: 1.25%;
  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, #dc_content object {
  width: 100%;
  height: auto
}


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

@media all and (max-width: 432px) and (-webkit-min-device-pixel-ratio:1.5) {
			
.hb2-mastercard-top-wrap{bottom:270px}
	
} 

@media all and (max-width: 430px) and (-webkit-min-device-pixel-ratio:1.5) {
		
.hb2-mastercard-top-wrap{bottom:268.75px}	
	
} 

@media all and (max-width: 428px) and (-webkit-min-device-pixel-ratio:1.5) {
	
.hb2-mastercard-top-wrap{bottom:267.5px}	

} 

@media all and (max-width: 414px) and (-webkit-min-device-pixel-ratio:1.5) {
	
.hb2-mastercard-top-wrap{bottom:258.75px}		
	
} 

@media all and (max-width: 413px) and (-webkit-min-device-pixel-ratio:1.5) {
		
.hb2-mastercard-top-wrap{bottom:257.5px}		
	
}

@media all and (max-width: 394px) and (-webkit-min-device-pixel-ratio:1.5) {
	
.hb2-mastercard-top-wrap{bottom:245.625px}	
	
} 

@media all and (max-width: 390px) and (-webkit-min-device-pixel-ratio:1.5) {
	
.hb2-mastercard-top-wrap{bottom:243.75px}		
	
}

@media all and (max-width: 384px) and (-webkit-min-device-pixel-ratio:1.5) {
	
.hb2-mastercard-top-wrap{bottom:240px}		
	
} 

@media all and (max-width: 375px) and (-webkit-min-device-pixel-ratio:1.5) {
	
.hb2-mastercard-top-wrap{bottom:234.375px}		

} 

@media all and (max-width: 360px) and (-webkit-min-device-pixel-ratio:1.5) {
	
.hb2-mastercard-top-wrap{bottom:225px}	
		
} 

@media all and (max-width: 320px) and (-webkit-min-device-pixel-ratio:1.5) {
	
.hb2-mastercard-top-wrap{bottom:200px}	
	
} 

.content-container {
  height: 100%;
  width: 100%;
  background-color: #00000090;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.content {
  width: 100%;
  height: 100%;
  background-image: url('//richmedia.ad-sphere.eu/HB-MUC/img/img-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#main-text {
  width: 75% !important;
  padding-left: 8%;
  padding-top: 25%;
  transform: translateX(-150%);
  animation: leftRight 1s ease .5s forwards;
}

#mathe-pos-button {
  width: 25% !important;
  margin-top: 16px;
  margin-left: -6px;
  padding-left: 8%;
  width: 25% !important;
  display: block;
  transform: translateX(-150%);
  animation: leftRight 1s ease 1s forwards;
}

#oroi-proipotheseis {
  width: 30% !important;
  margin-top: 16px;
  padding-left: 8%;
  transform: translateX(-150%);
  animation: leftRight 1s ease 1.5s forwards;
}

.logo-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  margin-top: 30%;
  opacity: 0;
  animation: fadein 1s 1.5s forwards;
  background-image: linear-gradient(#33333300, #333222);
  padding: 40px 0px 20px 0px;
}

.logo-container img {
  width: 60% !important;
  height: auto;
  margin-right: 15px;
}

@media only screen and (max-height: 727px) {
  #main-text {
    width: 65% !important;
    padding-top: 25%;
  }

  .logo-container {
    margin-top: 25%;
  }
}

@media only screen and (max-height: 427px) {
  #main-text {
    width: 40% !important;
    padding-top: 5%;
  }

  #mathe-pos-button {
    width: 15% !important;
  }

  .logo-container {
    margin-top: 6%;
  }

  .logo-container img {
    width: 25% !important;
  }
}

@keyframes leftRight {
  0% {
      transform: translateX(-150%);
  }

  100% {
      transform: translateX(0);
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}