.site-header {
	background: #0091FF;
}

.site-header .nav-footer>li>a, .site-header .nav-footer>li>a:focus, .site-header .nav-section>li>a, .site-header .nav-section>li>a:focus {
	color: #FFFFFF;
}

.site-header .nav-footer a.login {
	padding: 10px 14px;
	border: none;
	background: none;
	box-shadow: none;
}

.site-header .nav-footer a.login:hover {
	color: hsla(0, 0%, 100%, .6);
	border: none;
	box-shadow: none;
}

.site-header.with-bottom-border .nav-footer a.login:hover {
	color: #4195FF;
}

/* -----------------------------*/
.site-header .nav-footer>li:hover>a.login-pc {
	color: hsla(0, 0%, 100%, .6);
	border: 1px solid hsla(0, 0%, 100%, .6);
}

.site-header .nav-footer a.login-pc {
	padding: 8px 14px;
	margin: 4px 0;
	border: 1px solid #FFFFFF;
	background: none;
	box-shadow: none;
}

.site-header .nav-footer a.login-pc:hover {
	color: hsla(0, 0%, 100%, .6);
	border: 1px solid hsla(0, 0%, 100%, .6);
	box-shadow: none;
}

.site-header .nav-footer a.login-pc:focus {
	padding: 8px 14px;
}

.site-header.with-bottom-border .nav-footer>li:hover>a.login-pc {
	color: #4195FF;
	border: 1px solid #4195FF;
	opacity: 0.6;
}

.site-header.with-bottom-border .nav-footer a.login-pc {
	color: #4195FF;
	border: 1px solid #4195FF;
}

.site-header.with-bottom-border .nav-footer a.login-pc:hover {
	color: #4195FF;
	border: 1px solid #4195FF;
	opacity: 0.6;
}

/* -----------------------------*/
.site-header .nav-section>li:hover>a {
	color: #FFFFFF;
}

.site-header.with-bottom-border {
	background-color: rgba(255, 255, 255, 0.8);
}

.site-header.with-bottom-border .nav-footer>li>a, .site-header.with-bottom-border .nav-footer>li>a:focus, .site-header.with-bottom-border .nav-section>li>a, .site-header.with-bottom-border .nav-section>li>a:focus {
	color: inherit;
}

.site-header.with-bottom-border .nav-section>li:hover>a {
	color: #4195FF;
}

.site-header .nav-footer>li>a.btn-gradient-blue-link:hover {
	overflow: hidden;
	border-radius: 50px;
	-webkit-box-shadow: 0 6px 14px 0 rgba(36, 10, 147, .15);
	box-shadow: 0 6px 14px 0 rgba(36, 10, 147, .15);
}

.site-header.with-bottom-border .nav-footer>li>a.btn-gradient-blue-link:hover {
	box-shadow: none;
}

.site-header .nav-footer>li>a.btn-gradient-blue-link:after {
	border: none;
}

.site-header.with-bottom-border .btn-gradient-blue-link:after {
	background: linear-gradient(-45deg, #0091FF, #0091FF) !important;
}

.site-header .nav-brand {
	background-image: url(../images/webpack/logo-wh.svg);
}

.site-header.with-bottom-border .nav-brand {
	background-image: url(../images/webpack/logo-2.svg);
	-webkit-transition: all .3s;
	transition: all .3s;
}

.header-banner {
	position: relative;
	overflow: hidden;
	background: #0091FF;
}

.header-banner:before, .header-banner:after {
	content: "";
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
}

.header-banner:before {
	left: -80px;
	bottom: -50px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: linear-gradient(-45deg, #81E0FF, #0091FF);
	opacity: 0.2;
}

.header-banner:after {
	right: -200px;
	bottom: 10px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: linear-gradient(-55deg, #81E0FF, #0091FF);
	opacity: 0.3;
}

.intro-screen {
	width: auto;
	padding: 0 50px;
	max-width: 1000px;
}

.intro-screen-intro-title {
	font-size: 40px;
	font-weight: 400;
	color: #FFFFFF;
	margin: 25px 0;
	line-height: 40px;
}

.header-banner .intro-screen {
	width: auto;
	height: 420px;
	padding: 0 50px 20px;
	margin: 0 auto;
	max-width: 1000px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	justify-content: space-between;
	position: relative;
}

.header-banner .intro-screen-intro {
	width: auto;
	display: block;
}

.header-banner .intro-screen-intro .tip {
	font-size: 20px;
	color: #fff;
	line-height: 20px;
}

.header-banner .intro-screen-intro .tip .name {
	display: inline-block;
	width: 60px;
	height: 22px;
	background-image: url(../images/webpack/logo-wh.svg);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.header-banner .intro-screen-intro .tip .close-icon {
	display: inline-block;
	width: 14px;
	height: 14px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGV4dCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTA4IC0xMikiIGZpbGw9IiNGM0YzRjMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZm9udC1mYW1pbHk9IlphcGZEaW5nYmF0c0lUQywgWmFwZiBEaW5nYmF0cyIgZm9udC1zaXplPSIxMiI+PHRzcGFuIHg9IjEwOC40MjciIHk9IjIxIj7inJU8L3RzcGFuPjwvdGV4dD48L3N2Zz4=);
	background-size: contain;
	background-repeat: no-repeat;
	margin: 0 12px;
}

.header-banner .intro-screen-intro .intro-screen-intro-detail {
	width: auto;
	font-size: 16px;
	color: hsla(0, 0%, 100%, .8);
	line-height: 28px;
	margin: 0;
	letter-spacing: .5px;
	max-width: 485px;
}

.header-banner .intro-screen .intro-screen-media {
	width: 400px; /* 280px*/
	margin: auto;
	background-image: url(/public/projects/websites/deepsheet5/images/webpack/banner-98720190820.svg);
}

.btn.btn-gradient-blue {
	padding: 12px 32px;
	border: 1px solid #FFFFFF;
	background: #0091FF;
	-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.btn.btn-gradient-blue:hover {
	-webkit-box-shadow: 0 6px 18px 0 rgba(36, 10, 147, .15);
	box-shadow: 0 6px 18px 0 rgba(36, 10, 147, .15);
}

.btn.btn-gradient-blue-line {
	border: 1px solid #FFFFFF;
	-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.btn.btn-gradient-blue-line:hover {
	-webkit-box-shadow: 0 6px 18px 0 rgba(36, 10, 147, .15);
	box-shadow: 0 6px 18px 0 rgba(36, 10, 147, .15);
}

.sign-in-panel-buttons .btn.btn-gradient-blue {
	padding: 13px 33px;
	border: none;
	background: linear-gradient(-45deg, #47AEFF, #106FE8);
}

.intro-screen-download-button {
	width: 113px;
	height: auto;
	padding: 15px 0;
	font-size: 14px;
	line-height: 1;
	color: #0091FF;
	border-radius: 50px;
	background: #FFFFFF;
	-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.solu-process {
	padding: 80px 50px 80px;
	color: #383838;
	max-width: 1000px;
	margin: 0 auto;
}

.solu-process .tp-title {
	font-size: 40px;
	font-weight: 400;
	line-height: 56px;
	text-align: center;
	margin-bottom: 20px;
}

.solu-process .tp-item {
	margin-bottom: 20px;
	padding: 40px 0;
}

.solu-process .tp-item:last-of-type {
	margin: 0;
	padding: 40px 0 0;
}

.solu-process .tp-item .tpi-title {
	font-size: 24px;
	line-height: 33px;
}

.solu-process .tp-item .tpi-title span {
	vertical-align: middle;
}

.solu-process .tp-item .tpi-title .pc-num {
	display: inline-block;
	width: 40px;
	height: 28px;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 2px -1px;
}

.solu-process .tp-item .tpi-title .num {
}

.solu-process .tp-item .tpi-title .dot {
	display: none;
}

.solu-process .tp-item .tpi-title .pc-num:after {
	position: absolute;
	content: "";
	right: 20px;
	top: 10px;
	display: inline-block;
	width: 1px;
	background-color: #a6a6a6;
	height: 10px;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
}

.solu-process .tp-item .tpi-desc {
	margin: 16px 0 32px;
	font-size: 16px;
	line-height: 25px;
	color: grey;
}

.tpi-desc div {
	display: flex;
	margin-top: 10px;
}

.tpi-desc div span:first-child {
	width: 75px;
	font-family: Arial;
	font-weight: bold;
	flex: none;
	text-align: justify;
}

.solu-process .tp-item .tpi-img-cutout {
	height: 560px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border-radius: 4px;
    -webkit-box-shadow: 4px 4px 20px hsla(0, 0%, 80%, .65);
    box-shadow: 4px 4px 20px hsla(0, 0%, 80%, .65);
}

.solu-process .tp-item .tpi-img {
	width: 100%;
	border-radius: 4px;
	-webkit-box-shadow: 4px 4px 20px hsla(0, 0%, 80%, .65);
	box-shadow: 4px 4px 20px hsla(0, 0%, 80%, .65);
}

.custom-row {
	padding: 0px 50px 80px;
	max-width: 1000px;
	margin: 0 auto;
}

.custom-row .custom-high {
	font-weight: 400;
	margin: 0;
}

.logo-wall {
	width: 100%;
}

.sign-in-panel-title {
	font-weight: 400;
}

.site-header .nav-footer>li>a.btn-gradient-blue-link:focus {
	color: #4195FF;
}

.site-footer .copyright {
	border: none;
}

@media (max-width:768px) {
	body {
		padding-top: 0;
	}

	.site-header.with-bottom-border {
		-webkit-backdrop-filter: blur(24px);
		backdrop-filter: blur(24px);
	}

	.site-header {
		background-color: #fff;
	}

	.site-header .nav-brand {
		background-image: url(../images/webpack/logo-2.svg);
	}

	.header-banner {
		padding: 105px 0 50px;
	}

	.header-banner .intro-screen {
		display: block;
		padding: 0 30px;
		margin: 0;
		width: 100%;
		max-width: 100%;
		height: auto;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-pack: start;
		justify-content: flex-start;
		text-align: center;
	}

	.header-banner .intro-screen-intro .tip {
		font-size: 16px;
		line-height: 22px;
	}

	.header-banner .intro-screen-intro .tip .name {
		width: 48px;
		height: 19px;
	}

	.header-banner .intro-screen-intro .tip .close-icon {
		width: 12px;
		height: 12px;
	}

	.intro-screen-intro-title {
		width: auto;
		font-size: 28px;
		margin: 15px 0;
	}

	.header-banner .intro-screen-intro .intro-screen-intro-detail {
		font-size: 14px;
		line-height: 23.8px;
		text-align: center;
		margin-bottom: 32px;
	}

	.header-banner .intro-screen .intro-screen-media {
		width: 100%;
		height: 40vw;
	}

	.header-banner:before, .header-banner:after {
		display: none;
	}

	.second-title {
	}

	.custom-row {
		padding: 0px 50px 50px;
	}

	.logo-wall {
		margin: 0px auto;
	}

	.logo-wall-row {
		flex-flow: wrap;
	}

	.logo-wall-row .logo-wall-cell {
		width: 50%;
		margin-bottom: 20px !important;
		flex: none;
	}

	.solu-process {
		padding: 60px 30px;
	}

	.solu-process .tp-title {
		font-size: 28px;
		line-height: 38px;
		margin-bottom: 40px;
	}

	.solu-process .tp-item {
		margin-bottom: 100px;
		padding: 0;
	}

	.solu-process .tp-item:last-of-type {
		padding: 0;
	}

	.solu-process .tp-item .tpi-title {
		font-size: 20px;
		line-height: 28px;
	}

	.solu-process .tp-item .tpi-desc {
		margin: 24px 0 32px;
		font-size: 14px;
		line-height: 22px;
	}

	.solu-process .tp-item .tpi-title .pc-num {
		display: none;
	}

	.solu-process .tp-item .tpi-title .dot {
		width: 15px;
		display: inline-block;
	}

	.sign-in-panel {
		padding: 0 24px;
	}

	.login-mobi {
		position: absolute;
		right: 20px;
		top: 15px;
		font-size: 16px;
		color: #47AEFF;
	}

}

@media (min-width:1680px) {
	.logo-wall {
		margin: 0px auto;
	}

}