body {margin: 0px;}

#container {
	background-color: black;
	border: 1px solid gray;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	display: none;
	overflow: hidden;
	width: 100vw;
	height: 430px;
	pointer-events: none;
	border:0px;
}

#container * {
	position: absolute;
}

#container::before{
	width:100%;
	content:"";
	height:2px;
	background: rgb(242,100,59);
	background: linear-gradient(90deg, rgba(242,100,59,1) 0%, rgba(253,183,25,1) 100%);
	top:0px;
	left:0px;
	display: block;
	position: absolute;
	z-index: 10000;
}

#clickthru{
	width: 100%;
	height: 100%;
	pointer-events: auto;
	position: relative;
}

/*-------------- SPRITE -------------*/
.sprite { background: url('../images/sprite.png') no-repeat top left; width: 188px; height: 395px; background-size: 188px 395px;  }
.sprite.cta-text { background-position: 0 0; width: 170px; height: 50px; background: transparent; text-align: center; line-height: 50px;}
.sprite.logo { background-position: 0 -231px; width: 83px; height: 34px; }

/*--------- SPRITE POSITION ---------*/
.cta-text{top: 0px;left: -1px;}
.logo {bottom: 13px;right: 14px;}
.shape1-a {left: 93px;top: 43px;}
.shape1-b {left: 519px;top: 157px;}
.shape2-a {left: 93px;top: 43px;}
.shape2-b {left: 519px;top: 157px;}
.shape3-a {left: 93px;top: 43px;}
.shape3-b {left: 519px;top: 157px;}
.shape4-a {left: 93px;top: 43px;}
.shape4-b {left: 519px;top: 157px;}


/*-------- IMAGES | POSITION --------*/
img {
	width: auto;
	height: auto;
	display: block;
}
.bg1, .bg2, .bg3, .bg4{
	width: 100%;
	height: 430px;
  will-change: transform;
}

.bg1, .bg2, .bg3{
	display: flex;
	justify-content: flex-end;
	overflow: hidden;
	opacity: 0;
}


.cta{
    background-color:#e16b47;
    width: 170px;
    height: 50px;
    overflow: hidden;
		font-size: 22px;
		color:#fff;
		font-family: 'RealHeadWebW04';
		border-radius: 0px 12px 0px 12px;
		top:120px;
}

.text1-div, .text2-div, .text3-div {
    left: 165px;
		top: 105px;
		color:#fff;
		width:325px;
		opacity: 0;
}

.text1_1-div, .text2_2-div, .text3_3-div {
    left: 632px;
		top: 231px;
		color:#fff;
		width:235px;
		opacity: 0;
}

.text1-div .t1, .text2-div .t2, .text3-div .t3{
	float:left;
	width:325px;
}

.text1-div .t1 .service, .text2-div .t2 .service, .text3-div .t3 .service{
	font-size: 46px;
	color:#fff;
	font-family: 'Quase Headline';
	margin: 0px;
	padding:0px;
	height: 230px;
	overflow: hidden;
	top:45px;
	width: 320px;
	opacity: 0;
}

.fadeout{
	content:"";
	height:20px;
	width:100%;
	display: block;
	position: absolute;
	bottom:0px;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

.text1-div .t1 .service .list, .text2-div .t2 .service .list, .text3-div .t3 .service .list{
	bottom:230px;
}

.text1-div .t1 .service .list p{
	position: relative !important;
	margin:0px;
}

.text1-div .t1 .service .list p.visible{
	color:#e16b47;
}

/* .text1-div .t1 .service .list{
	display: flex;
	flex-direction: column;
} */

.text1_1-div .t1_1, .text2_2-div .t2_2, .text3_3-div .t3_3{
	float:left;
	width:100%;
}

.text1-div .t1 h1, .text2-div .t2 h1, .text3-div .t3 h1{
	font-size: 46px;
	color:#e16b47;
	font-family: 'Quase Headline';
	margin: 0px;
	padding:0px;
}

.text1_1-div .t1_1 h2, .text2_2-div .t2_2 h2, .text3_3-div .t3_3 h2{
	font-size: 26px;
	color:#fff;
	font-family: 'RealHeadWebW03-Book';
	margin: 0px;
	padding:0px;
	float:left;
	line-height: 30px;
}

.text1_1-div .t1_1 a, .text2_2-div .t2_2 a, .text3_3-div .t3_3 a{
	font-size: 22px;
	color:#fff;
	font-family: 'RealHeadWebW04';
	margin: 0px;
	/* padding:14px 19px 17px; */
	float:left;
	background: #e26d48;
	border-radius: 0px 12px 0px 12px;
	top:120px;
	text-align: left;
	line-height: 16px;
	text-decoration: none;
	width:170px;
	height:50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.shape{
    width: 108px;
    height: 108px;
}
.curve{
    width: 108px;
    height: 108px;
}

@media only screen and (max-width: 1600px) {
	.bg1, .bg2, .bg3{
		display: flex;
		justify-content:center;
	}
}

@media only screen and (max-width: 1023px) {
	.bg1 img, .bg2 img, .bg3 img{
		opacity:0;
	}

	.shape1-a {left: 63px;top: 33px;}
	.shape1-b {left: 459px;top: 63px;}
	.shape2-a {left: 63px;top: 33px;}
	.shape2-b {left: 459px;top: 63px;}
	.shape3-a {left: 63px;top: 33px;}
	.shape3-b {left: 459px;top: 63px;}
	.shape4-a {left: 63px;top: 33px;}
	.shape4-b {left: 459px;top: 63px;}

	.shape{
	    width: 83px;
	    height: 83px;
	}
	.curve{
	    width: 83px;
	    height: 83px;
	}

	.text1-div, .text2-div, .text3-div {
	    left: 105px;
			top: 70px;
			width:275px;
	}

	.text1_1-div, .text2_2-div, .text3_3-div {
	    left: 525px;
			top: 120px;
	}

}

@media only screen and (max-width: 811px) {
	#container {
		height: 1090px;
	}

	.shape1-a {left: 93px;top: 93px;}
	.shape1-b {left: 93px;top: 574px;}
	.shape2-a {left: 93px;top: 93px;}
	.shape2-b {left: 93px;top: 574px;}
	.shape3-a {left: 93px;top: 93px;}
	.shape3-b {left: 93px;top: 574px;}
	.shape4-a {left: 93px;top: 93px;}
	.shape4-b {left: 93px;top: 574px;}

	.bg1 img, .bg2 img, .bg3 img{
		opacity:0;
	}

	.text1-div, .text2-div, .text3-div {
	    left: 165px;
			top: 160px;

	}

	.text1_1-div, .text2_2-div, .text3_3-div {
	    left: 165px;
			top: 646px;
			width:512px;
	}

	.text1_1-div .t1_1 h2, .text2_2-div .t2_2 h2, .text3_3-div .t3_3 h2{
		font-size: 40px;
		color:#fff;
		font-family: 'RealHeadWebW03-Book';
		margin: 0px;
		padding:0px;
		float:left;
		line-height: 46px;
	}

	.cta{
		top:160px;
	}

}

@media only screen and (max-width: 767px) {
	#container {
		height: 100vh;
	}

	.shape1-a {left: 33px;top: 63px;}
	.shape1-b {left: 33px;top: 474px;}
	.shape2-a {left: 33px;top: 63px;}
	.shape2-b {left: 33px;top: 474px;}
	.shape3-a {left: 33px;top: 63px;}
	.shape3-b {left: 33px;top: 474px;}
	.shape4-a {left: 33px;top: 63px;}
	.shape4-b {left: 33px;top: 474px;}

	.shape{
	    width: 83px;
	    height: 83px;
	}
	.curve{
	    width: 83px;
	    height: 83px;
	}

	.bg1 img, .bg2 img, .bg3 img{
		opacity:0;
	}

	.text1-div .t1, .text2-div .t2, .text3-div .t3{
		float:left;
		width:275px;
	}

	.text1-div, .text2-div, .text3-div {
	    left: 85px;
			top: 110px;
			width:275px;
	}

	.text1-div .t1 .service, .text2-div .t2 .service, .text3-div .t3 .service{
		width:275px;
	}

	.text1_1-div, .text2_2-div, .text3_3-div {
	    left: 85px;
			top: 526px;
			width:275px;
	}

	.text1_1-div .t1_1 h2, .text2_2-div .t2_2 h2, .text3_3-div .t3_3 h2{
		font-size: 26px;
		color:#fff;
		font-family: 'RealHeadWebW03-Book';
		margin: 0px;
		padding:0px;
		float:left;
		line-height: 30px;
	}

	.cta{
		top:120px;
	}



}