html, body {height: 100%; min-height: 100vh; margin: 0px; padding: 0px; display: flex; flex-direction: column; font-size: clamp(14px, 1vw, 16px); font-family: "Open Sans", sans-serif; color: #444444; scroll-behavior: smooth;}

a {text-decoration: none; color: #27aae1; cursor: pointer; transition: all 0.3s;overflow-wrap: break-word;word-wrap: break-word;}
a:hover {color: #ff6600; transition: all 0.3s;}

h1 {width: 100%; margin: 0px; font-family: "Italianno", cursive; font-size: clamp(48px, 8vw, 100px); font-weight: normal;}
h2 {width: 100%; margin: 0px; font-family: "Italianno", cursive; font-size: clamp(12px, 5vw, 48px); font-weight: normal;}
h3 {width: 100%; font-size: clamp(14px, 2vw, 24px); font-weight: normal;}

b {font-weight: bold;}

.red {margin: 0px; padding: 0px; color: red; font-weight: bold;}

.top-container {position: fixed; top: 0px; width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; background: white; z-index: 9999; transition: all 0.3s;}
.top-container.top-small {height: 60px; /*border-bottom: 1px solid #eeeeee;*/ box-shadow: 0px 0px 40px #00000033;}
.top {position: relative; width: 1440px; height: 80%; padding: 0px 20px; display: flex; align-items: center; gap: 100px;}
.top .logo {position: absolute; height: 40%;}
.top img {position: relative; width: auto; height: 100%; box-sizing: border-box;}
.menu-container {position: relative; margin-left: 150px; display: flex; align-items: center;}
.menu-container .menu-item .menu-text {z-index: 1;}
.menu-container .menu-item {position: relative; margin: 0px 10px; padding: 3% 5%; display: flex; justify-content: center; align-items: center; /*border: 1px solid silver;*/ border-radius: 100px; background: white; cursor: pointer;}
.menu-container .menu-item:hover {/*border: 1px solid #2daae1;*/ color: white;}
.menu-container .menu-item .menu-effect {position: absolute; width: 0px; height: 0px; transition: all 0.2s;}
.menu-container .menu-item:hover .menu-effect {width: 85%; height: 70%; border-radius: 100px; background: #2daae1; color: white;}
.menu-container .menu-active {color: white; /*border: 1px solid #2daae1;*/}
.menu-container .menu-active .menu-effect {width: 100%!important; height: 100%!important; border-radius: 100px; background: #2daae1; color: white;}
.dot-menu {display: none;}

.container {position: relative; top: 0px; width: auto; height: auto; padding: 0vw 0px 10vw 0px; display: flex; flex: 1; flex-direction: column; justify-content: flex-start; align-items: center; background: url("../gfx/cover.webp") no-repeat center bottom; background-size: 100% auto;}

#navigation {position: fixed; right: 1vw; top: 50%; transform: translateY(-50%); width: 50px; height: auto; z-index: 9999;}
.nav-item {position: relative; width: 20px; height: 20px; margin: 15px; display: flex; justify-content: center; align-items: center; border: 1px solid silver; border-radius: 100px; cursor: pointer;}
.nav-item-content {position: absolute; width: 0%; height: 0%; border-radius: 100px; transition: all 0.3s;}
.nav-item:hover {border: 1px solid #27aae1;}
.nav-item:hover .nav-item-content {width: 50%; height: 50%; background: #27aae1;}
.nav-item-active .nav-item-content {width: 100%; height: 100%; border: 1px solid #27aae1; background: #27aae1;}
.nav-item-active:hover .nav-item-content {width: 100%; height: 100%;}
.nav-item-title {position: absolute; right: 100%; max-width: 0px; padding: 0px; transform: translateX(-10px); overflow: hidden; background: white; border-radius: 100px; font-size: 12px; text-align: right; transition: all 0.3s;}
.nav-item-active .nav-item-title, .nav-item:hover .nav-item-title {max-width: 100px; padding: 8px;}

/*
#navigation {position: fixed; right: 1vw; top: 50%; transform: translateY(-50%); width: 50px; height: 100px; z-index: 9999;}
.nav-item {position: relative; width: 20px; height: 20px; margin: 15px; display: flex; justify-content: center; align-items: center; border: 1px solid silver; border-radius: 100px; cursor: pointer;}
.nav-item-content {position: absolute; width: 100%; height: 100%; border: 1px solid silver; border-radius: 100px; transition: all 0.3s;}
.nav-item:hover {border: 1px solid #27aae1;}
.nav-item:hover .nav-item-content {border: 1px solid #27aae1; animation: nav-item-button 1.5s linear infinite;}
.nav-item-active .nav-item-content {border: 1px solid #27aae1; background: #27aae1;}
.nav-item-active:hover .nav-item-content {animation: none;}
.nav-item-title {position: absolute; right: 100%; max-width: 0px; padding: 0px; transform: translateX(-10px); overflow: hidden; background: white; border-radius: 100px; font-size: 12px; text-align: right; transition: all 0.3s;}
.nav-item-active .nav-item-title, .nav-item:hover .nav-item-title {max-width: 100px; padding: 8px;}

@keyframes nav-item-button {
  0% {transform: scale(1); opacity: 0;}
  50% {transform: scale(1.5); opacity: 1;}
  100% {transform: scale(2); opacity: 0;}
}
*/

.container-content {position: relative; width: 100%; min-height: 80vh; display: flex; justify-content: center;}
.content {position: relative; width: 100%; max-width: 1440px; padding: 0px 8vw; overflow-x: hidden;}
.content-box {position: relative; padding: 20px; box-sizing: border-box; flex: 1; display: flex; justify-content: center; align-items: center; font-size: clamp(14px, 1.8vw, 18px);}

.products, .downloads, .service, .contact {width: 100%;}

.products .content {display: flex; flex-direction: column; align-items: center;}
.products-list {position: relative; width: 50vw; display: flex; flex-direction: column; justify-content: center; gap: 50px;}
.products-list > div {display: flex; align-items: center; gap: 20px; cursor: pointer;}
.products-list img {height: 8vw;}

.nhs-6 {width: 100%;}
.nhs-6 .content {display: flex; flex-wrap: wrap;}
.section1 {background: linear-gradient(0deg,rgba(224, 224, 224, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 70%, rgba(224, 224, 224, 1) 100%); overflow: hidden;}
.section1 model-viewer {flex: 1; height: auto;}
.section1 h3 {opacity: 0.6; font-weight: 300;}
.section1 .content-box img {width: 200px;}
.section1 .content-box {display: flex; flex-direction: column; justify-content: center; align-items: start;}
.section1 .content-box p {line-height: 150%;}
.section1 .blur-box {position: absolute; bottom: 0px; left: 0px; width: 500px; height: 250px; background: #2daae1;  transform: translateX(-50%) translateY(50%); filter: blur(200px);}

.section2 {min-height: 90vh; background: url("../gfx/koobe-nhs6_night.jpg") no-repeat center center / cover; color: white; text-align: center; font-weight: 100;}
.section2 h1 {color: #ffe4c4;}
.section2 .content-box {flex-direction: column; align-items: stretch;}
.section2 .content-box img {width: 40vh; filter: hue-rotate(-150deg) saturate(0.2);}
.section2 .box {position: relative; display: flex; justify-content: space-evenly;}
.section2 .box p {display: flex; flex-direction: column; align-items: center; font-size: 12px; line-height: 150%;}
.section2 .box img {width: 80px; margin: 10px;}

.section3 {min-height: 90vh; gap: 10%; background: url("../gfx/koobe-nhs6_storage.jpg") no-repeat center center / cover; color: white; font-weight: 100;}
.section3 h1 {text-align: center;}
.section3 .content-box {flex-direction: column; justify-content: center; text-align: center;}
.section3 .content-box p {line-height: 150%; filter: drop-shadow(0px 0px 20px black)}

.section4 {min-height: 90vh; background: url("../gfx/koobe-nhs6_lifestyle-2.jpg") no-repeat center center / cover; color: white; font-weight: 100;}
.section4 h1 {text-align: center;}
.section4 .content-box {flex-direction: column; align-items: flex-start;}
.section4 .content-box p {line-height: 150%; filter: drop-shadow(0px 0px 20px black)}
.section4 .note {font-size: 12px;}

.section5 {min-height: 90vh;}
.section5 .content-box img {width: 350px;}
.section5 h2 {font-family: "Open Sans", sans-serif; margin-bottom: 20px;}
.section5 table tr td {transition: all 0.3s;}
.section5 table tr:hover td {color: #27aae1;}
.section5 table td {padding-right: 30px;}
.section5 table td:nth-child(2) {color: silver;}

.service {margin-bottom: 5vw;}
.koobe-info {padding: 10px; display: table; border: 1px solid #27aae1; color: #27aae1;}

.bottom {position: relative; top: 0px; width: 100%; height: auto; padding: 40px; box-sizing: border-box; display: flex; flex-grow: 1; justify-content: center; background: black; color: #999999;}

.effect-left, .effect-right, .effect-top, .effect-bottom {opacity: 0; transition: all 1s ease-in-out;}
.effect-left { transform: translateX(-20%); filter: blur(5px);}
.effect-right { transform: translateX(20%); filter: blur(5px);}
.effect-top { transform: translateY(-20%); filter: blur(5px);}
.effect-bottom { transform: translateY(20%); filter: blur(5px);}
.in-view {opacity: 1; transform: translateX(0) translateY(0); filter: blur(0px);}

@media (max-width: 640px) {
	
	.top .logo {position: relative;}
	
	.menu-container {margin-left: auto;}
	.menu-container > .menu-item {display: none;}
	.menu-container .menu-item {margin: 10px;}
	.dot-menu {position: relative; width: 40px; height: 7px; display: block; border-radius: 50px; background: black;}
	.dot-menu::before {position: absolute; top: -12px; width: 40px; height: 7px; border-radius: 50px; background: black; content: "";}
	.dot-menu::after {position: absolute; bottom: -12px; width: 40px; height: 7px; border-radius: 50px; background: black; content: "";}
	.dot-menu-content {position: absolute; top: calc(100% + 20px); right: 0px; width: 120px; height: 0px; padding: 0px; overflow: hidden; background: white; z-index: 9999; transition: all 0.3s; border-radius: 10px;}
	.dot-menu:hover .dot-menu-content {height: auto; padding: 10px; box-shadow: 0px 0px 40px #00000033;}
	
	.container-content {min-height: 88vh;}	
	
	.products-list {width: 100%;}
	.products-list img {width: 100px; height: auto;}
	
	.content-box {text-align: justify;}
	
	/*#navigation {top: auto; bottom: 1vw; transform: translateY(0%)}*/
	/*.nav-item-active .nav-item-title { animation: nav-item-button 0.3s linear 1 forwards 2s; }
	@keyframes nav-item-button {
		0% {width: 100%; }
		100% {width: 0%; padding: 0px;}
	}*/
	
	.nhs-6 .content {flex-direction: column-reverse; align-items: center;}
	.section1 .content-box img {width: 150px;}
	.section1 model-viewer {width: 250px; height: 400px; flex: auto;}
	
	.section2 {background: url("../gfx/koobe-nhs6_night_mobile.jpg") no-repeat center center / cover;}
	.section2 .box img {width: 50px;}
	.section2 .box {flex-wrap: wrap;}
	.section2 .box p {margin: 0px; flex: 1 0 50%; text-align: center;}
	
	.section3 {background: url("../gfx/koobe-nhs6_storage_mobile.jpg") no-repeat center center / cover;}
	
	.section4 {background: url("../gfx/koobe-nhs6_lifestyle-2_mobile.jpg") no-repeat center center / cover;}
	.section4 .content {flex-direction: column; justify-content: flex-end;}
	.section4 .content-box {flex: 0;}
	.section4 .content-box:nth-child(2) {display: none;}
	.section4 .content-box p {margin-top: 0px;}
	
	.section5 .content-box img {width: 100%;}
	.section5 table td {padding: 0px 10px;}
	
}


/*.section1 {font-size: 18px; background: url("../gfx/wave.webp") no-repeat center bottom / contain;}*/