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

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@-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;
  }
}
/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
/**
 * ----------------------------------------
 * animation slide-in-fwd-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-bottom {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(800px);
            transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-bottom {
  0% {
    -webkit-transform: translateZ(-1400px) translateY(800px);
            transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}


body, body * {
	vertical-align: baseline;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

/* Div layer for the entire container. */
#dc_container {
	position: fixed;
	width: 100%;
	height: 100%;
	margin: auto;
	top:0;
	left:0;
	display:none;
	z-index: 999999999999;
}

#dc_content {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 100;
}

#page_1{
	position: relative;
	z-index: 800;
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
	display: block;
	background-color: #FEBB14;
	background-size: cover;
    background-repeat: no-repeat;
	}

#down{position:absolute; top:15%; width:45%; left:27.5%;
-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
 animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
}
#me{position:absolute; top:20%; width:45%; left:27.5%;
-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2.0s both;
 animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2.0s both;
}
#arrow-l{position:absolute; top:45%; width:12%; left:15%; display:none;
-webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940)  infinite forwards;
 animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940)  infinite forwards;
}
#button1{position:absolute; top:37%; width:40%; left:30%; 
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 4s both;
 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 4s both;
}
#button1 img {width:100%; height:auto;}
#arrow-r{position:absolute; top:45%; width:12%; right:16%; display:none;
-webkit-animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940)  infinite forwards;
 animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940)  infinite forwards;
}
#and{position:absolute; top:62%; width:45%; left:27.5%;
-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2.5s both;
 animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2.5s both;
}
#win{position:absolute; top:72%; width:45%; left:27.5%;
-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s both;
 animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s both;
}

#page_2{
	position: relative;	
	display:none;
	z-index: 850;
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
	background-image: url("https://richmedia.ad-sphere.eu/ads/mcd/mcd468/assets/slide2_background.jpg");
	background-repeat:no-repeat;
	background-position: center center;
	background-size:cover;
	background-attachment:fixed;
	}
#arrow-l2{position:absolute; top:9%; width:10%; left:25%; display:none;
-webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940)   infinite forwards;
 animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940)  infinite forwards;}
#button2 {position:absolute; top:5%; width:25%; left:37.5%;
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 3.5s both;
 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 3.5s both;
}
#button2 img {width:100%; height:auto;}
#arrow-r2 {position:absolute; top:9%; width:10%; right:25%; display:none;
-webkit-animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite forwards;
 animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite forwards;
}
#title {position:absolute; top:20%; width:55%; left:22.5%;
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 3s both;
 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 3s both;
}
#title img {width:100%; height:auto;}
#mob-1 {position:absolute; top:59%; width:40%; left:4%; z-index:800;
-webkit-animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
 animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
}
#mob-1 img {width:100%; height:auto;}
#mob-2 {position:absolute; top:50%; width:35%; left:30%; z-index:900;
-webkit-animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2.5s both;
 animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2.5s both;
}
#mob-2 img {width:100%; height:auto;}
#mob-3 {position:absolute; top:58%; width:50%; left:47%; z-index:800;
-webkit-animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
 animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
}
#mob-3 img {width:100%; height:auto;}
#terms {position:absolute; bottom:5px; width:30px; right:5px; text-align:center; font-family: tahoma; font-weight:400; font-size: 10px;
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s both;
 animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s both;
}


#info {
	position:absolute;
	display:none;
	bottom:5px;
	z-index: 999;
	left:5px;
	width:20px;
	height:20px;
}
#info img {
	position:inherit;
	width:100%
}
/* Invisible button for background clickthrough. */

#dc_background_exit{
	position: absolute;
	width: 25px;
	height: 25px;
	top: 10px;
	right: 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:none;
	position: absolute;
	width: 25px;
	height: auto;
	top: 5px;
	right: 5px;
	z-index: 999;	
	cursor: pointer;
}
@media  screen and (max-device-width:375px) and (-webkit-min-device-pixel-ratio:2) {
	#down{top:15%; width:40%; left:30%;}
	#me{ top:20%; width:40%; left:30%;}
	#arrow-l{top:43%; width:12%; left:15%; }
	#button1{ top:35%; width:40%; left:30%; }
	#arrow-r{top:43%; width:12%; right:16%; }
	#and{ top:62%; width:40%; left:30%;}
	#win{ top:72%; width:40%; left:30%;}

	#arrow-l2{top:9%; width:10%; left:25%;}
	#button2 {top:5%; width:25%; left:37.5%;}
	#arrow-r2 {top:9%; width:10%; right:25%;}
	#title {top:19%; width:55%; left:22.5%;}
	#mob-1 {top:59%; width:40%; left:4%;}
	#mob-2 {top:50%; width:35%; left:30%;}
	#mob-3 {top:58%; width:50%; left:47%;}
	#terms {bottom:1.5%; width:50%; left:25%;}
}