section {
	background-color: #FFF;
	display: flex;
	align-items: center;
	align-content: center;
	overflow: hidden;
}	

section.blue-bg {
	background: rgb(29,172,236);
	background: -moz-linear-gradient(180deg, rgba(29,172,236,1) 0%, rgba(39,118,197,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(29,172,236,1) 0%, rgba(39,118,197,1) 100%);
	background: linear-gradient(180deg, rgba(29,172,236,1) 0%, rgba(39,118,197,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1dacec",endColorstr="#2776c5",GradientType=1);
	padding-bottom: 0;
}

section:not(.intro_1) { padding-bottom: 0; }

section .row {
	display: flex;
	align-items: center;
}

.intro_2 img,
.intro_4 img,
.intro_5 .popup img {
	image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
}

.content {
	text-align: center;
}

.headline {
	font-size: 36px;
	font-weight: bold;
	color: #00A0E8;
	margin-bottom: 20px;
}

.headline img {
	margin-right: 20px;
}

.subheadline {
	font-size: 24px;
	font-weight: 500;
}

.subheadline .ctlogo {
	margin-right: 12px;
	vertical-align: -15px;
}

.app {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.app a:link {
	margin: 0 8px;
}

/* BG
-----------------------------------------------*/

.intro_3 {
	background: url("../images/app/3_colorbg_y.svg") no-repeat;
	background-position: right 2% bottom -330px;
}

.intro_5 {
	background: #FFF url("../images/app/5_colorbg.svg") no-repeat;
	background-position: top 20% right;
	background-size: cover;
	overflow: hidden;
}


/* Graphic
-----------------------------------------------*/
.grpahic {
	position: relative;
}

.graphic-w {
	width: 60%;
	margin: 0 auto;
}

.graphic-w.hand-w-phone {
	height: 380px;
	transform: rotate(6deg);
}

.deco {
	position: absolute;
	right: 0;
	top: 0;
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}

.deco img {
	width: 100%; 
}

.deco.wbg {
	z-index: -1;
}

.deco.colorbg {
	z-index: -2;
}

.intro_1 .wbg {
	width: 150%;
	top: -60%;
	right: 0;
}

.intro_1 .colorbg {
	width: 50%;
	right: auto;
	left: 5%;
}

.intro_2 .colorbg {
	width: 150%;
	top: -55%;
	right: -12%;
}

.intro_2 .ppl {
	right: auto;
	left: 0;
	top: 80%;
}

.intro_3 .colorbg {
	width: 35%;
	right: auto;
	left: 15%;
}

.intro_3 .hand {
	top: auto;
	bottom: -28%;
	right: 10%;
}

.intro_4 .wbg {
	width: 180%;
	top: -150%;
	right: -25%;
}

.intro_4 .colorbg {
	width: 75%;
}

.intro_4 .ppl {
	top: 20%;
	right: -35%;
	z-index: 1;
}	

.intro_5 .dot {
	top: 60%;
	right: 10%;
}

.intro_5 .popup {
	top: 15%;
	right: -5%;
}

.bubble {
	position: absolute;
	top: 0;
}

.bubble_a {
	left: 2%;
}

.bubble_b {
	top: 30%;
	right: 6%;
}

.bubble_c {
	top: 50%;
	left: 6%;
}

@media only screen and (max-width: 1600px) {
	
}

@media only screen and (max-width: 1440px) {
	.intro_3 .colorbg { width: 35%; top: 10%; left: 10%; }
	.intro_5 .dot { right: -5%; }
}

@media only screen and (max-width: 1280px) {
	.graphic-w.hand-w-phone { height: 320px; }
	

	.intro_2 .ppl { width: 140px; top: 68%; left: -5%; }
	.intro_3 .ppl { width: 115px; right: -5%; }
	.intro_3 .hand { bottom: -50%; }
	.intro_4 .ppl { width: 250px; top: 34%; }
	
	.intro_5 .popup { top: 10%; right: -5%; }
}

@media only screen and (max-width: 1200px) {
	.intro_3 .hand { width: 40%; bottom: -34%; right: 5%; }
	.intro_5 .popup { width: 40%; }
}

@media only screen and (max-width: 1140px) {
	.intro_1 .wbg { right: -5%; }
	.intro_1 .colorbg { width: 65%; top: 10%; left: 2%;}
	
	.intro_2 .bubble { width: 15%; }
	.intro_2 .bubble_a { width: 20%; }
	
	.intro_5 .dot { width: 35%; top: 70%; right: 3%; }
}

@media only screen and (max-width: 1024px) {
	
}

@media only screen and (max-width: 992px) {
	.graphic-w { width: 120%; }
	
	.intro_2 .colorbg { width: 270%; right: -60%; }
	.intro_2 .deco.dot { width: 70%; top: 20%; }
	.intro_2 .graphic-w img:not(.bubble), .intro_4 .graphic-w img { width: 75%; }
	.intro_2 .bubble { width: 20%; }
	.intro_2 .bubble_a { width: 25%; left: -20%; }
	.intro_2 .bubble_b { right: -5%; }
	.intro_2 .bubble_c { left: -15%; }
	.intro_2 .ppl { width: 110px; left: 0; }
	
	.intro_3 { background-position: right -200px bottom -330px; }
	.intro_3 .colorbg { width: 40%; top: 20%; left: 1%; }
	.intro_3 .ppl { width: 90px; top: 25%; right: 0; }
	.intro_3 .hand { width: 70%; bottom: -24%; right: -35%; }
	
	.intro_4 .ppl { width: 200px; top: 30%; right: -17%; }
	
	.intro_5 .popup { width: 65%; right: -28%; }
	.intro_5 .hand-w-phone img { margin-left: -20%; }
}

@media only screen and (max-width: 860px) {

}

@media only screen and (max-width: 767px) {
	section .row { display: block; }
	
	.graphic-w { width: 75%; }
	.graphic-w img { display: block; margin: 0 auto; }
	
	.deco.ppl { display: none; }
	
	.headline img { width: 65px; height: 65px; }
	.subheadline { margin-bottom: 20px; }
	.graphic-w.hand-w-phone { height: 300px; margin-left: 5px; }
	
	.intro_1 .wbg { right: -20%; top: -75%; }
	.intro_1 .colorbg { width: 100%; top: 30%; left: -10%; }
	.intro_1 .graphic-w.hand-w-phone { width: 70%; height: 340px; margin-top: 15px; }
	
	.intro_2 .colorbg { top: -105%; }
	.intro_2 .deco.dot { width: 100%; top: 40%; }
	.intro_2 .bubble { width: 15%; }
	.intro_2 .bubble_a { width: 18%; left: 5%; }
	.intro_2 .bubble_b { right: 8%; }
	.intro_2 .bubble_c { left: 8%; }
	
	.intro_3 .colorbg { width: 60%; top: 40%; }
	.intro_3 .hand { width: 45%; bottom: -28%; right: 8%; }

	.intro_4 .wbg { width: 150%; }
	.intro_4 .colorbg { width: 200%; top: 60%; }
	
	.intro_5 { background-position: top 20% center; }
	.intro_5 .dot { width: 50%; top: 65%; right: -5%; }
	.intro_5 .popup { width: 55%; right: 0; }
}

@media only screen and (max-width: 640px) {
	
}

@media only screen and (max-width: 550px) {
	
}

@media only screen and (max-width: 480px) {
	.headline { font-size: 32px; margin-bottom: 15px; }
	.headline img { width: 50px; height: 50px; display: block; margin: 0 auto; margin-bottom: 15px; }
	.subheadline { font-size: 20px; }
	.subheadline .ctlogo { height: 40px; vertical-align: -13px; }
	
	.intro_1 .wbg { width: 220%; top: -65%; right: -25%; }
	.intro_1 .colorbg { top: 55%; }
	.intro_1 .graphic-w.hand-w-phone { height: 280px; }
	
	.intro_3 .colorbg { width: 70%; top: 55%; left: -15%; }
	
	.intro_4 .wbg { width: 250%; top: -150%; right: -50%; }
	
	.intro_5 .dot { width: 80%; }
}

@media only screen and (max-width: 414px) {
	
}

@media only screen and (max-width: 360px) {
	.graphic-w.hand-w-phone { height: 260px; }
	.intro_1 .graphic-w.hand-w-phone { height: 240px; }
}