@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
@-webkit-keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-480px) rotate(-360deg);
            transform: translateX(-480px) rotate(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-480px) rotate(-360deg);
            transform: translateX(-480px) rotate(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.45;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.45;
  }
}
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-67.5px);
            transform: translateY(-67.5px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-36px);
            transform: translateY(-36px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-18px);
            transform: translateY(-18px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-9px);
            transform: translateY(-9px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-67.5px);
            transform: translateY(-67.5px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-36px);
            transform: translateY(-36px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-18px);
            transform: translateY(-18px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-9px);
            transform: translateY(-9px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@-webkit-keyframes puff-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(6);
            transform: scale(6);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
}
@keyframes puff-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(6);
            transform: scale(6);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
}
@-webkit-keyframes sha{
    0%{-webkit-transform:scale(1); transform:scale(1); opacity:0.45;
    }
    25%{-webkit-transform:scale(0.5); transform:scale(0.5); opacity:0.275;
    }
    50%{-webkit-transform:scale(0.5); transform:scale(0.75); opacity:0.375;
    }
    75%{-webkit-transform:scale(0.5); transform:scale(0.90); opacity:0.425;
    }
    100%{-webkit-transform:scale(1); transform:scale(1); opaciy:0.45;
    }   
}
@keyframes sha{
    0%{-webkit-transform:scale(1); transform:scale(1); opacity:0.45;
    }
    25%{-webkit-transform:scale(0.5); transform:scale(0.5); opacity:0.275;
    }
    50%{-webkit-transform:scale(0.5); transform:scale(0.75); opacity:0.375;
    }
    75%{-webkit-transform:scale(0.5); transform:scale(0.90); opacity:0.425;
    }
    100%{-webkit-transform:scale(1); transform:scale(1); opaciy:0.45;
    }   
}
@-webkit-keyframes flicker-out-1 {
  0% {
    opacity: 1;
  }
  13.9% {
    opacity: 1;
  }
  14% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  14.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  15% {
    opacity: 1;
  }
  22.9% {
    opacity: 1;
  }
  23% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  24.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  25% {
    opacity: 1;
  }
  34.9% {
    opacity: 1;
  }
  35% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  39.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  40% {
    opacity: 1;
  }
  42.9% {
    opacity: 1;
  }
  43% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  44.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  54.9% {
    opacity: 1;
  }
  55% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  69.4% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  69.5% {
    opacity: 1;
  }
  69.9% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  79.4% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  79.9% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  89.8% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  89.9% {
    opacity: 1;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  90% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes flicker-out-1 {
  0% {
    opacity: 1;
  }
  13.9% {
    opacity: 1;
  }
  14% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  14.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  15% {
    opacity: 1;
  }
  22.9% {
    opacity: 1;
  }
  23% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  24.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  25% {
    opacity: 1;
  }
  34.9% {
    opacity: 1;
  }
  35% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  39.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  40% {
    opacity: 1;
  }
  42.9% {
    opacity: 1;
  }
  43% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  44.9% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  54.9% {
    opacity: 1;
  }
  55% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  69.4% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  69.5% {
    opacity: 1;
  }
  69.9% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  79.4% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  79.9% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  89.8% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  89.9% {
    opacity: 1;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  90% {
    opacity: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ayc {
	0%{-webkit-transform:scale(0); transform:scale(0);
	}
	
	100%{-webkit-transform:scale(1); transform:scale(1)
	}
}
@keyframes ayc {
	0%{-webkit-transform:scale(0); transform:scale(0);
	}
	
	100%{-webkit-transform:scale(1); transform:scale(1)
	}
}
@-webkit-keyframes ay{
	0%{-webkit-transform:translate(0vw, 10px) scale(1); transform:translate(0vw, 10px) scale(1)}
	100%{-webkit-transform:translate(66vw, 30vh) scale(0.52015); transform:translate(66vw, 30vh) scale(0.52015)}	
}
@keyframes ay{
	0%{-webkit-transform:translate(0vw, 10px) scale(1); transform:translate(0vw, 10px) scale(1)}
	100%{-webkit-transform:translate(66vw, 30vh) scale(0.52015); transform:translate(66vw, 30vh) scale(0.52015)}	
}


@-webkit-keyframes ay2{
	0%{-webkit-transform:translate(0vw, 10px) scale(1); transform:translate(0vw, 10px) scale(1)}
	100%{-webkit-transform:translate(67vw, 30vh) scale(0.52015); transform:translate(67vw, 30vh) scale(0.52015)}	
}
@keyframes ay2{
	0%{-webkit-transform:translate(0vw, 10px) scale(1); transform:translate(0vw, 10px) scale(1)}
	100%{-webkit-transform:translate(67vw, 30vh) scale(0.52015); transform:translate(67vw, 30vh) scale(0.52015)}	
}
@-webkit-keyframes slide-out-fwd-bottom {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(600px) translateY(300px);
            transform: translateZ(600px) translateY(300px);
    opacity: 0;
  }
}
@keyframes slide-out-fwd-bottom {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(600px) translateY(300px);
            transform: translateZ(600px) translateY(300px);
    opacity: 0;
  }
}
@-webkit-keyframes rot1{
    0%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
    
    50%{-webkit-transform:rotate(-3deg) scale(1.05); transform:rotate(-3deg) scale(1.025)}
    
    100%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
}

@keyframes rot1{
    0%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
    
    50%{-webkit-transform:rotate(-3deg) scale(1.05); transform:rotate(-3deg) scale(1.025)}
    
    100%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}   
}
@-webkit-keyframes rot2{
    0%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
    
    50%{-webkit-transform:rotate(6.3deg) scale(1.0125); transform:rotate(6.3deg) scale(1.0125)}
    
    100%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
}

@keyframes rot2{
    0%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
    
    50%{-webkit-transform:rotate(6.3deg) scale(1.0125); transform:rotate(6.3deg) scale(1.0125)}
    
    100%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}   
}
@-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;
  }
}
/*@-webkit-keyframes scale-in-center2 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center2 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}*/
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@-webkit-keyframes fade-in2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-in3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-in4 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in4 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes bounce-in-fwd {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.84);
            transform: scale(0.84);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-fwd {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.84);
            transform: scale(0.84);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}




/* Div layer for the entire container. */
#dc_container {
    font-family: 'Roboto', sans-serif;
	position: fixed;
	width: 100%; /*width: 100vw*/;
	height: 100%; /*height:100vh*/;
	margin: auto;
    font-size:0;
	top:0;
	left:0;
	background-color:#66449a;
	background-size: cover;
/*	display:none;*/
	z-index: 999999999999;
}

#dc_content {
	position: absolute;
	width: 100%; /* width: 100vw*/;
	height: 100%; /*height:100vh*/;
	margin: 0;
	padding: 0;
	z-index: 100;
	background-color:#66449a;
	background-size: cover;
}

#page_1{
	position: relative;
	z-index: 800;
	width:100%;  /*width: 100vw*/; width:fit-content;
	height:100%; /*height:100vh*/;
	margin: 0;
	padding: 0;
	display: block;	
    display:flex;
    flex-direction:row	
}
/*#page_2{
	position: relative;	
	z-index: 850;
	width:100%;  width: 100vw;
	height:100%; height:100vh;
	margin: 0;
	padding: 0;
    display:none;
	}

#page_3{
	position: relative;
	z-index: 800;
	width:100%;  width: 100vw;
	height:100%; height:100vh;
	margin: 0;
	padding: 0;
	display: none;
    background-repeat: no-repeat;
	}*/
#info {
	position:absolute;
	display:none;
	bottom:1.5%;
	z-index: 999;
	left:3.5%;
	width:20px;
	height:20px;
	filter:invert(1)
}
#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: 1.5%;
	right: 3%;
	z-index: 999;	
	cursor: pointer;
	filter:invert(1)
}

.bounce-top {
	-webkit-animation: bounce-top 0.8s both;
	        animation: bounce-top 0.8s both;
}
.roll-in-left {
	-webkit-animation: roll-in-left 0.5s ease-out both;
	        animation: roll-in-left 0.5s ease-out both;
}
.puff-out-center {
	-webkit-animation: puff-out-center 0.75s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
	        animation: puff-out-center 0.75s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}
.sha{animation:sha 0.8s both;}
.fade-in {
	-webkit-animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
	        animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}
.ayc_ani{display:initial!important; animation:ayc 0.75s both}

.ay{display:initial!important; -webkit-animation:ay 0.75s ease-out both; animation:ay 0.75s ease-out both}
.ay2{display:initial!important; -wekbit-animation:ay2 0.75s ease-out both, flicker-out-1 1.75s linear both; animation:ay2 0.75s ease-out both, flicker-out-1 1.75s linear both}

.slide-out-fwd-bottom {
	-webkit-animation: slide-out-fwd-bottom 0.25s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-fwd-bottom 0.25s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.75s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0.75s both;
	        animation: tracking-in-expand 0.75s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0.75s both;
}
.scale-in-center {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 3s both;
}
.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s 1.5s both;
	        animation: bounce-in-top 1.1s 1.5s both;
}
.fade-in2 {
	-webkit-animation: fade-in2 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.25s both;
	        animation: fade-in2 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.25s both;
}
.bounce-in-fwd {
	-webkit-animation: bounce-in-fwd 1.1s 2s both;
	        animation: bounce-in-fwd 1.1s 2s both;
}
.fade-in3 {
	-webkit-animation: fade-in3 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both;
	        animation: fade-in3 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both;
}



/* SLIDE 1 */


.sl1{display:flex; flex-direction:column; background-color:#66449a; width:100vw; height:100%; align-items:center; justify-content:flex-end}


.tra1{margin-left:-100vw!important; transition:0.5s; transition-timing-function:ease-out!important; transition-delay:0.75s}
.tra2{margin-left:-200vw!important; transition:0.5s; transition-timing-function:ease-out!important; transition-delay:0.75s}
.c_tra{position:absolute; transform:translateX(100vw)!important; transition:0.5s; transition-timing-function:ease-out!important; transition-delay:0.75s}

@media not all and (min-resolution:.001dpcm) { 
    @media {
		.c_tra{position:absolute; margin-left:100vw!important; transform:unset!important; transition:0.5s; transition-timing-function:ease-out!important; transition-delay:0.75s}
        }
    }




.ball{width:156.8px; z-index:50; touch-action:manipulation}
.ball img{width:100%; height:auto; touch-action:manipulation}


.shadow{width:129px; z-index:30; opacity:0.4; margin-top:-18.5px; filter:blur(10px) brightness(0%)}
.shadow img{z-index:-1; width:100%; height:auto}




.tap{font-size:31.9px; opacity:0; z-index: 30; height:76px; font-weight:700; margin-top:39.45px; text-align:center; color:#f05025;}




.line{width:188.2px; z-index: 30; margin-top:17px; margin-bottom:27.5px}
.line img{width:100%; height:auto}

.you {width:368px; z-index: 30; position:relative; margin-bottom:49.4385px}
.you img{width:100%; height:auto}


.count{display:flex; width:368px; position:absolute; left:calc(50% - 22.25px); top:20px; -webkit-animation: fade-in4 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2.5s both;
	        animation: fade-in4 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2.5s both; transform-origin:left center} 


.countdown{font-size:74px; font-weight:900; color:#f05025}

.sec{width:16.6px; margin-left:4px; margin-top:8px}
.sec img{width:100%; height:auto;}


.aycu{position:absolute; z-index:10; top:10px; left:0; width:731.25px; mix-blend-mode:overlay; display:none}
.ayc{position:absolute; z-index:20; top:10px; left:0; width:687.365px; display:none}
.aycl{position:absolute; z-index:10; top:10px; left:0; width:773.945px; mix-blend-mode:overlay; display:none}
.ayc img, .aycu img, .aycl img{width:100%; height:auto}

/* SLIDE 2 */

.sl2{display:flex; flex-direction:column; background-color:#66449a; width:100vw; height:100%; align-items:center; justify-content:flex-end}

/*.sl2upper{display:flex; width:100%; height:calc(100% - 68.5px)}*/
.sl2lower{display:flex; width:100%; height:68.5px; align-items:flex-start; justify-content:center}


.cablenet{width:243.35px;}
.cablenet img{width:100%; height:auto}


/* SLIDE 3 */

.sl3 .cablenet{opacity:0}

.sl3{display:flex; flex-direction:column; background-color:#66449a; width:100vw; height:100%; align-items:center; justify-content:flex-end}
.sl3upper{display:flex; flex-direction:column;  width:100%; height: calc(100vh - 129.25px); align-items:center; justify-content:flex-end}
.football{width:330px; margin-bottom:30.44px}
.line2{width:334.44px}


.cups{display:flex; z-index:40; width:82.72%; height:90%; flex-direction:column; justify-content:center}

.cont{display:flex; align-items:center; justify-content:center; width:346.4px; height:409px; margin-bottom:41.5px; margin-top:27.9px; background-image: url("assets/cont_main.svg"); background-repeat:no-repeat; background-size: 100% 100%}

.cont:after {
    content: "";
    display: inline-block;
    position:absolute;
    width:362.45px;
    height:421.66px;
    background-image: url(assets/cont_2.svg);
    background-repeat: no-repeat;
    background-size:100% 100%;
    mix-blend-mode:overlay;
    z-index:20;
    animation: rot1 3s infinite both
    
}
.cont:before {
    content: "";
    display: inline-block;
    position:absolute;
    width:386.5px;
    height:449.66px;
    background-image: url(assets/cont_3.svg);
    background-repeat: no-repeat;
    background-size:100% 100%;
    mix-blend-mode:overlay;
    z-index:30;
    animation: rot2 8s infinite both
    
}

.cr1{display:flex; height:25%; align-items:center; justify-content:space-between}
.cr2{display:flex; height:25%; align-items:center; justify-content:space-between}
.cr3{display:flex; height:25%; align-items:center; justify-content:space-between}
.cr4{display:flex; width:100%; height:25%; align-items:center; justify-content:space-between; align-self:center}

/*.cr1 img:nth-of-type(1){width:55.785px; height:auto}*/
.cr1 img:nth-of-type(1){width:120px; height:auto}
.cr1 img:nth-of-type(2){width:80.7px; height:auto}
.cr1 img:nth-of-type(3){width:53.48px; height:auto}
/*.cr1 img:nth-of-type(4){width:45.14px; height:auto}*/

.cr2 img:nth-of-type(1){width:45.14px; height:auto}
.cr2 img:nth-of-type(2){width:50.685px; height:auto}
.cr2 img:nth-of-type(3){width:41.483px; height:auto}
.cr2 img:nth-of-type(4){width:47.815px; height:auto}
/*.cr2 img:nth-of-type(4){width:60.362px; height:auto}*/

.cr3 img:nth-of-type(1){width:60.362px; height:auto}
.cr3 img:nth-of-type(2){width:58.545px; height:auto}
.cr3 img:nth-of-type(3){width:40.5px; height:auto}
.cr3 img:nth-of-type(4){width:55.775px; height:auto}
/*.cr3 img:nth-of-type(4){width:52.718px; height:auto}*/

.cr4 img:nth-of-type(1){width:52.718px; height:auto}
.cr4 img:nth-of-type(2){width:45.627px; height:auto}
.cr4 img:nth-of-type(3){width:52.07px; height:auto}
.cr4 img:nth-of-type(4){width:73.86px; height:auto}

















.football img, .line2 img{width:100%; height:auto}


.learn_more{display:flex; margin-bottom:26.5px; width:100%; align-items:flex-start; justify-content:center; filter:drop-shadow(0.33px 0.33px 0.33px #fff)}
.lm{width:217.15px; filter:drop-shadow(0.33px 0.33px 0.33px #fff)}
.lm img{width:100%; height:auto}
.sl3lower{display:flex; width:100%; height:68.5px; align-items:flex-start; justify-content:center}


/* Big Phone (tall screen) */
@media  screen and (max-device-width:414px) and (-webkit-min-device-pixel-ratio:2) {
    
    
    
    
    
    
    
    
    
    



	
	

	
	
}

/* Big Phone (normal screen) */
/*@media  screen and (max-device-width:414px) and (max-height:725px) and (-webkit-min-device-pixel-ratio:2) {}*/


/* Big Phone (short screen) */
@media  screen and (max-device-width:414px) and (max-height:622px) and (-webkit-min-device-pixel-ratio:2) {
    @-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-48px);
            transform: translateY(-48px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-48px);
            transform: translateY(-48px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
 @-webkit-keyframes ay{
	0%{-webkit-transform:translate(0vw, 8.65px) scale(1); transform:translate(0vw, 8.65px) scale(1)}
	100%{-webkit-transform:translate(71vw, 30vh) scale(0.52015); transform:translate(71vw, 30vh) scale(0.52015)}	
}
@keyframes ay{
	0%{-webkit-transform:translate(0vw, 8.65px) scale(1); transform:translate(0vw, 8.65px) scale(1)}
	100%{-webkit-transform:translate(71vw, 30vh) scale(0.52015); transform:translate(71vw, 30vh) scale(0.52015)}	
}   
@-webkit-keyframes rot1{
    0%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
    
    50%{-webkit-transform:rotate(-2.85deg) scale(1.025); transform:rotate(-2.85deg) scale(1.025)}
    
    100%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
}

@keyframes rot1{
    0%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
    
    50%{-webkit-transform:rotate(-2.85deg) scale(1.025); transform:rotate(-2.85deg) scale(1.025)}
    
    100%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}   
}
@-webkit-keyframes rot2{
    0%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
    
    50%{-webkit-transform:rotate(5.9deg) scale(1.0125); transform:rotate(5.9deg) scale(1.0125)}
    
    100%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
}

@keyframes rot2{
    0%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}
    
    50%{-webkit-transform:rotate(5.9deg) scale(1.0125); transform:rotate(5.9deg) scale(1.0125)}
    
    100%{-webkit-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1)}   
}   
/* SLIDE 1 */


.ball{width:148.8px}


.shadow{width:122.4px; margin-top:-16px}




.tap{font-size:30.2px; height:65.7px; margin-top:34.1px}




.line{width:178.6px; margin-top:14.7px; margin-bottom:23.78px}


.you {width:349.2px; margin-bottom:42.7643px}


.count{width:349.2px; left:calc(50% - 21.115px); top:17.3px} 


.countdown{font-size:70.2px}

.sec{width:15.75px; margin-left:3.8px; margin-top:6.92px}



.aycu{top:8.65px; width:693.95px}
.ayc{top:8.65px; width:652.3px}
.aycl{top:8.65px; width:734.47px}

/* SLIDE 2 */


.sl2lower{height:59.25px}


.cablenet{width:230.93px}


/* SLIDE 3 */


.sl3upper{height: calc(100vh - 111.8px)}
.football{width:313.17px; margin-bottom:26.33px}
.line2{width:317.38px}


.cups{width:82.72%; height:90%}

.cont{width:328.7px; height:353.785px; margin-bottom:35.8975px; margin-top:24.1335px}

.cont:after {
    width:343.965px;
    height:364.735px
}
.cont:before {
    width:366.7885px;
    height:388.95px
}



/*.cr1 img:nth-of-type(1){width:52.939px}*/
.cr1 img:nth-of-type(1){width:113.88px}	
.cr1 img:nth-of-type(2){width:76.584px}
.cr1 img:nth-of-type(3){width:50.752px}
/*.cr1 img:nth-of-type(4){width:42.837px}*/
	
	
.cr2 img:nth-of-type(1){width:42.837px}	
.cr2 img:nth-of-type(2){width:48.1px}
.cr2 img:nth-of-type(3){width:39.367px}
.cr2 img:nth-of-type(4){width:45.376px}
/*.cr2 img:nth-of-type(4){width:57.283px}*/
	
	
	
	
.cr3 img:nth-of-type(1){width:57.283px}	
.cr3 img:nth-of-type(2){width:55.559px}
.cr3 img:nth-of-type(3){width:38.434px}
.cr3 img:nth-of-type(4){width:52.93px}
/*.cr3 img:nth-of-type(4){width:50px}*/
	
.cr4 img:nth-of-type(1){width:50px}	
.cr4 img:nth-of-type(2){width:43.3px}
.cr4 img:nth-of-type(3){width:49.414px}
.cr4 img:nth-of-type(4){width:70px}



.learn_more{margin-bottom:22.9px}
.lm{width:206px}
.sl3lower{height:59.25px}
	
	
}




/* Medium+ Phone (tall screen) */
@media  screen and (max-device-width:393px) and (-webkit-min-device-pixel-ratio:2) {
    
/* SLIDE 1 */

.ball{width:148.8px}

.shadow{width:122.4px; margin-top:-18.5px}

.tap{font-size:30.2px; height:76px; margin-top:39.45px}

.line{width:178.6px; margin-top:17px; margin-bottom:27.5px}

.you {width:349.2px; margin-bottom:49.4385px}

.count{width:349.2px; left:calc(50% - 21.115px); top:20px} 
.countdown{font-size:70.2px}

.sec{width:15.75px; margin-left:3.8px; margin-top:8px}

.aycu{top:10px;  width:693.95px}
.ayc{top:10px; width:652.3px}
.aycl{top:10px; width:734.47px}


/* SLIDE 2 */


.sl2lower{height:68.5px}
.cablenet{width:230.93px;}

/* SLIDE 3 */


.sl3upper{height:calc(100vh - 129.25px)}
.football{width:313.17px; margin-bottom:30.44px}
.line2{width:317.38px}


.cups{width:82.72%; height:90%}

.cont{width:328.7px; height:409px; margin-bottom:41.5px; margin-top:27.9px}

.cont:after {
    width:343.965px;
    height:421.66px  
}
.cont:before {
    width:366.7885px;
    height:449.66px
}

/*.cr1 img:nth-of-type(1){width:52.939px}*/
.cr1 img:nth-of-type(1){width:113.88px}	
.cr1 img:nth-of-type(2){width:76.584px}
.cr1 img:nth-of-type(3){width:50.752px}
/*.cr1 img:nth-of-type(4){width:42.837px}*/
	
	
.cr2 img:nth-of-type(1){width:42.837px}	
.cr2 img:nth-of-type(2){width:48.1px}
.cr2 img:nth-of-type(3){width:39.367px}
.cr2 img:nth-of-type(4){width:45.376px}
/*.cr2 img:nth-of-type(4){width:57.283px}*/
	
	
	
	
.cr3 img:nth-of-type(1){width:57.283px}	
.cr3 img:nth-of-type(2){width:55.559px}
.cr3 img:nth-of-type(3){width:38.434px}
.cr3 img:nth-of-type(4){width:52.93px}
/*.cr3 img:nth-of-type(4){width:50px}*/
	
.cr4 img:nth-of-type(1){width:50px}	
.cr4 img:nth-of-type(2){width:43.3px}
.cr4 img:nth-of-type(3){width:49.414px}
.cr4 img:nth-of-type(4){width:70px}	
	
	
	

.learn_more{margin-bottom:26.5px}
.lm{width:206px}
.sl3lower{height:68.5px}    
    
	


	
	
	
	
}

/* Medium+ Phone (normal screen) */
@media  screen and (max-device-width:393px) and (max-height:680px) and (-webkit-min-device-pixel-ratio:2) {
    @-webkit-keyframes ay{
	0%{-webkit-transform:translate(0vw, 9.35px) scale(1); transform:translate(0vw, 9.35px) scale(1)}
	100%{-webkit-transform:translate(67vw, 30vh) scale(0.52015); transform:translate(67vw, 30vh) scale(0.52015)}	
    }
    @keyframes ay{
	0%{-webkit-transform:translate(0vw, 9.35px) scale(1); transform:translate(0vw, 9.35px) scale(1)}
	100%{-webkit-transform:translate(67vw, 30vh) scale(0.52015); transform:translate(67vw, 30vh) scale(0.52015)}	
    }     
/* SLIDE 1 */



.shadow{margin-top:-17.3px}

.tap{height:71px; margin-top:36.88px}

.line{margin-top:15.9px; margin-bottom:25.7px}

.you {margin-bottom:46.22px}

.count{left:calc(50% - 21.115px); top:18.7px} 

.sec{margin-top:7.48px}

.aycu{top:9.35px}
.ayc{top:9.35px}
.aycl{top:9.35px}


/* SLIDE 2 */


.sl2lower{height:64px}

/* SLIDE 3 */


.sl3upper{height:calc(100vh - 120.84px)}
.football{margin-bottom:28.46px}


.cont{height:382.415px; margin-bottom:38.8px; margin-top:26px}

.cont:after {
    width:343.965px;
    height:394.25px  
}
.cont:before {
    width:366.7885px;
    height:420.43px
}



.learn_more{margin-bottom:24.7px}
.sl3lower{height:64px}        
    
    
    
}

/* Medium+ Phone (short screen) */
@media  screen and (max-device-width:393px) and (max-height:660px) and (-webkit-min-device-pixel-ratio:2) {
    @-webkit-keyframes ay{
	0%{-webkit-transform:translate(0vw, 9px) scale(1); transform:translate(0vw, 9px) scale(1)}
	100%{-webkit-transform:translate(66.5vw, 30vh) scale(0.52015); transform:translate(66.5vw, 30vh) scale(0.52015)}	
    }
    @keyframes ay{
	0%{-webkit-transform:translate(0vw, 9px) scale(1); transform:translate(0vw, 9px) scale(1)}
	100%{-webkit-transform:translate(66.5vw, 30vh) scale(0.52015); transform:translate(66.5vw, 30vh) scale(0.52015)}	
    }   
/* SLIDE 1 */



.shadow{margin-top:-16.7px}

.tap{height:68.65px; margin-top:35.66px}

.line{margin-top:15.3px; margin-bottom:24.8px}

.you {margin-bottom:44.69px}

.count{left:calc(50% - 21.115px); top:18px} 

.sec{margin-top:7.23px}

.aycu{top:9px}
.ayc{top:9px}
.aycl{top:9px}


/* SLIDE 2 */


.sl2lower{height:61.8px}

/* SLIDE 3 */


.sl3upper{height:calc(100vh - 116.85px)}
.football{margin-bottom:27.52px}


.cont{height:369.795px; margin-bottom:37.5px; margin-top:25px}

.cont:after {
    width:343.965px;
    height:381.23px  
}
.cont:before {
    width:366.7885px;
    height:406.55px
}



.learn_more{margin-bottom:23.8px}
.sl3lower{height:61px}     
    
    
}







/* Medium Phone (tall screen) */
@media  screen and (max-device-width:375px) and (-webkit-min-device-pixel-ratio:2) {
    @-webkit-keyframes ay{
	0%{-webkit-transform:translate(0vw, 8.73px) scale(1); transform:translate(0vw, 8.73px) scale(1)}
	100%{-webkit-transform:translate(66.5vw, 30vh) scale(0.52015); transform:translate(66.5vw, 30vh) scale(0.52015)}	
    }
    @keyframes ay{
	0%{-webkit-transform:translate(0vw, 8.73px) scale(1); transform:translate(0vw, 8.73px) scale(1)}
	100%{-webkit-transform:translate(66.5vw, 30vh) scale(0.52015); transform:translate(66.5vw, 30vh) scale(0.52015)}	
    }    
/* SLIDE 1 */

.ball{width:141.9px}

.shadow{width:116.7px; margin-top:-16.15px}

.tap{font-size:28.81px; height:66.34px; margin-top:34.43px}

.line{width:170.3px; margin-top:14.8px; margin-bottom:24px}

.you{width:333.1px; margin-bottom:43.1598px}

.count{width:333.1px; left:calc(50% - 20.143px); top:17.46px} 
.countdown{font-size:66.9px}

.sec{width:15px; margin-left:3.6px; margin-top:6.9px}

.aycu{top:8.73px;  width:662px}
.ayc{top:8.73px; width:622.2px}
.aycl{top:8.73px; width:700.6px}


/* SLIDE 2 */


.sl2lower{height:59.8px}
.cablenet{width:220.3px}

/* SLIDE 3 */


.sl3upper{height:calc(100vh - 112.83px)}
.football{width:298.76px; margin-bottom:26.57px}
.line2{width:302.78px}


.cups{width:82.72%; height:90%}

.cont{width:313.5px; height:357px; margin-bottom:36.2px; margin-top:24.3px}

.cont:after {
    width:328.142px;
    height:402.26px  
}
.cont:before {
    width:349.916px;
    height:428.97px
}


.cr1 img:nth-of-type(1){width:108.64px}	
.cr1 img:nth-of-type(2){width:73px}
.cr1 img:nth-of-type(3){width:48.41px}
/*.cr1 img:nth-of-type(4){width:40.86px}*/
	
	
.cr2 img:nth-of-type(1){width:40.86px}
.cr2 img:nth-of-type(2){width:45.88px}
.cr2 img:nth-of-type(3){width:37.55px}
.cr2 img:nth-of-type(4){width:43.28px}
/*.cr2 img:nth-of-type(4){width:54.64px}*/
	

.cr3 img:nth-of-type(1){width:54.64px}	
.cr3 img:nth-of-type(2){width:53px}
.cr3 img:nth-of-type(3){width:36.66px}
.cr3 img:nth-of-type(4){width:50.49px}
/*.cr3 img:nth-of-type(4){width:47.7px}*/


.cr4 img:nth-of-type(1){width:47.7px}
.cr4 img:nth-of-type(2){width:41.3px}
.cr4 img:nth-of-type(3){width:47.14px}
.cr4 img:nth-of-type(4){width:66.78px}

	
	
	
	
	
	
.learn_more{margin-bottom:40px}
.lm{width:196.5px}
.sl3lower{height:59.8px}    



	
	
	
}

/* Medium Phone (short screen) */
@media  screen and (max-device-width:375px) and (max-height:628px) and (-webkit-min-device-pixel-ratio:2) {
    @-webkit-keyframes ay{
	0%{-webkit-transform:translate(0vw, 8.63px) scale(1); transform:translate(0vw, 8.63px) scale(1)}
	100%{-webkit-transform:translate(70vw, 30vh) scale(0.52015); transform:translate(70vw, 30vh) scale(0.52015)}	
    }
    @keyframes ay{
	0%{-webkit-transform:translate(0vw, 8.63px) scale(1); transform:translate(0vw, 8.63px) scale(1)}
	100%{-webkit-transform:translate(70vw, 30vh) scale(0.52015); transform:translate(70vw, 30vh) scale(0.52015)}	
    }  

/* SLIDE 1 */

.ball{width:136.2px}

.shadow{width:112px; margin-top:-15.9px}

.tap{font-size:27.65px; height:65.5px; margin-top:15px}

.line{width:163.4px; margin-top:14px; margin-bottom:22px}

.you{width:319.7px; margin-bottom:36px}

.count{width:319.7px; left:calc(50% - 19.33px); top:17.2px} 
.countdown{font-size:64.2px}

.sec{width:14.4px; margin-left:3.45px; margin-top:6.9px}

.aycu{top:8.63px;  width:635.5px}
.ayc{top:8.63px; width:597.3px}
.aycl{top:8.63px; width:672.5px}


/* SLIDE 2 */


.sl2lower{height:59.1px}
.cablenet{width:211.4px}

/* SLIDE 3 */


.sl3upper{height:calc(100vh - 111.54px)}
.football{width:286.8px; margin-bottom:20px; margin-top:20px}
.line2{width:290.66px}


.cups{width:82.72%; height:90%}

.cont{width:300.9px; height:352.9px; margin-bottom:30px; margin-top:20px}

.cont:after {
    width:315px;
    height:363.89px  
}
.cont:before {
    width:335.9px;
    height:388px
}

.cr1 img:nth-of-type(1){width:104.29px}
.cr1 img:nth-of-type(2){width:70px}
.cr1 img:nth-of-type(3){width:46.47px}
/*.cr1 img:nth-of-type(4){width:39.22px}*/

.cr2 img:nth-of-type(1){width:39.22px}	
.cr2 img:nth-of-type(2){width:44px}
.cr2 img:nth-of-type(3){width:36px}
.cr2 img:nth-of-type(4){width:41.54px}
/*.cr2 img:nth-of-type(4){width:52.45px}*/
	
.cr3 img:nth-of-type(1){width:52.45px}	
.cr3 img:nth-of-type(2){width:50.88px}
.cr3 img:nth-of-type(3){width:35.19px}
.cr3 img:nth-of-type(4){width:48.47px}
/*.cr3 img:nth-of-type(4){width:45.79px}*/

.cr4 img:nth-of-type(1){width:45.79px}	
.cr4 img:nth-of-type(2){width:38px}
.cr4 img:nth-of-type(3){width:45.25px}
.cr4 img:nth-of-type(4){width:64.1px}

.learn_more{margin-bottom:26px}
.lm{width:188.6px}
.sl3lower{height:59.1px}    	

	

}

/* Small Phone */
@media screen and (max-device-width:360px) and (-webkit-min-device-pixel-ratio:2) {
    @-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-67.5px);
            transform: translateY(-67.5px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-36px);
            transform: translateY(-36px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-18px);
            transform: translateY(-18px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-9px);
            transform: translateY(-9px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-67.5px);
            transform: translateY(-67.5px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-36px);
            transform: translateY(-36px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-18px);
            transform: translateY(-18px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-9px);
            transform: translateY(-9px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
    @-webkit-keyframes ay{
	0%{-webkit-transform:translate(0vw, 8.63px) scale(1); transform:translate(0vw, 8.63px) scale(1)}
	100%{-webkit-transform:translate(66.5vw, 30vh) scale(0.52015); transform:translate(66.5vw, 30vh) scale(0.52015)}	
    }
    @keyframes ay{
	0%{-webkit-transform:translate(0vw, 8.63px) scale(1); transform:translate(0vw, 8.63px) scale(1)}
	100%{-webkit-transform:translate(66.5vw, 30vh) scale(0.52015); transform:translate(66.5vw, 30vh) scale(0.52015)}	
    }  
    
    
/* SLIDE 1 */

.ball{width:136.2px}

.shadow{width:112px; margin-top:-15.5px}

.tap{font-size:27.65px; height:63.8px; margin-top:33.15px}

.line{width:163.4px; margin-top:14.25px; margin-bottom:23.1px}

.you{width:319.7px; margin-bottom:41.5px}

.count{width:319.7px; left:calc(50% - 19.33px); top:16.8px} 
.countdown{font-size:64.2px}

.sec{width:14.4px; margin-left:3.45px; margin-top:6.6px}

.aycu{top:8.63px;  width:635.5px}
.ayc{top:8.63px; width:597.3px}
.aycl{top:8.63px; width:672.5px}


/* SLIDE 2 */


.sl2lower{height:57.5px}
.cablenet{width:211.4px}

/* SLIDE 3 */


.sl3upper{height:calc(100vh - 108.65px)}
.football{width:286.8px; margin-bottom:25.58px}
.line2{width:290.66px}


.cups{width:82.72%; height:90%}

.cont{width:300.9px; height:352.9px; margin-bottom:34.8px; margin-top:23.4px}

.cont:after {
    width:315px;
    height:363.89px  
}
.cont:before {
    width:335.9px;
    height:388px
}




.learn_more{margin-bottom:38.5px}
.lm{width:188.6px}
.sl3lower{height:57.5px}    
	
	

}