@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
}


/* SCENE 1 */


.hb2-jun-24-wrap{display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:center; position:relative; width:100%; height:100%; background-color:#ddd; z-index:40; background-image: url("https://richmedia.ad-sphere.eu/HB-PPC/img/hb2-jun-24-bg.svg"); background-repeat:no-repeat; background-position:bottom center; background-size:100% auto}
.hb2-jun-24-wrap svg{overflow:visible!important}

.hb2-mastercard-top-wrap{position:absolute; z-index:41; display:inline-flex; justify-content:center; align-items:center; width:74.5%; left:4.6%; bottom:280px}

.hb2-footer-wrap{position:absolute; z-index:50; display:flex; justify-content:flex-start; align-items:center; bottom:0.5%; left:0}
.hb2-footer-wrap > .hb2-priceless-planet-coalition{display:inline-flex; justify-content:center; align-items:center; margin-left:2.3%; width:16%}
.hb2-footer-wrap > .hb2-in-partnership-with{display:inline-flex; justify-content:center; align-items:center; margin-left:2.3%; width:8.7%}
.hb2-footer-wrap > .hb2-world-resources-instutute{display:inline-flex; justify-content:center; align-items:center; margin-left:2.2%; width:19.9%}
.hb2-footer-wrap > .hb2-conservation-international{display:inline-flex; justify-content:center; align-items:center; margin-left:3.3%; width:24%}

/******/

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}	
	
}