@media (max-width: 1199px) {
	section.menu > div.row > div > ul > li > .menu-content.reference > a {
		width: calc(50% - 1px);
	}
}

@media (max-width: 991px) {
	.language {
		display: none;
	}

	section.subpage .row .header h1 {
		font-size: 40px;
	}

	section.subpage:before {
		background: linear-gradient(90deg, #1b1b1b 33.33333333%, rgba(0, 0, 0, 0) 33.33333333%);
	}

	section.subpage .row .content .content-section .subcontent-section {
		padding: 0 50px 0 30px;
	}
}

@media (max-width: 767px) {
	section > div.row > .menu-container {
		height: calc(80% - 80px);
		margin: 40px 0;
	}

	.language {
		float: right;
		display: block;
	}

	section > div.row > div > div > ul {
		padding: 0 90px !important;
	}

	section.menu > div.row > div > ul > li > .menu-content.reference > a {
		width: calc(30% - 1px);
	}

	section.subpage .row .header h1 {
		font-size: 30px;
		padding-left: 0;
	}

	section.subpage .row .header {
		text-align: center;
	}

	section.subpage:before {
		background: rgba(0, 0, 0, 0);
	}

	section.subpage .row .content .content-section .subcontent-section {
		padding: 0 110px 0 90px;
	}

	section.subpage .row .content .content-section,
	section.subpage .row .content,
	section.subpage .row .submenu,
	section.subpage .row .submenu ul {
		height: auto;
	}

	section.subpage .row .content .content-section,
	section.subpage .row .submenu ul {
		width: 100%;
	}

	section.subpage .row .content {
		padding: 20px 0 0 0 !important;
	}

	section > div.row > div.submenu {
		min-height: 0;
	}

	section.subpage .row .submenu ul li {
		padding: 10px 0;
	}

	section.subpage .row .submenu li:first-of-type {
		padding: 10px 0;
	}

	section.subpage .row .content .content-section .subcontent-section .reference-wrapper:not(.media) a .hover span {
		font-size: 12px;
	}

	section.subpage .row .content .content-section .subcontent-section .reference-wrapper:not(.media) a .hover h6 {
		font-size: 13px;
	}

	/* OFF SCROLL */
	section.subpage .row .scroll-wrapper.overflow-child-767 {
		width: calc(100% + 40px);
		overflow-y: scroll;
		overflow-x: hidden;
	}
}

@media (max-width: 549px) {
	.language {
		display: none;
	}

	section.menu > div.row > div > ul > li > .menu-content.reference > a {
		width: calc(50% - 4px);
	}

	section.menu > div.row > div > ul > li > a {
		font-size: 40px;
	}

	section.subpage .row .header h1 {
		padding-left: 30px;
	}

	section.subpage .row .header:nth-of-type(2) {
		min-height: 50px !important;
		margin-top: -40px;
	}

	section.subpage .row .header:nth-of-type(2) h1 {
		font-size: 20px;
	}

	.wrapper h1 {
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}

	section.subpage .row .content .content-section .subcontent-section {
		padding: 0 80px 0 60px;
	}

	section > div.row > div > div > ul {
		padding: 0 60px !important;
	}

	section.subpage .row .content .content-section .subcontent-section .button {
		padding: 15px 20px;
		width: 100%;
	}

	section.subpage .row .content .content-section .subcontent-section .reference-wrapper:not(.media) a .hover span {
		font-size: 10px;
	}

	section.subpage .row .content .content-section .subcontent-section .reference-wrapper:not(.media) a .hover h6 {
		font-size: 9px;
	}
}

@media (max-width: 400px) {
	section.subpage .row .content .content-section .subcontent-section {
		padding: 0 50px 0 30px;
	}

	section > div.row > div > div > ul {
		padding: 0 30px !important;
	}

	section.subpage .row .header h1 {
		padding-left: 10px;
		padding-right: 10px;
	}

	section.subpage .row .content .content-section .subcontent-section .reference-wrapper:not(.media) a .hover span {
		display: none;
	}
}

/* HEIGHT BASED */

@media (max-height: 650px) {
	section > div.row > div {
		min-height: 25vh;
	}

	main > ul > li {
		height: 25vh;
	}

	.arrow-wrapper {
		height: 25vh;
	}

	section.subpage .row .scroll-wrapper {
		height: calc(75vh - 100px);
	}

	.viewer-body {
		top: 0;
		height: 75vh;
	}
}

@media (max-height: 525px) {
	section > div.row > div {
		min-height: calc(100vh / 3);
	}

	main > ul > li {
		height: calc(100vh / 3);
	}

	.viewer-body {
		height: calc((100vh / 3) * 2);
	}

	.arrow-wrapper {
		height: calc(100vh / 3);
	}

	section.subpage .row .scroll-wrapper {
		height: calc(((100vh / 3) * 2) - 100px);
	}
}

@media (max-height: 400px) {
	section > div.row > div {
		min-height: 50vh;
	}

	main > ul > li {
		height: 50vh;
	}

	section.subpage .row .scroll-wrapper {
		height: calc(50vh - 100px);
	}

	.viewer-body {
		height: 50vh;
	}
}

@media (max-height: 650px) and (max-width: 767px) {
	section > div.row > .menu-container {
		height: calc(75vh - 80px);
	}
}

@media (max-height: 525px) and (max-width: 767px) {
	section > div.row > .menu-container {
		height: calc(((100vh / 3) * 2) - 80px);
	}
}

@media (max-height: 400px) and (max-width: 767px) {
	section > div.row > .menu-container {
		height: calc(50vh - 80px);
	}
}

@media (max-height: 400px) and (orientation: portrait) {
	.viewer-body {
		height: 50vh;
		width: 90%;
	}

	.arrow-wrapper {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50vh;
	}

	.viewer-body {
		top: 0;
	}

	.previmage,
	.nextimage {
		position: static;
		margin: auto 50px;
	}
}

@media (max-height: 400px) and (max-width: 991px) and (orientation: landscape) {
	.viewer-body {
		height: 100%;
		width: 60%;
		margin: auto 10% auto auto;
		top: 0;
	}

	.arrow-wrapper {
		height: 0;
	}
}

@media (max-height: 400px) and (max-width: 767px) and (orientation: landscape) {
	.viewer-body {
		height: 100%;
		width: 95%;
		margin: auto;
	}
}

/* FONT SIZE */

@media screen and (max-width: 991px) , screen and (max-height: 900px) {
	body {
		font-size: 16px;
	}
}