/******************************************************************
Theme Name: Champion App
Description: 
Author: GOOLA
Author URI: http://www.goola-la.com
Version: 1.0
**/


@font-face {
  font-family: 'ploni';
  src: url('ploni/ploni-ultralight-aaa.eot?v=1');
  src: url('ploni/ploni-ultralight-aaa.eot?#iefix&v=1') format('embedded-opentype'), url('ploni/ploni-ultralight-aaa.woff?v=1') format('woff'), url('ploni/ploni-ultralight-aaa.ttf?v=1') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'ploni';
  src: url('ploni/ploni-regular-aaa.eot?v=1');
  src: url('ploni/ploni-regular-aaa.eot?#iefix&v=1') format('embedded-opentype'), url('ploni/ploni-regular-aaa.woff?v=1') format('woff'), url('ploni/ploni-regular-aaa.ttf?v=1') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ploni';
  src: url('ploni/ploni-demibold-aaa.eot?v=1');
  src: url('ploni/ploni-demibold-aaa.eot?#iefix&v=1') format('embedded-opentype'), url('ploni/ploni-demibold-aaa.woff?v=1') format('woff'), url('ploni/ploni-demibold-aaa.ttf?v=1') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'ploni';
  src: url('ploni/ploni-bold-aaa.eot?v=1');
  src: url('ploni/ploni-bold-aaa.eot?#iefix&v=1') format('embedded-opentype'), url('ploni/ploni-bold-aaa.woff?v=1') format('woff'), url('ploni/ploni-bold-aaa.ttf?v=1') format('truetype');
  font-weight: 900;
  font-style: normal;
}
body {
	padding:0;
	margin:0;
	font-family:"ploni";
	font-weight:300;
	color:white;
	background:#020755;
	font-size:20px;
	line-height:28px;
	max-width: 2560px;
    margin: 0 auto;
	direction:rtl;
	text-align:right;
}
header {
	position: fixed;
    z-index: 1111;
    padding: 40px 5%;
	left:0;
	right:0;
}
header .dwl-button .tt {
	display:inline-block;
	vertical-align:middle;
}
header .dwl-button svg {
	display:inline-block;
	vertical-align:middle;
	margin-right:8px;
}
header .dwl-button .dwl-mobile {
	display:none;
}
header .dwl-button .dwl-mobile,
header .dwl-button .dwl-desktop {
	position: absolute;
    width: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 50px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}
header .dwl-button svg path {
	fill:#1E62F2;
}
header .dwl-button {
    float: right;
    height: 28px;
    line-height: 28px;
    border: 1px solid #1E62F2;
    padding: 8px 28px;
    border-radius: 28px;
    background-color: white;
	color:#1E62F2;
    cursor: pointer;
    font-weight: 600;
    font-size: 20px;	
	position:relative;
}
header .logo {
	float:left;
}
.float button.close:before {
	transform:rotate(-45deg);
}
.float .close:before,
.float .close:after {
	content:"";
	width:2px;
	height:20px;
	margin:auto;
	top:0;
	bottom:0;
	right:0;
	left:0;
	transform:rotate(45deg);
	background: white;
    position: absolute;
}
.float .close {
	position:absolute;
	right:5vw;
	top:5vw;
	width:25px;
	height:25px;
	background:transparent;
	cursor:pointer;
	padding:0;
	border:1px solid white;
	border-radius:4px;
}
.float .frap img {
	max-width: 80%;
    display: block;
    margin: auto;
    max-height: 80vh;
    position: absolute;
    top: 50vh;
    transform: translateY(-50%);
	margin:auto;
	right:0;
	left:0;
}
.float {
	display:none;
	position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #020755;
    z-index: 9999;
}
.goola-animate {
	position:fixed;
	height:100vh;
	width:100vw;
	overflow:hidden;
	top:0;
	right:0;
	left:0;
}
.scroll-hide {
	height:100vh;
}
.scroll-hide.half {
	height:50vh;
}
.scroll-hide.phase1 {
	height:200vh;
}
.anim1 .iphone-rap .iphone {
	height:100%;
	width:auto;
	position:relative;
	z-index:1;
}
.anim1 .iphone-rap.iphone1 .iphone {
	transform: translateX(-50%);
}
.anim1 .goola-animate .iphone-rap.iphone1 {
	transform: unset;
}
.anim1 .goola-animate .iphone-rap {
	position: absolute;
    margin: auto;
    right: auto;
    top: 65%;
	left:50%;
	transform: translateX(-50%);
}
.anim1 .iphone-rap {
	height:140%;
	margin:auto;
}
.anim1 .back {
	position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position:100% 100%;
	z-index:-1;
	top: auto;
    bottom: -250px;
    width: 670px;
    max-width: 50%;
    right: auto;
    left: 0;
	bottom: 0;
}
.anim1 .spot {
	width: 945px;
    height: 800px;
    z-index: -1;
    position: fixed;
	top:40%;
	right:auto;
	left:50%;
	transform:translate(-50%,-50%);
    background-size: contain;
    background-repeat: no-repeat;
	background-position:center center;
}
.anim1 .line:before {
	content:"";
    position: absolute;
    border-top: 7px solid #5FEBD7;
    border-bottom: 8px solid #5FEBD7;
    height: 3px;
    bottom: 1px;
    right: 100%;
    width: 50%;
    z-index: -1;	
}
.anim1 .line:after {
	content:"";
    position: absolute;
    border-top: 7px solid #1E63F2;
    border-bottom: 8px solid #1E63F2;
    height: 3px;
    bottom: 1px;
    right: -30%;
    width: 50%;
    z-index: -1;	
}
.anim1 .line {
	opacity: 0;
    position: absolute;
    height: 65px;
    width: 140%;
    bottom: 30%;
    left: -40%;
    background-size: 100% 100%;
    background-repeat: repeat;
}
.anim1 .entry .title {
	font-size:40px;
	line-height:46px;
	font-weight:800;
	margin-bottom:16px;
}
.anim1 .entry {
	max-width:520px;
	margin:auto;
	display:block;
}
.anim1 .entry .title .icon {
	display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
}
.anim1 .entry-phase1 .title {
	font-size:64px;
	line-height:68px;
	font-weight:800;
}
.anim1 .entry-phase1 {
	position: absolute;
    right: 15%;
    top: 20%;
    width: 40%;
}
.anim1 .entry-phase4,
.anim1 .entry-phase3 {
	opacity: 0;
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    right: 10%;
}
.anim1 .entry-phase6 .entry {
	text-align:center;
	width:auto;
	max-width:unset;
}
.anim1 .entry-phase6 {
	opacity: 0;
    position: absolute;
    top: 70%;
    right: 10%;
	z-index:2;
	left:10%;
}
.iphone-rap .video-rap video {
	width:100%;
}
.iphone-rap .video-rap {
	position: absolute;
    top: 3%;
    bottom: 0;
    right: 0;
    left: 0;
    width: 91%;
    height: 100%;
    z-index: 0;
    margin: auto;
    overflow: hidden;
    border-radius: 10%;
	opacity:1;
}
.iphone-rap.iphone1 .video-rap {
	transform: translateX(-50%);
    right: 8%;
}
.iphone-rap .video-rap.video2 {
	opacity:0;
}
.anim1 div.phase8-rap .iphone-rap {
    height: 70%;
    left: auto;
	right:0;
    top: 15%;
	transform:unset;
}
.anim1 div.phase8-2-rap img.side-img {
	max-height:75vh;
	width:auto;
	height:auto;
}
.anim1 div.phase8-rap .imgrap {
	position: absolute;
    left: 5%;
	top:0;
	bottom:0;
}
.anim1 div.phase8-rap .side-img {
	position:absolute;
    height:50%;
    top: 50%;
	left:0;
    transform: translateY(-50%);
}
.anim1 div.phase8-rap .entry {
	right: 5%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
	margin:0;
}
.anim1 div.phase8-2-rap div.move-left {
	z-index:1;
}
.anim1 div.phase8-rap .move-left {
	z-index:2;
    right: auto;
    left: 0px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	width:calc(90% - 540px);
	max-width:calc(100% - 540px);
	overflow:hidden;
	height:100%;
	width:100vh;
}
.anim1 div.phase8-2-rap div.move-left {
	left:15%;
	position:absolute;
	height:100%;
}
.anim1 div.phase8-2-rap div.move-right {
	right:15%;
}
.anim1 div.phase8-2-rap .move-right ,
.anim1 div.phase8-rap .move-right {
    right: 0px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.anim1 div.phase8-rap {
	z-index:5;
	position:absolute;
}
.anim1 div.phase8-2-rap {
	opacity:0;
	position:absolute;
	top:25%;
	right:0;
	left:0;
	bottom:0;
}
.anim1 div.phase9-rap .left-text .entry {
	margin:0;
}
.anim1 div.phase9-rap .left-text .side-img {
	display:block;
	margin:0;
}
.anim1 div.phase9-rap .left-text {
	position: absolute;
    left: 5%;
    width: 40%;
    top: 40%;
    transform: translateY(-50%);
}
.anim1 div.phase9-rap {
	z-index:6;
	position:absolute;
}
.anim1 .bottom-rap {
	min-height:100vh;
	height:auto;
	background: #020755;
}
.anim1 .back2 .imgrap img {
	max-width: 100vw;
    max-height: 100vh;
    display: block;
    margin: auto;
}
.anim1 .back2 .imgrap {
	position:absolute;
	bottom:0;
	right:0;
	left:0;
	margin:auto;
}
.anim1 .phase9-rap,
.anim1 .phase8-rap,
.anim1 .back2 {
	background: #020755;
    z-index: 2;
    position: relative;
	top:100%;
	width:100%;
	height:100vh;
	background-position: bottom center;
    background-repeat: no-repeat;
}
.anim1 .goola-animate .iphone-rap.iphone2 {
	top:150%;
	height:60%;
	z-index:4;
	position:absolute;
}
.anim1 .goola-animate .iphone-rap.iphone2-side .video-rap {
	border-radius: 4vh;
    top: 0.5%;
    height: 98%;
}
.anim1 .goola-animate .iphone-rap.iphone2-side {
	top:40%;
	height:50%;
	z-index:3;
	position:absolute;
	margin:auto;
	right: 50%;
    left: auto;
    transform: translateX(50%);
	width:25vh;
	opacity:0;
}
.list .item .icon {
	display: inline-block;
    width: 32px;
    margin-left: 18px;
}
.list .item .trap .ttrap .title {
	font-size:16px;
	font-weight:600;
	margin-bottom:4px;
}
.list .item .trap .ttrap {
	display: inline-block;
    vertical-align: top;
    max-width: calc(100% - 50px);
}
.list .item .trap {
	clear:both;
}
.list .item .date {
	float:left;
}
.list .item .tag {
	background: #F1F3F8;
    float:right;
    border-radius: 32px;
    padding: 8px;
    font-weight: 800;
    margin-bottom: 12px;
}
.list .item.item0 {
	opacity:1;
	margin-top:0;
	top:0;
}
.list .item {
	opacity:1;
	position:relative;
	top:1000px;
	margin-top:0;
	width: 340px;
	max-width:calc(100% - 32px);
    background: white;
    color: black;
    padding: 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    margin-bottom: 8px;
	transition:top 0.5s;
}
.list .item.item2 {
	transition-delay:0.1s;
}
.list .item.item3 {
	transition-delay:0.2s;
}
.list .item.item4 {
	transition-delay:0.3s;
}
.list .item.item5 {
	transition-delay:0.4s;
}
.list {
	top: 20%;
    position: relative;
    right: 20%;
}

.last {
	position:relative;
	z-index:8;
	background:#020755;
	min-height:100vh;
}
.last .vrap video {
    width: auto;
    margin: 0 5%;
    display: inline-block;
    max-height: 80vh;
    max-width: 40%;
}
.last .vrap {
	position:relative;
    margin: 40px 10%;
}
.last .entry {
	margin-right: 10%;
    padding-top: 150px;
    max-width: 1000px;
	width:auto;
}
.anim1[data-phase="14"] .spot {
	display:none;
}
.last .side-img {
	display:block;
	width: 100%;
    position: relative;
    bottom: 0;
    z-index: -1;
}
.last .legal {
	font-size: 16px;
    line-height: 20px;
    width: 800px;
    max-width: 80%;
    margin: 50px 10% 0;
}
XX.last {
	background: #020755;
	position: relative;
    z-index: 9;
}
footer .phone {
	color:white;
	text-decoration:none;
	font-size:32px;
	line-height:35px;
	font-weight:700;
	text-align:left;
	min-width:30%;
	width:30%;
}
footer .links a {
	color: white;
    display: block;
    text-decoration: none;
    margin: auto;
    font-size: 20px;
    font-weight: 400;
}
footer div.right-box img {
	max-width:100%;
}
footer div.right-box {
	min-width:45%;
	width:45%;
	padding-left:20px;
}
footer div.links {
	min-width:25%;
	width:25%;
}
footer {
	display:flex;
	flex-direction:row-reverse;
	margin: 0 5%;
    border-top: 1px solid #676A99;
    padding: 52px 0;
}
@media only screen and (max-width:800px) { /* MOBILE */
	header .dwl-button .dwl-desktop {
		display:none;
	}
	header .dwl-button .dwl-mobile {
		display:block;
	}
	.anim1 .goola-animate .iphone-rap {
		height: auto;
		width: 40%;
		top: 50%;
	}
	.anim1 .iphone-rap .iphone {
		width: 100%;
		height: auto;
	}
	.anim1 .entry-phase1 {
		width: auto;
		right: 5%;
		max-width: 90%;
		top:15%;
	}
	.anim1 .back {	
		max-width: 85%;
	}
	.anim1 .entry-phase4 {
		top:15%;
		width:90%;
		transform:unset;
		opacity:0;
		right:-90%;
	}
	.anim1 .entry-phase3 {
		right:-90%;
		opacity:0;
		width:90%;
		top:15%;
		transform:unset;
	}
	.anim1 .line {
		left:auto;
		right:0%;
		width:300%;
		margin-right:-80%;
		top:32%;
		display:none;
	}
	.back2 .imgrap img {
		width: 150%;
		height: auto;
		left: -15%;
		position: absolute;
		bottom: 0;
	}
	.anim1 .goola-animate .iphone-rap.iphone2 {
		height:auto;
	}
	.anim1 div.phase8-2-rap .move-right, 
	.anim1 div.phase8-rap .move-right {
		top: auto;
		margin-top:40%;
		transform: unset;
		right:auto;
		left:0;
	}
	.anim1 div.phase8-rap .move-left {
		transform: unset;
		width: 100%;
		max-width: unset;
		top: 0%;
		position:relative;
		overflow:visibile;
	}
	.anim1 div.phase8-rap .side-img {
		position: relative;
		height: auto;
		top: 50%;
		left: 0;
		transform: unset;
		width: 90%;
		margin: auto;
		display: block;
	}
	.anim1 div.phase8-rap .imgrap {
		left: 0;
		right: 0;
		width: 100%;
		transform: unset;
		top: auto;
		position:relative;
	}
	.anim1 div.phase8-rap .iphone-rap {
		height: auto;
		width: 50%;
		top: 0;
		top: 38%;
		right: 50%;
		transform: translateX(50%);
	}
	.anim1 div.phase8-rap .entry {
		width:90%;
		position:relative;
		top:0;
		left:0;
		transform:unset;
	}
	.anim1 div.phase8-2-rap div.move-right {
		right: 0;
	}
	.anim1 div.phase8-2-rap div.move-left {
		left: 0;
		position: relative;
		height: auto;
		top: auto;
		width: 100%;
		margin: auto;
		right: 0;
	}
	.anim1 div.phase8-2-rap img.side-img {
		max-width: 90%;
	}
	.anim1 div.phase9-rap .left-text {
		position: relative;
		left: auto;
		transform: unset;
		top: 15%;
		width: 90%;
		margin: auto;
	}
	.list {
	    right: 0;
		margin: auto;
		width: 90%;
		top: 70%;
		position: absolute;
		margin: auto;
		right: 0;
		left: 0;
	}
	.last {
		z-index:10;
	}
	.last .entry {
		width:80%;
	}
	.last .vrap video {
		width: 100%;
		margin: 20px 0%;
	}
	.scroll-hide.phase1 {
		height:400vh;
	}
	.anim1 .line:before,
	.anim1 .line:after {
		display:none;
	}
	.anim1 .entry-phase1 .title img {
		height:44px;
	}
	.anim1 .entry-phase1 .title {
	    font-size: 40px;
		line-height: 44px;
	}
	.anim1 .entry .title {
		font-size: 28px;
		line-height: 32px;
	}
	body {
		font-weight:400;
		font-size:18px;
		line-height:22px;
	}
	.anim1[data-phase="10"] .back2 ,
	.anim1[data-phase="9"] .back2 ,
	.anim1[data-phase="8"] .back2 ,
	.anim1[data-phase="7"] .back2 {
		z-index:2;
	}
	.anim1[data-phase="16"] div.phase8-rap ,
	.anim1[data-phase="15"] div.phase8-rap ,
	.anim1[data-phase="14"] div.phase8-rap ,
	.anim1[data-phase="13"] div.phase8-rap ,
	.anim1[data-phase="12"] div.phase8-rap ,
	.anim1[data-phase="11"] div.phase8-rap {
		z-index:5;
	}
	.anim1[data-phase="1"] div.phase9-rap ,
	.anim1[data-phase="2"] div.phase9-rap ,
	.anim1[data-phase="3"] div.phase9-rap ,
	.anim1[data-phase="4"] div.phase9-rap ,
	.anim1[data-phase="5"] div.phase9-rap ,
	.anim1[data-phase="6"] div.phase9-rap ,
	.anim1[data-phase="7"] div.phase9-rap ,
	.anim1[data-phase="8"] div.phase9-rap ,
	.anim1[data-phase="9"] div.phase9-rap ,
	.anim1[data-phase="10"] div.phase9-rap ,
	.anim1[data-phase="11"] div.phase9-rap ,
	.anim1[data-phase="12"] div.phase9-rap ,
	.anim1[data-phase="13"] div.phase9-rap ,
	.anim1[data-phase="14"] div.phase9-rap ,
	.anim1[data-phase="15"] div.phase9-rap {
		z-index:-1;
	}
	.anim1 div.phase8-rap,
	.anim1 .back2 {
		z-index:-1;
	}

	footer div.right-box,
	footer .phone,
	footer div.links {
		width:auto;
		padding-left:0;
	}
	footer .links {
		margin:40px 0;
	}
	footer .phone,
	footer {
		display:block;
		text-align:center;
	}
}