@font-face {
   font-family: STIXGeneral;
   src: url(/STIXGeneral.otf) format("opentype")
}

@font-face {
   font-family: STIXGeneral;
   src: url(/STIXGeneralBol.otf) format("opentype");
   font-weight: 700
}

body {
   margin: 0;
   padding: 0
}

a, a:active, a:hover a:focus, a:link, a:visited {
   text-decoration: none;
   color: inherit;
   border: none;
   outline: none;
   background-color: transparent
}

.flex {
   -webkit-box-flex: 1;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto
}

.layout.horizontal {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row
}

.layout.vertical {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column
}

.layout.center {
   -webkit-box-align: center;
   -ms-flex-align: center;
   -ms-grid-row-align: center;
   align-items: center
}

.layout.center-center {
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center
}

.layout.horizontal, .layout.vertical {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex
}

.flex-end {
   -webkit-box-pack: end;
   -ms-flex-pack: end;
   justify-content: flex-end
}

.flex-space-around {
   -ms-flex-pack: distribute;
   justify-content: space-around
}

.layout.wrap {
   -ms-flex-wrap: wrap;
   flex-wrap: wrap
}

:root {
   font-family: STIXGeneral, Helvetica, sans-serif;
   color: #000;
   line-height: 1.5em;
   letter-spacing: .1em;
   font-size: 1.1vw
}

h1, h2, h3, h4, h5, h6 {
   font-weight: 400
}

h1 {
   font-size: 1.9vw
}

h2 {
   font-size: 1.6vw;
   color: #fff
}

h3 {
   font-size: 1.4vw
}

h4 {
   font-size: 1.3vw;
   font-weight: 600;
   margin-bottom: 0
}

h5 {
   font-size: .8vw
}

h6 {
   font-size: .6vw
}

p {
   margin: 0
}

button, input[type=text], textarea {
   font-size: 1vw;
   font-family: STIXGeneral, Helvetica, sans-serif
}

.center-text {
   text-align: center
}

@media (max-width:800px) {
   :root {
      line-height: 1.5em;
      letter-spacing: 1px;
      font-size: 14px
   }
   h1 {
      font-size: 25px
   }
   h2 {
      font-size: 22px
   }
   h3 {
      font-size: 20px
   }
   h4 {
      font-size: 16px
   }
   h5 {
      font-size: 14px
   }
   h6 {
      font-size: 13px
   }
   button, input[type=text], textarea {
      font-size: 14px
   }
}

:root {
   margin: 0;
   box-sizing: border-box;
   overflow-x: hidden
}

body {
   overflow: hidden;
   background-color: #d9d700
}

img {
   pointer-events: none
}

button, input[type=text], textarea {
   outline: 0;
   border: 0;
   background-color: #fff
}

button {
   padding: .7vw 1.8vw;
   font-weight: 600;
   font-size: 1.1vw;
   cursor: pointer
}

.underlay {
   position: absolute;
   top: 7vw;
   right: -5vw;
   z-index: -1;
   pointer-events: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none
}

.underlay img {
   width: 63vw
}

@media (max-width:800px) {
   button {
      padding: 10px;
      font-weight: 600;
      font-size: 12px
   }
}

.menu {
   font-size: 2vw;
   font-weight: 600
}

.menu>* {
   margin-right: 2vw
}

.menu .active {
   color: #fff
}

@media (max-width:800px) {
   .menu {
      font-size: 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center
   }
   .menu>* {
      margin: 6px
   }
}

.detail {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row
}

.detail-image {
   margin-left: 2.5vw;
   margin-right: 4.5vw
}

.detail-image .product-image img {
   margin: 0;
   width: 19vw
}

.detail-image .detail-contact img {
   width: 19vw
}
.detail-contact {
   margin-top: 6vw;
   margin-left: 1.5vw
}

.detail-contact a:hover {
   text-decoration: underline
}

.detail-right {
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   margin: 0;
   margin-right: 5vw;
   margin-left: 5vw
}

.detail-left {
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   margin: 0;
   margin-right: 5vw;
   margin-left: 5vw
}
.detail-next, .detail-right {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column
}

.detail-next {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   margin-top: 9vw;
   color: #fff;
   font-size: 1.5vw
}

.next-image {
   margin-bottom: .7vw
}

.next-image img {
   width: 2.2vw
}

.ipoint-cloud-left {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 19vw;
   flex: 0 0 19vw
}

.ipoint-cloud-right {
   color: #fff
}

@media (max-width:800px) {
   .detail, .detail-image {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column
   }
   .detail-image {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin: 40px 7px 10px 10px
   }
   .detail-image .product-image img {
      width: 220px
   }
   .detail-contact img {
	  width: 220px
   }
   .detail-right {
      margin-right: 10px;
      margin-left: 10px
   }
   .detail-contact {
      margin-top: 0;
      margin-left: 0;
      margin-bottom: 30px
   }
   .detail-contact, .detail-text {
      text-align: center
   }
   .ipoint-cloud .detail-text {
      text-align: left
   }
   .detail-next {
      font-size: 20px
   }
   .next-image {
      margin-bottom: 5px
   }
   .next-image img {
      width: 30px
   }
   .ipoint-cloud-left {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 140px;
      flex: 0 0 140px
   }
}

.home {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0
}

.home-image {
   background-image: url(/images/home.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 70vh
}

.home-logo {
   position: absolute;
   top: -12.5vw;
   left: 10vw;
   pointer-events: none
}

.circle {
   background-color: #fff;
   border-radius: 50%;
   height: 25vw;
   width: 25vw;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center
}

.circle img {
   width: 16vw
}

.home-menu {
   position: absolute;
   top: 4vw;
   left: 38vw
}

.home-overlay {
   pointer-events: none;
   position: absolute;
   top: -25vw;
   right: 6vh
}

.home-overlay img {
   width: 60vw
}

.home-foreground {
   position: fixed;
   top: 70vh;
   left: 0;
   width: 100%;
   height: 30vh;
   background-color: #d9d700
}

@media (max-width:800px) {
   .home-image {
      height: 300px;
      margin-bottom: 0
   }
   .home-overlay {
      position: absolute;
      top: -120px;
      right: 10px;
      left: auto
   }
   .home-overlay img {
      width: 300px
   }
   .home-logo {
      position: relative;
      left: auto;
      top: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      margin-top: -90px
   }
   .circle {
      height: 180px;
      width: 180px
   }
   .circle img {
      width: 130px
   }
   .home-menu {
      position: relative;
      left: auto;
      top: auto;
      margin: 30px 50px
   }
}

@media (max-width:800px) and (max-height:460px) {
   .home-menu {
      margin: 0;
      margin-top: 10px
   }
   .home-menu .menu {
      font-size: 17px
   }
   .home-menu .menu>* {
      margin: 2px
   }
}

@media (max-width:800px) and (min-height:460px) {
   .home-foreground {
      top: 300px
   }
}

@media (max-width:800px) and (max-height:530px) {
   .home-foreground {
      top: 40vh;
      height: 60vh
   }
}

.header {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   margin-bottom: 4vw
}

.header-logo {
   margin-left: 4vw;
   margin-right: 5vw
}

.header-logo img {
   width: 16vw
}

.header-menu {
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
   margin-bottom: 2vw
}

.header-contact {
   font-size: 1vw;
   line-height: 1.5em;
   text-align: right;
   color: #fff;
   margin-right: 2vw;
   margin-top: 1vw
}

.header-contact a:hover {
   text-decoration: underline
}

@media (max-width:800px) {
   .header {
      margin-bottom: 12px
   }
   .header-logo img {
      width: 160px
   }
   .header-logo {
      margin-left: 7px;
      margin-right: 10px
   }
   .header-menu {
      margin: 12px
   }
   .header-contact {
      text-align: center;
      margin-right: 4px;
      font-size: 14px
   }
}

.products {
   margin: 5vw 3vw
}

.products-list {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center
}

.products-product {
   margin: 1vw
}

.product-image {
   width: 21vw;
   line-height: 0
}

.product-image img {
   width: 21vw;
   border-radius: 50%;
   pointer-events: none
}

.products-product img {
   -webkit-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out
}

.products-product:hover img {
   -webkit-transform: scale(1.05);
   transform: scale(1.05)
}

.product-label {
   text-align: center;
   margin-top: 2.5vw
}

.product-title {
   font-weight: 600
}

.product-description {
   color: #fff
}

.crossfade img {
   position: absolute;
   -webkit-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out
}

.crossfade img.hidden {
   opacity: 0
}

@media (max-width:800px) {
   .products {
      margin: 20px
   }
   .product-image {
      height: 220px;
      width: 220px
   }
   .product-image img {
      width: 220px
   }
   .products-product {
      margin: 5px
   }
   .product-label {
      margin-top: 10px
   }
   .products-product {
      margin: 10px
   }
}

.about-me {
   margin: 5vw 3vw
}

@media (max-width:800px) {
   .about-me {
      margin: 20px
   }
}

.contact {
   margin: 5vw 3vw
}

.contact-form {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center
}

.contact-form-form {
   margin-left: 24vw
}

.contact-form input[type=text], .contact-form textarea {
   width: 18vw
}

.contact-form-buttons {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   margin-top: 2.8vw
}

.contact-form-buttons button {
   width: 8.6vw
}

#form-error {
   margin-top: 2vw;
   font-weight: 600
}

#form-error a {
   text-decoration: underline
}

@media (max-width:800px) {
   .contact {
      margin: 20px
   }
   .contact-form-form {
      margin-left: 0
   }
   .contact-form input[type=text], .contact-form textarea {
      width: 200px
   }
   .contact-form-buttons {
      margin-top: 16px
   }
   .contact-form-buttons button {
      width: 75px
   }
   #form-error {
      margin-top: 10px
   }
}

.view-manager-view:not(.active) {
   display: none!important
}

.tooltip {
	position: relative;
	display: inline-block;
}
.tooltip .tooltiptext {
	visibility: hidden;
	width: 360px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	top: -5px;
	left: 110%;
}
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
}