@keyframes para {
	100% {
		background-position: 
			-5000px 20%,
			-800px 95%,
			500px 50%,
			1000px 100%,
			400px 0;
		}
	}

@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	40% {
		-webkit-transform: translateY(-30px);
		-ms-transform:     translateY(-30px);
		transform:         translateY(-30px)
	}
	60% {
		-webkit-transform: translateY(-15px);
		-ms-transform:     translateY(-15px);
		transform:         translateY(-15px)
	}
}

.menu-icon:hover{
  animation-name: bounce;
  -moz-animation-name: bounce;}
 
 .containers {
	 display: flex;
	 width: 100%;
	 height: 100%;
   font-family: 'Roboto', sans-serif;
}
 .sidebar.is-collapsed {
   flex: 1 0 50vw!important;}
 .sidebar { 

   /*border: 2px solid #ffffff59;*/
	 height: 100vh;
	 transition: all 0.3s ease-out;
}
 .sidebar.is-collapsed {
	 transform: translateX(-100%);
}
 .content { 
	 padding: 1rem;
	/* background: #999;*/
	 transition: all 0.3s ease-out;
   width:100vw;
   margin-left:20vw
}
 .content.is-full-width {
	 margin-left: -18vw;
}
 .btn, .btn2,.btn3{
   margin-top:85vh;
   padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #fff;
    border-radius: 4px;
}

#toggle{
 background: #3f3f3f; 
 /*  transform: rotate(90deg); 
  -webkit-transform: rotate(90deg); 
  -moz-transform: rotate(90deg); 
  -ms-transform: rotate(90deg); 
  -o-transform: rotate(90deg);*/
   color: white;  
  left:0%;  
  border: 1px solid #ffff;  
  }
@media (min-width: 700px) {
  
.icon svg {
  width: 50px;
  height: 50px;
  margin: 6px 0;
  overflow: visible;
}
 
#device,#hand,#hand-drag,#arrow{fill:#fff}
 
}
img.zoom-image{max-width:initial!important}
 .image {
	 max-width: 100%;
	 cursor: none;
}
 .image a {
	 cursor: none;
}
 .image img {
	 max-width: 100%;
	 vertical-align: middle;
	 z-index: 1;
}
 .zoom {
	 width: 60rem;
	 height: 60rem;
	 background: #fff;
	 border-radius: 100%;
	 position: absolute;
	 pointer-events: none;
	 transition: transform 0.25s ease, opacity 0s linear 0.25s, background 0.25s ease;
	 opacity: 0;
	 transform: scale(0);
	 transform-origin: 50% 50%;
	 overflow: hidden;
  /* border-radius: 100%;*/
   border: 2px solid #ffff;

}
 .zoom:before {
	 content: '';
	 position: absolute;
	 margin: auto;
	 left: 0;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 width: 100%;
	 height: 100%;
	 border-radius: 4px;
	 display: none;
}
 .zoom.show {
	 transform: scale(0.75);
	 opacity: 1;
/*	 transition: transform 0.25s ease, opacity 0s linear;*/
}
 .zoom.loading {
	 background: transparent;
}
 .zoom.loading:before {
	 display: block;
	 animation: loading 0.5s ease infinite alternate;
}
 @keyframes loading {
	 0% {
		 transform: scale(0.1);
		 box-shadow: inset 0 0 0 150px rgba(0, 0, 20, 0.4);
	}
	 50% {
		 transform: scale(1);
		 box-shadow: inset 0 0 0 140px rgba(50, 50, 50, 0.4);
	}
	 100% {
		 box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
	}
}
 .zoom.loading .zoom-image {
	 opacity: 0;
}
 .zoom .zoom-image {
	 position: fixed;
	 left: 0;
	 top: 0;
  /* transform: translate(-50%, -50%);*/
	 transition: opacity 0.25s ease;
}
#sidebar.active {
    margin-left: 10px!important;
    margin-right: 20px!important;
  /*  position: -webkit-sticky;
    position: sticky;*/
    top: 20vh;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    background: #44545ce8;
}

#sidebar {
  
    margin-left: -180px;
}
.btn1{    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
      background-color: #4ab865 !important;
    border-color: #fff !important;
  color:#ffff
}
.sidebar-open{
    width: 60px;
    position: relative;
    left: 0;
    top: 0;
    bottom: 0;
    background: none;
    box-shadow: 0px 0px 19px rgba(0, 0, 0, 0.06);
    visibility: visible;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    transition-property: transform, opacity;
    transition-duration: .5s, .25s;
    transition-delay: 0s, .5s;
    animation-name: slidein;
    animation-duration: .5s;
    animation-iteration-count:1;
    animation-timing-function: ease-out;

}

.main-menu {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
}

.icon-item {
    list-style: none;
    position: relative;
    width: 48px;
    height: 48px;
   /* border-bottom: 1px solid #ffffff0d;*/ 
    border-style:ridge; border-radius:100%;border:2px solid #ffffffb8;
    margin-bottom:15px;
    background:#44545ce8;
    margin-top:-5px
}

.menu-txt {
    opacity: 0;
    width: 0px;
    min-width: 0px;
    overflow: hidden;
    transition: 300ms linear;
    transition-delay: 250ms;
    display: flex;
    align-items: center;
    position: relative;
    top: 2px;
    left:4%;
    white-space: nowrap;
    overflow: hidden;
}

.menu-a {
    padding: 35px 33.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.menu-icon {
    display: block; 
    color: #bdbdbd;
    position: relative;
    z-index: 100;
    transition: 400ms;
     max-width: 35px;
}
.icon-item.active{background:#5b5b5b}

.icon-item:hover .menu-txt {
    opacity: 1;
    width: 100%;
    min-width: 40px;
    padding: 0px 40px;
    transition-delay: 0s;
    color: #ffff;
}

.menu-txt-hld {
    position: absolute;
    z-index: 99;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 38px;
    font-size: 18px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0);
    padding:10px 1px;
    transition: 250ms linear;
    display: flex;
   align-items: center;
    left: 5px;
    transition-delay: 300ms;
}

.icon-item:hover .menu-txt-hld {
   /* box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(0, 0, 0, 0.05);*/
    transition-delay: 0ms;
}
.active .menu-icon {
    color: #03A9F4;
} 

.open{z-index:999!important;width:60vw!important;bottom:0;height:100vh!important;background:#44545ce8;/*position:fixed!important*/}
.options.open .containers{display: block;}
.options{z-index:998}
.active{}
.viewer{height:100vh;}
 .viewer img {
   position: absolute;  
   opacity: 0;  
   max-width: 70vw;
   max-height: 70vh; 
   right: 20%;
   top: 55%;
  /* border: 3px solid #ffffff59;*/
  transform: translate(-0%, -50%);
  cursor: url(https://www.grainpro.com/hubfs/2021/logo/360degree.png), auto!important;
}  
  
 .viewer img.activeImg {
	 opacity: 1;
}
 .viewer::before {
	 padding-bottom: 56.25%;
	 float: left;
}
 .viewer::before, .viewer::after {
	 content: '';
	 display: table;
	 clear: both;
}
  
 article {
   z-index:1;
	 margin: 0 auto;
	 width: 100%;
	 max-width: 100vw; 
   position: absolute;
   max-height:100vh;
   /*background:url(https://www.grainpro.com/hubfs/2021/bg/3D%20background%20Filler%20%5BRecovered%5D-03.jpg) repeat;*/
   background-color: #4e6d7f; 
	background-repeat: repeat-x;
	background-position: 
		0 20%,
		0 100%,
		0 50%,
		0 100%,
		0 0;
	background-size: 
		2500px,
		800px,
		500px 200px,
		1000px,
		400px 260px;
	animation: 50s para infinite linear;
   
}
  
 article figure {
	 margin: 0;
	 padding: 0;
	 z-index: -1;
}
   



div.scroll{ 
  height: 60vh;
  width: 100%;
  color: black;
  display:inline; 
  position:relative;
  z-index:2;
  margin-top:10%
}

.feature-scroll { 
  position:relative;
/*  top:20vh;
  left: 5%; 
  transform: translate(-50%, -50%);padding:2%*/
  z-index:999;top: 20%;
    left: 20%;
  
}
.feature-scroll a img{bottom:12%;left:14%!important}
.imgdesc{display:flex!important}

 
@media (max-width: 767px){
.sidebar {
    margin-top: 0px!important;
  }}

@import "bourbon";
 @import "neat";
 .imgicon1.is-active,.imgicon2.is-active,.imgicon3.is-active,.imgicon4.is-active,.imgicon5.is-active,.imgicon6.is-active,.imgicon7.is-active,.imgicon8.is-active { 
    left: 1% !important;bottom: 10% !important;
}
 .hsdesc:before, .hsicon:before {
	 content: "";
	 display: block;
	/* border: 1px solid #fff;
	 background-color: transparent;*/
	 border-radius: 50%;
	 width: 30px;
	 height: 30px;
	 position: absolute;
	 left: 5px;
	 top: 5px;
	 /*background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxMS42IDExLjYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExLjYgMTEuNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMC41NjI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSI1LjgiIHkxPSIxMS42IiB4Mj0iNS44IiB5Mj0iMCIvPg0KPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjAuNTYyNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMCIgeTE9IjUuOCIgeDI9IjExLjYiIHkyPSI1LjgiLz4NCjwvc3ZnPg0K");
	 background-size: 75%;
	 background-position: center center;
	 background-repeat: no-repeat;*/
}
 .hsdesc {
	 position: absolute;
	 bottom: 20px;
	 left: 50%;
	 text-align: center;
	 color: #fff;
	 font-size: 16px;
	 transform: translateX(-50%);
	 -webkit-font-smoothing: antialiased;
	 opacity: 0;
	 visibility: hidden;
	 transition: opacity 350ms cubic-bezier(0.2, 0.5, 0.34, 1);
	 width: 100vw; 
}
 .hsdesc:before {
	 display: none;
}
 @media screen and (max-width:580px) { 
   .open{width:100vw!important;}
    .zoom.show {transform: scale(0.45)!important;}
    .zoom {width: 50rem!important; height: 50rem!important;}
   .btn3{margin-left:30%!important;padding: 6px 35px!important;}
   button p{font-size: 13px!important;display:block}
   .zoom{transform-origin: 50% 50%!important;}
.content.is-full-width {margin-left: -60vw!important;}
   .viewer img{max-width:100vw!important;right:0%!important}
   .sidebar {flex: 1 0 100vw!important;}
   .menu-icon{top:8px!important}
   .menu-txt { white-space:break-spaces!important;transition:50ms linear!important;transition-delay: 0ms!important;}
   .menu-txt-hld{font-size:16px;background:none!important;border:none!important;border-radius:0!important}
   .icon-item:hover .menu-txt{width:230px!important;padding:0px!important;left:20%!important;margin-top:-5%}
   .btn {left:25%!important;margin-top:70vh!important}
   .btn1,.btn2,.btn3{position:absolute;margin-top:70vh!important;padding: 6px 8px!important;}
   .btn2{margin-left:-2%!important}
	 .hsdesc {
     position:relative!important;
		 width: 100vw;
		 height: 20vh;
     right: 20%; 
     left:30%!important;
     top: 45vh;
		 padding: 50px 40px;
		 background-color: rgba(0, 0, 0, .35);
	}
      
	 .hsdesc strong {
		 display: block;
		 margin-bottom: 10px;
	}
	 .hsdesc span {
		 display: block;
	}
	 .hsdesc:before {
		 display: block;
		 top: 25px;
		 left: auto;
		 right: 4px;
		 transform: rotate(45deg);
		 cursor: pointer;
	}
   
   .zoom { z-index:999 }
}
 .hsdesc.is-visible {
	 opacity: 1;
	 visibility: visible;
}
 .hsicon {
	 padding: 20px;
	 height: 40px;
	 box-sizing: border-box;  
	 background-color: rgb(25 42 60 / 45%);
    border: 1px solid #ffff;
   cursor: pointer;
	 color: #fff;
	 -webkit-font-smoothing: antialiased; 
	 position: absolute;
	 line-height: 40px;
	 border-radius: 50px;
   	 opacity: 0;
	 width: 0;
	 font-size: 15px;
	/* overflow: hidden;*/
	 white-space: nowrap;
	 text-overflow: ellipsis;
	 transition: opacity 650ms ease-in, width 350ms linear;
	 text-indent: -9999em;
	 user-select: none;
}
 .hsicon.is-visible {
	 opacity: 1;
}
 .hsicon.is-active {
	 padding: 0px 20px 35px 50px;
	 text-indent: 0;
	 width: auto;
}
 .hsicon.is-active:before {
	 transform: rotate(45deg);
}
 .hsicon:before {
	 transition: transform 150ms cubic-bezier(0.2, 0.5, 0.34, 1);
}

@media screen and (min-width:1600px) {
  .icon-item{width:64px!important;height:64px!important}
  .menu-txt-hld span{font-size:24px!important;}
  .menu-txt-hld {padding:12px 1px!important;}
  .menu-icon{width:48px!important;max-width:48px!important;}} 
 @media screen and(max-width:580px) {
   .tutorial-step {
   margin-top: 50%!important;
  margin-left:10%!important;
}
 a#hs{top: 15%!important; left: 23%!important}
   .pulsating .ring{left:21%!important;top: 10%!important;}
	 .hsicon {
		 height: 30px;
		 line-height: 30px;
		 font-size: 13px;
		 padding: 15px;
	}
	 .hsicon.is-active {
		 padding: 0 15px 0 35px;
		 text-indent: 0;
		 width: auto;
	}
	 .hsicon:before {
		 top: 2px;
		 left: 2px;
		 width: 25px;
		 height: 25px;
	}
}
 @media screen and (max-width: 580px) {
   canvas {  
  top:  50%!important; 
}
	 .hsicon {
		 padding: 20px!important;
		 height: 30px!important;
		 line-height: 25px;
		 font-size: 12px;
	}
	 .hsicon.is-active {
		 padding: 0 10px 0 30px;
		 text-indent: 0;
		 width: auto;
	}
	 .hsicon:before {
		 width: 20px;
		 height: 20px;
	}
   
   .imgicon {
    margin-left: 0% !important;
    width: 80% !important;
  }
} 
 

/* Animation */
 @keyframes pulsate {
	 0% {
		 transform: scale(1);
		 opacity: 0.8;
	}
	 45% {
		 transform: scale(1.75);
		 opacity: 0;
	}
}
 @keyframes stop-pulsate {
	 from {
		 opacity: 0.4;
	}
	 to {
		 transform: scale(2);
		 opacity: 0;
	}
}
/* Button */
 .pulsating {
	 position: absolute;
}  
 .pulsating .ring {
	 display: block;
	 position: absolute; 
	 width: 2em;
	 height: 2em;  
	 border-radius: 50%;
	 border: 2px solid #ffff;
	 opacity: 0;
	 animation: pulsate 3s ease-out infinite;
   padding:25px
}
 .pulsating:hover .ring {
	 animation: none;
}
 .pulsating:active .ring, .pulsating .ring.is-active   {
	 animation: stop-pulsate 0.3s;
}
 

 
button{margin-top:10px;    margin: 15px 25px;display:inline-block;  
	 font-size: 2em; 
	 border: 1px solid; 
	 color: transparent;
	 background: transparent; 
}
 
 .svg-icon { 
	 height: 1.2em;
	 width: 1.2em;
	 fill: #ffff; 
   cursor:pointer
}
.svg-icon:hover{  
	 fill: #008a2a;  
}
/*
.btn {
text-align: center;
position: absolute;
bottom: 0;
left: 40%;
  position:fixed;
 }
 */



@media screen and (max-width:1124px){.sidebar.is-collapsed {flex: 1 0 46vw!important;}button {margin-top: 10px;margin: 15px 0px;}}
@media screen and (max-width:1200px){.open {width: 70vw!important;}.sidebar.is-collapsed {flex: 1 0 48vw!important;}}
@media screen and (max-width:800px){.open {width: 100vw!important;}.content.is-full-width {margin-left: -25vw!important;}.viewer img {max-width: 100vw!important; right: 0%!important;}}
@media screen and (max-width: 640px){.viewer img {max-width: 100vw!important;}.btn, .btn2, .btn3 {padding: 6px 30px!important;}.sidebar.is-collapsed {flex: 1 0 30vw!important;}}
@media screen and (max-width: 540px){.btn2 { margin-left: 2%!important;}}
@media screen and (max-width: 480px){.viewer img {max-width: 100vw!important;}.btn, .btn2, .btn3 {padding: 6px 8px!important;}

  .btn2 { margin-left: 4%!important;}.btn3 {margin-left: 32%!important;}}
@media screen and (min-width: 1600px){.btn, .btn2, .btn3{font-size:22px!important}
.content.is-full-width {  margin-left: -15vw!important;} 
 .viewer img {right: 15%!important;}
}
/*@media screen and (max-width:900px){.sidebar.is-collapsed {flex: 1 0 40vw!important;}.open {width: 100vw!important;}}
@media screen and (max-width:800px){.content.is-full-width {margin-left: -30vw!important;}.btn, .btn2, .btn3 {padding: 6px 30px!important;}}
@media screen and (max-width: 700px){.sidebar.is-collapsed {flex: 1 0 35vw!important;}}
@media screen and (max-width: 640px){button {margin-top: 10px;margin: 15px 0px;}.viewer img {max-width: 100vw!important;right: 4%!important;}.btn, .btn2, .btn3 {padding: 6px 12px!important;}.sidebar.is-collapsed {flex: 1 0 30vw!important;}}
@media screen and (max-width: 580px){.content.is-full-width {margin-left: -30vw!important;}.btn, .btn2, .btn3{ margin-top:80vh!important;line-height: 2!important; white-space: normal;!important}
 }*/