/* Responsive layout for contactUs.jsp. Loaded after legacy and global responsive styles. */
.contactUs,
.contactUs *,
.contact_first,
.contact_first *,
.contact_thirds,
.contact_thirds *,
.contact_section,
.contact_section *,
.contact_fourth,
.contact_fourth *,
.contactFi,
.contactFi * {
	box-sizing: border-box;
}

.contact-picture {
	display: block;
	width: 100%;
	overflow: hidden;
}

@media screen and (max-width: 1024px) {
	html,
	body {
		width: 100%;
		min-width: 0 !important;
		overflow-x: hidden;
	}

	.contactUs,
	.contact-picture,
	.contactB,
	.contact_first,
	.contact_thirds,
	.contact_third,
	.contact_section,
	.contact_fourth,
	.contactFo,
	.contactFo .example,
	.contactFi,
	#map {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.contactB {
		display: block;
		height: auto;
		object-fit: cover;
	}

	/* Cloud introduction */
	.contact_first {
		height: auto;
		padding: 42px 24px;
	}

	.contact_first .borderBack {
		position: static;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.contact_first h3,
	.contact_third h3,
	.contact_section h3,
	.contactFo h3 {
		position: static;
		width: auto;
		height: auto;
		margin: 0 0 18px;
		font-size: 28px;
		font-weight: 500;
		line-height: 1.35;
		text-align: left;
	}

	.contact_first h3 {
		padding-left: 13px;
		border-left: 4px solid #2585df;
		background: transparent;
	}

	.borderW {
		position: static;
		width: 100%;
		margin: 0;
		padding: 0;
		background: transparent;
		font-size: 15px;
		line-height: 1.85;
	}

	.borderW p {
		margin: 0 0 10px;
		text-indent: 0;
	}

	/* Public cloud */
	.contact_thirds {
		background: #f6f8fb;
	}

	.contact_third {
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		padding: 42px 24px;
		overflow: visible;
	}

	.contact_third article {
		width: 100%;
		padding: 0;
		float: none;
	}

	.contact_third h3 {
		margin-top: 0;
	}

	.contact_third article p {
		margin: 0 0 12px;
		color: #596579;
		font-size: 15px;
		line-height: 1.8;
		text-indent: 0;
	}

	.contact_third h5,
	.contact_section h5 {
		margin: 24px 0 10px;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.55;
	}

	.contact_third article p:last-child,
	.contact_section p:nth-of-type(2) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 7px 14px;
		font-size: 15px;
	}

	.contact_third a,
	.contact_section a {
		margin: 0 !important;
		font-size: 15px;
		overflow-wrap: anywhere;
	}

	.versions {
		width: 100%;
		height: auto;
		margin-top: 24px;
		float: none;
		background: none;
	}

	.versions div {
		position: static;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: 0;
		padding: 20px;
		border: 1px solid #dce4ee;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 8px 24px rgba(31, 62, 104, 0.07);
	}

	.versions h6,
	.versions p {
		position: static;
		margin: 0;
	}

	.versions h6 {
		margin-bottom: 10px;
		color: #24364e;
		font-size: 16px;
		font-weight: 500;
	}

	.versions p {
		max-height: 230px;
		color: #596579;
		line-height: 1.7;
		overflow: auto;
		overflow-wrap: anywhere;
		-webkit-overflow-scrolling: touch;
	}

	/* Private cloud */
	.contact_section {
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		padding: 42px 24px;
		overflow: visible;
	}

	.contact_section > img {
		width: 100%;
		max-height: 430px;
		float: none;
		border-radius: 14px;
		object-fit: cover;
	}

	.contact_section article {
		width: 100%;
		margin: 28px 0 0;
		float: none;
	}

	.contact_section p:nth-of-type(1) {
		font-size: 15px;
		line-height: 1.85;
	}

	.contact_section p:nth-of-type(1) br {
		display: none;
	}

	/* Development downloads */
	.contact_fourth {
		background: #f6f8fb;
	}

	.contactFo {
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		padding: 42px 24px;
		overflow: visible;
	}

	.contactFo article {
		width: 100%;
		padding: 0;
		float: none;
	}

	.contactFo h3 {
		margin-top: 0;
	}

	.contactFo strong {
		display: none;
	}

	.contactFo article p {
		margin: 0;
		color: #596579;
		font-size: 15px;
		line-height: 1.8;
		text-indent: 0;
	}

	.contactFo .example {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 20px 14px;
		min-height: 0;
		margin: 28px 0 0 !important;
		padding: 0 !important;
		float: none;
		position: static;
	}

	.contactFo .example canvas,
	.contactFo .example > .circle1,
	.contactFo .example > .circle2 {
		display: none !important;
	}

	.contactFo .example a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		min-height: 92px;
		padding: 12px;
		border: 1px solid #e1e7ef;
		border-radius: 12px;
		background: #fff;
	}

	.contactFo .example a img {
		position: static !important;
		width: 64px !important;
		height: 64px !important;
		max-width: 100%;
		object-fit: contain;
	}

	/* Static map and address */
	.contactFi,
	#map {
		height: auto;
		min-height: 340px;
		padding: 54px 24px;
		background-position: center;
	}

	.contactFi .information {
		position: static;
		display: grid;
		grid-template-columns: 140px minmax(0, 1fr);
		width: min(100%, 680px);
		max-width: 680px;
		margin: 0 auto;
		border-radius: 12px;
		transform: none;
		overflow: hidden;
	}

	.contactFi .messageBox {
		min-height: 150px;
		border-radius: 0;
	}

	.contactFi .messageBox img {
		max-width: 108px;
		height: auto;
	}

	.contactFi .wordBox {
		min-width: 0;
		padding: 24px 20px;
	}

	.contactFi .wordBox strong {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 18px;
		font-size: 22px;
	}

	.contactFi .wordBox p {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 7px;
		font-size: 15px;
		line-height: 1.75;
	}

	.contactFi .site {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}

@media screen and (max-width: 768px) {
	.contact-picture {
		padding-top: 60px;
	}

	.contactB {
		width: 100%;
		height: auto;
	}

	.contact_first,
	.contact_third,
	.contact_section,
	.contactFo {
		padding: 34px 16px;
	}

	.contact_first h3,
	.contact_third h3,
	.contact_section h3,
	.contactFo h3 {
		font-size: 24px;
	}

	.contactFo .example {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px 10px;
	}

	.contactFo .example a {
		min-height: 82px;
		padding: 9px;
	}

	.contactFo .example a img {
		width: 56px !important;
		height: 56px !important;
	}

	.contactFi,
	#map {
		position: relative;
		height: 320px !important;
		min-height: 320px;
		padding: 0 !important;
		background-position: center;
		background-size: cover;
	}

	.contactFi .information {
		position: absolute;
		top: auto;
		right: 12px;
		bottom: 12px;
		left: 12px;
		display: block;
		width: auto;
		max-width: none;
		margin: 0;
		border-radius: 10px;
		box-shadow: 0 4px 16px rgba(25, 45, 72, 0.2);
		transform: none;
		overflow: hidden;
	}

	.contactFi .messageBox {
		display: none;
	}

	.contactFi .wordBox {
		padding: 11px 14px 12px;
	}

	.contactFi .wordBox strong {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0 0 4px;
		font-size: 16px;
		line-height: 1.45;
	}

	.contactFi .wordBox strong a {
		font-size: 15px;
		white-space: nowrap;
	}

	.contactFi .wordBox p {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 5px;
		margin: 0;
		font-size: 13px;
		line-height: 1.55;
	}
}

@media screen and (max-width: 360px) {
	.contactFo .example {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.contact_third article p:last-child,
	.contact_section p:nth-of-type(2) {
		align-items: flex-start;
		flex-direction: column;
	}

	.contactFi .information {
		right: 8px;
		bottom: 8px;
		left: 8px;
	}
}