/** Top banner */
@media (min-width : 768px) {
	.banner {
		background: url(/static/coral/img/index/banner_lg.jpg) center no-repeat, #fbf8f6;
		height: 500px;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.banner-text {
		height: 420px;
	}
}

@media (max-width : 767px) {
	.banner {
		background:  #fbf8f6;
		padding-top: 40px;
	}
	.banner-xs {
		background: url(/static/coral/img/index/banner_xs.jpg) center no-repeat, #fbf8f6;
		background-size: 600px;
		height: 300px;
	}
	.banner-xs-1 {
		height: 400px;
	}
}

.banner-text {
	display: flex;
	align-items: center;
}

/** Second banner */
@media (min-width : 768px) {
	.banner-2 .box-frame {
		background-color: #fff;
	}
}

@media (min-width : 768px) {
	.banner-2 {
		background: url(/static/coral/img/index/banner_2_sm.png) center no-repeat, #fff;
		background-size: auto 100%;
	}
}

@media (min-width : 992px) {
	.banner-2 {
		background: url(/static/coral/img/index/banner_2_md.png) center no-repeat, #fff;
		background-size: auto 100%;
	}
}

@media (min-width : 1200px) {
	.banner-2 {
		background: url(/static/coral/img/index/banner_2_lg.png) center no-repeat, #fff;
		background-size: auto 100%;
	}
}

/** Howto block */
.howto-box {
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}

.howto-box .howto-left {
	flex-grow: 1;
	width: 55%;
}

.howto-box .howto-right {
	flex-grow: 1;
	width: 45%;
	margin-left: 16px;
}

.howto-title {
	border: 1px solid #D2D7D6;
	border-radius: 12px;
	padding: 16px;
	margin-top: 8px;
	display: flex;
	align-items: center;
}

.howto-title:nth-child(1) {
	margin-top: 0px;
}

.howto-title img {
	display: block;
	width: 32px;
	margin-right: 16px;
	flex-shrink: 0;
}

.howto-title p {
	display: block;
	margin-top: 0px;
	margin-bottom: 0px;
	flex-grow: 1;
	font-weight: bold;
}

.howto-preview p {
	font-weight: bold;
}

@media (min-width : 768px) {
	.howto-left .active {
		border: 1px solid #DF6B7C;
		background-color: #FEF7F8;
	}
}

.howto-right {
	border: 1px solid #D2D7D6;
	border-radius: 12px;
	padding: 16px;
}

.howto-preview {
	display: none;
}

.howto-right .active {
	display: block;
}

.howto-preview img {
	width: auto;
	max-width: 100%;
}

@media (max-width : 767px) {
	.howto-right {
		display: none;
	}
}

/** Agency image */
.icon-up .agency-image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 32px;
}

.image-block {
	display: flex;
	align-content: space-between;
	justify-content: stretch;
}

.image-block-left {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
}

.image-block-right {
	margin-left: 40px;
	flex-shrink: 0;
}

.image-block-right img {
	width: auto;
	max-width: 100%;
	height: 350px;
	border-radius: 16px;
}

@media (max-width : 767px) {
	.image-block {
		display: flex;
		flex-direction: column;
	}

	.image-block-right {
		margin-left: 0px;
		margin-top: 40px;
		align-self: center;
	}
}

/** For boxes (customized icon-box) */
.for-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

.for-box img {
	display: block;
	height: 64px;
	margin-bottom: 16px;
	flex-shrink: 0;
}

.for-box p {
	display: block;
	margin-top: 0px;
	margin-bottom: 0px;
}