@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800');

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
	vertical-align: baseline;
	vertical-align: baseline;
	font-weight: inherit;
	font-style: inherit;
	font-size: 14px;
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}

* {
	font-family: 'Montserrat', sans-serif;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:focus {
	outline: 0;
}

.screen{
	background-repeat: no-repeat;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
.screen.bg-center{
	background-position: bottom center;
	background-size: auto 60%;
}
.screen.black{
	background-color: #232027;
}
.screen .arrow-left {
	position: absolute;
	bottom: 0;
	max-height: 92vh;
	left: 105px;
}
.screen .screen-center {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	text-align: center;
	left: 0;
	right: 0;
	padding: 0 50px;
	max-width: 90%;
	margin: auto;
}
.screen .screen-image {
	margin-bottom: 40px;
	font-size: 0;
}
.screen .screen-image img{
	max-width: 23vh;
}
.screen .screen-title {
	font-weight: 800;
	font-size: 46px;
	line-height: normal;
	color: #fff;
	margin-bottom: 20px;
}
.screen .screen-title span {
	font-weight: 800;
	font-size: 46px;	
}
.screen .green{
	color: #0DD95F;	
}
.screen .screen-text {
	font-size: 18px;
	line-height: 28px;
	color: rgba(255, 255, 255, 0.72);
	mix-blend-mode: normal;	
}
.screen .screen-text span {
	font-size: 18px;
	line-height: 28px;	
}
.screen .blue {
	color: #26D3FC;
}
.screen .orange {
	color: #FF7045;
}
.screen .orange-2 {
	color: #FFAA20;
}
.screen .orange-3 {
	color: #FFA638;
}.screen .orange-4 {
	color: #FAB03C;
}
.screen .yellow {
	color: #FFCE00;
}
.screen-center .arrow-center{
	position: absolute;
	bottom: -170px;
	left: 50%;
	transform: translateX(-100%);
	max-height: 80vh;
	max-width: 47vw;
}

.screen .fs-36,
.screen .fs-36 span{
	font-size: 36px;
	line-height: normal;
}
.screen-8 .fs-36{
	max-width: 830px;
	margin: auto;
}
.screen-8 .screen-center {
	position: absolute;
	top: 44%;
	transform: translateY(-50%);
	text-align: center;
	left: 0;
	right: 0;
	padding: 0 50px;
	max-width: 90%;
	margin: auto;
}

.screen.bg-lb{
	background-position: left bottom;
	background-size: auto 70%;
}

.s-9-1 {
	position: absolute;
	left: 56px;
	top: 57px;
}
.s-9-2 {
	position: absolute;
	left: 226px;
	top: 171px;	
}
.s-9-3 {
	position: absolute;
	left: 71px;
	top: 40%;	
}

.gradient:after{
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	top: 0;
	content: "";
	z-index: 10!important;
}
.gradient * {
	z-index: 20;
}
.screen.blue{
	background: linear-gradient(208.61deg, #7C28FB 23.3%, #26D3FC 133.31%);		
}
.blue.gradient:after{
	background: url(../images/screen/circle-left.png) left bottom no-repeat;
	background-size: auto 70%;
}

.screen.bg-lt{
	background-position: left top;
	background-size: auto 100%;
}
.screen.bg-cc{
	background-position: calc(50% + 20px) top;
	background-size: auto 100%;
}
 
.screen-center.flex{
	display: flex;
	top: 50%;
	max-width: 90%;
	align-items: center;
}
.screen-12 .flex{
	top: 52%;
}
.screen-12 .flex .screen-title {
	text-align: left;
	max-width: 900px;
	padding-left: 50px;
}

.s-12-1 {
	position: absolute;
	top: 86px;
	left: 30%;
}
.s-12-2 {
	position: absolute;
	top: 60%;
	right: 0;	
}
.s-12-3 {
	position: absolute;
	bottom: 64px;
	left: 110px;	
}
.s-12-4 {
	position: absolute;
	bottom: 0;
	right: 70px;	
}


.screen-title {
	position: relative;
}
.screen-title .icon-arrow {
	position: absolute;
	left: -30px;
	top: -30px;
}
.screen-14 .screen-title{
	padding: 0 150px;
	max-width: 1400px;
}

.s-14-0 {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 38%;
	transform: translateY(-50%);
}
.s-14-1 {
	position: absolute;
	left: 35%;
	margin: auto;
	top: 23%;
	transform: translate(-50%, -50%);	
}
.s-14-2 {
	position: absolute;
	left: 33%;
	top: 33%;
	transform: translate(-50%, -50%);		
}
.s-14-3 {
	position: absolute;
	right: 25%;
	top: 37%;
	transform: translate(-50%, -50%);		
}
.s-14-4 {
	position: absolute;
	right: 10%;
	top: 6%;	
}
.s-14-5 {
	position: absolute;
	left: 20%;
	bottom: 25%;	
}

.screen-center .arrow-yellow{
	position: absolute;
	bottom: 30px;
	left: 18%;
	transform: translateX(-100%);
	max-height: 80vh;
	max-width: 47vw;
}


.s-17-1 {
	right: 16%;
	top: 0;
}
.s-17{
	position: absolute;
}
.s-17-2 {
	top: 17%;
	left: 22%;
}
.s-17-3 {
	bottom: 0;
	left: 10%;
}
.s-17-4 {
	right: 0;
	bottom: 10%;
}

.s-18-1 {
	right: 28%;
	top: 0;
}
.s-18{
	position: absolute;
}
.s-18-2 {
	right: 8%;
	top: 0;	
	max-width: 30%;
}
.s-18-3 {
	bottom: 0;
	left: 0;
	max-width: 50%;
	max-height: 70%;
}
.s-18-4 {
	bottom: 0;
	left: 20%;
	max-width: 40%;
}
.s-18-5 {
	right: 0;
	bottom: 0;
	max-width: 30%;
}


.bg-cover{
	background-size: cover;
	background-position: center;
}

.screen.purple{
	background-color: #522893;
}

.screen.screen-22{
	background-image:url(../images/screen/bg-22-left.png), url(../images/screen/bg-22-right.png);
	background-size: auto 100%, auto 100%;
	background-position: left top, right top;
}

.screen.screen-25{
	background-image: url(../images/screen/bg-25-left.png), url(../images/screen/bg-25-right.png), url(../images/screen/bg-21.png);
	background-size: 77% auto, 64% auto, cover;
	background-position: left bottom, right bottom, center;
}

.screen-29 .s-14-1{
	right: -20px;
	top: 10px;
	left: auto;
	transform: translate(0)
}
.screen-30{
	background: linear-gradient(208.61deg, #7C28FB 23.3%, #26D3FC 133.31%);
}
 

@media ( max-width: 1300px ){
	.screen-12 .flex .screen-title,
	.screen-12 .flex .screen-title span{
		font-size: 40px;
	}
	.screen-12 .screen-image img{
		max-height: 120px;
	}
}
@media ( max-width: 1100px ){
	.screen-center .arrow-center{
		bottom: -140px;
	}
	.screen-12 .flex .screen-title,
	.screen-12 .flex .screen-title span{
		font-size: 34px;
	}	
}

@media ( max-width: 992px ){
	.screen-15 .screen-center{
		padding: 0 80px;
	}
	.screen-center .arrow-yellow{
		left: 25%;
	}
	.screen-title .icon-arrow {
		position: absolute;
		left: -10px;
		top: 0px;
		max-width: 100px;
	}
	.screen-14 .screen-title{
		padding: 0 110px;
	}	
	.screen.screen-14 .screen-title,
	.screen.screen-14 .screen-title span{
		font-size: 28px;
		
	}
	.screen-12 .screen-image img{
		max-height: 110px;
	}	
	.screen .screen-title {
		font-size: 36px;
		margin-bottom: 15px;
	}
	.screen .screen-title span {
		font-size: 36px;	
	}	
	.screen-center .arrow-center,
	.s-14-2,
	.s-14-3{
		display: none;
	}
	.screen-12 .flex .screen-title,
	.screen-12 .flex .screen-title span{
		font-size: 30px;
	}	
	.s-14-1 {
		left: 20%;
	}	
	.s-14-5{
		bottom: 10%;
	}
}
@media ( max-width: 768px ){
	.s-17-3,
	.s-17-1{
		display: none;
	}	
	.s-17-2 {
		top: 5%;
		left: 3%;
	}
	.screen-15 .screen-center{
		padding: 0 30px;
	}
	.screen-center .arrow-yellow{
		display: none;
	}	
	.screen.screen-14 .screen-title, .screen.screen-14 .screen-title span {
		font-size: 24px;
	}	
	.screen-14 .icon-arrow{
		display: none;
	}
	.screen-14 .screen-title{
		padding: 0;
	}
	
	.screen-12 .screen-image img{
		max-height: 90px;
	}	
	.screen-12 .flex .screen-title,
	.screen-12 .flex .screen-title span{
		font-size: 26px;
	}	
	.screen .screen-title,
	.screen .screen-title span {
		font-size: 30px;	
	}		
	.screen .arrow-left,
	.s-9-1,
	.s-9-2,
	.s-9-3,
	.s-12{
		display: none;
	}
	.screen .screen-text,
	.screen .screen-text span {
		font-size: 16px;
		line-height: 24px;	
	}	
	.screen .screen-center{
		padding: 30px;
		max-width: 100%;
	}
	.screen .screen-image {
		margin-bottom: 25px;
		font-size: 0;
	}	
}

@media ( max-width: 480px ){
	.s-14-1{
		display: none;
	}
	.s-14-0{
		right: auto;
		left: 50%;
		transform: translate(-50%,-50%)
	}
	.screen.screen-14 .screen-title, .screen.screen-14 .screen-title span {
		font-size: 21px;
		line-height: 1.5
	}	
	.screen-center.flex{
		flex-wrap: wrap;
		justify-content: center;
		max-width: 100%;
	}	
	.screen-12 .flex .screen-title,
	.screen-12 .flex .screen-title span{
		font-size: 22px;
		text-align: center;
		max-width: 100%;
	}	
	.screen-12 .flex .screen-title{
		padding-left: 0;
	}
	.screen .screen-text,
	.screen .screen-text span {
		font-size: 14px;
		line-height: 22px;	
	}	
	.screen .screen-title,
	.screen .screen-title span {
		font-size: 25px;	
	}	
	.screen .screen-center{
		top: 48%;
	}
	
	body .screen .fs-36, 
	body .screen .fs-36 span{
		font-size: 21px;
	}	
	
}