@font-face {
	font-family: gotham-black;
	src: url("../fonts/GothamBlack.otf");
  }
  
  @font-face {
	font-family: gotham-bold;
	src: url("../fonts/GothamBold.ttf");
  }
  @font-face {
	font-family: gotham-normal;
	src: url("../fonts/GothamBook.ttf");
  }
  @font-face {
	font-family: gotham-medium;
	src: url("../fonts/GothamMedium.ttf");
  }
  
  html,
  body {
	width: 100%;
	height: 100%;
  }
  *{
	  margin:0;
	  padding:0;
  }
  body {
	 font-family: gotham-normal;
	font-size:15px;
  }
  
  a {
	color: #fdcc52;
	-webkit-transition: all .35s;
	transition: all .35s;
  }
  a, input, textarea, select, button{
	  outline:0;
  }
  a:hover, a:focus {
	color: #fcbd20;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
	font-family: gotham-bold;
  }
  
  p {
	margin-bottom: 15px;
  }
  
  .plainRow{
	  float:left;
	  width:100%;
	  clear:both;	
  }
  .noMargin{
	  margin:0!important;
  }
  .noPadding{
	  padding:0!important;
  }
  .noBorder{
	  border:none!important;
  }
  
			  #banner { 
	  background: #1eb6d3; 
	  background-size: cover; 
	  height: 100vh; 			
	  text-align: center;
	  position: relative;  
	  overflow: hidden ;
	  margin:0 auto;
	  transition:all 2s ease;				
  }
  /* #banner:hover  .doorBox{
	  background: url(img/lab.jpg) no-repeat center 0; 
	  transform: scale(1.5);
	  transition:all 2s ease-in-out;			
  } */
  .doorBox{               
	  background: url('../img/lab.jpg') no-repeat center 0; 
	  height:598px;
	  background-size:cover;
	  overflow: hidden;
	  width: 776px;
	  margin: 72px auto;
	  position: relative;
	  border-radius:100px;
	  border:40px solid #22c6db;
	  box-shadow: 6px 8px 0px #1096b5;
  }
  .doorContainer{
	  position:relative;
  }	
  .tree{
	  position:absolute;
	  left:130px;
	  bottom:-70px;
	  z-index:999;
  }  
  .doorHoverLeft { 
	  position: absolute; 
	  left: 0; 
	  height:520px;
	  top: 0; 
	  bottom: 0; 
	  width: 50%; 
	  transition: 2s ease-in-out; 
	  background: url('../img/left-door.png') no-repeat 0 0;                     
	  width: 50%;			  
	  border-right:1px solid #0041ce;
  }
  .doorHoverLeft img{ 
	  position: absolute;
	  left:auto;
	  right:-0;
	  top:200px;
	  width:0;
	  animation:sprayLeft 1.8s linear;
	  opacity:0;
	  transition:all 0.3s ease;
	  z-index:99
  }
  .doorHoverRight { 
	  position: absolute; 
	  width: 50%;
	  right: 0; 
	  left:auto;
	  height:520px;
	  top: 0; 
	  bottom: 0; 
	  width: 50%; 
	  transition: all 2s ease-in-out; 
	  background: url('../img/right-door.png') no-repeat top right;  
	  border-left:1px solid #0041ce;	
  }
  .doorHoverRight img{ 
	  position: absolute;
	  left:auto;
	  top:100px;
	  width:0;
	  animation:sprayRight 1.8s linear;
	  opacity:0;
	  transition:all 0.3s ease;
	  z-index:99
  }
  #expand:hover .doorHoverLeft { 
	  left: -50%; 
  }
  #expand:hover .doorHoverRight { 
	  right: -50%; 
  }
  @keyframes sprayLeft{
	  0%{
		  right:0;
		  width:0
	  }
	  20%{
		  right:-50px;
		  width:50px
	  }
	  50%{
		  right:-300px;
		  width:300px
	  }
	  95%{
		  right:-750px;
		  width:750px;
		  opacity:1;
	  }
	  100%{
		  right:-750px;
		  width:750px;
		  opacity:0;
	  }
  }
  
  @keyframes sprayRight{
	  0%{
		  left:0;
		  width:0
	  }
	  20%{
		  left:-50px;
		  width:50px
	  }
	  50%{
		  left:-300px;
		  width:300px 
	  }
	  95%{
		  left:-750px;
		  width:750px;
		  opacity:1;
	  }
	  100%{
		  left:-700px;
		  width:700px;
		  opacity:0;
	  }
  }
  .footerLinks{
	  background:#1624FF;
	  position:fixed;
	  bottom:0;
	  height:70px;
	  width:100%;
  }
  .arnLink{
	  float:right;
	  text-transform:uppercase;
	  font-size:1.5em;
	  margin:15px;
	  color:#fff;
	  border-bottom:2px solid #22C6DB;
	  text-decoration: none;
  }
  .arnLink:hover{
	  text-decoration:none;
	  color:#22C6DB;
  }		
  .dialpad{
	  background:#00e4fa;
	  height:165px;
	  width:350px;
	  height:215px;
	  z-index:99;
	  position:relative;
	  margin:90px auto;
	  border-top:15px solid #00e4fa;
	  border-left:15px solid #01c2cc;
	  border-right:15px solid #00a3f2;
	  border-bottom:15px solid #01c2cc;
	  padding:20px;
  }	
  .dialInput{
	  background: rgb(72,44,255);
	  background: -moz-linear-gradient(90deg, rgba(72,44,255,1) 0%, rgba(118,42,255,1) 100%);
	  background: -webkit-linear-gradient(90deg, rgba(72,44,255,1) 0%, rgba(118,42,255,1) 100%);
	  background: linear-gradient(90deg, rgba(72,44,255,1) 0%, rgba(118,42,255,1) 100%);
	  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#482cff",endColorstr="#762aff",GradientType=1);
	  width:100%;
	  height:50px;
	  border:none;
	  font-size: 1.4em;
	  padding: 10px 5px;
	  text-align:center;
	  color:#fff;
  }	
  .dialInput::placeholder {
	color: #fff;
	opacity:1;
  }
  .dialNumbers{
	  width:calc(100% - 15px);
	  padding:15px;
  }
  .dialNumbers .digit{
	  float:left;
	  width:20%;
	  color:#00e5ff;
	  border-radius:50%;
	  height:36px;
	  width:36px;
	  padding:0;
	  margin:0 10px 10px 0;
	  background:#1739f1;
	  box-shadow:0px 2px 2px #00247a inset;
	  border:1px solid #00247a;
	  font-size: 1.5em;
	  line-height: 1.4;
	  cursor:pointer;
  }
  .distrBtn{
	  width:250px;
  }
  .or{
	  font-size:24px;
	  font-weight:bold;
	  margin:30px 0;
  }
  .registerBox{
	  height:255px;
	  margin:90px auto 20px;
  }
  .dialNumbers .digit:hover{
	  background:#f2ce62;
  }
  .backRemove{
	  position: absolute;
	  bottom: 45px;
	  right: 20px;
	  height: 35px;
	  background: #163AEF;
	  padding: 5px 13px;
	  border: 1px solid #000;
	  border-radius: 2px;
	  cursor:pointer;
  }
  .labWrapper .formulationWrapper{
	  padding-top:150px;
	  text-align:center;
	  width:600px;
	  margin:0 auto;
  }	
  .formulationWrapper .contentBox	{
	  margin:20px auto;
	  position:relative;
	  padding:20px 0 40px;
	  height:auto;
  }
  .formulationWrapper h1{
	  color:#24567B;
	  font-size:32px;
  }
  .formulationWrapper .contentBox h2{
	  font-size:32px;	
  }
  .labWrapper .instructionWrapper{
	  padding-top:150px;
	  text-align:center;
	  width:850px;
	  margin:0 auto;	
  }	
  .instructionWrapper .contentBox	{
	  margin:20px auto;
	  position:relative;
	  padding:20px 20px 40px;
	  height:auto;
	  width:100%;	
	  height:265px;
  }
  .instructionWrapper .contentBox	.letsText{
	  padding-left:40px;	
  }
  .instructionWrapper .contentBox	.letsText span{
	  float:left;
	  width:35px;
	  text-align:right;
	  margin-right: 10px;
	  margin-bottom: 1px;
	  position:absolute;
	  left:15px;
  }
  .instructionWrapper h1{
	  color:#24567B;
  
	  font-size:30px;
  }
  .instructionWrapper .contentBox h2{
	  text-align:left;
	  font-size:30px;
	  font-family:gotham-medium;
  }
  .instructionWrapper .btnCustom{ 
	  text-align:center;
	  display:block;
	  width:210px;
	  float:right;
	  font-size:30px;
	  padding:1px 15px;
	  margin-top:20px!important;
  }
  .center-outer {
	  display: table;
	  width: 100%;
	  position:absolute;
	  top:150px;
  }
  .center-inner {
	  display: table-cell;
	  vertical-align: top;
	  text-align: center;
  }
  .bubbles {
	  display: inline-block;
	  font-family: gotham-normal;
	  position: relative;	
	  height:350px;
  }
  .individual-bubble {
	  position: absolute;
	  border-radius: 100%;
	  bottom: 0;
	  background-color: #fff;
	  margin-top:200px;
	  z-index: 1;
  }
  .boxWrapper {
	  height: 312px;
	  width: 315px;
	  position: absolute;
	  margin:150px auto;
	  background:url("../img/bubble-pot.png") no-repeat  0 0;
	  border-radius:0 0 20px 20px;
	  bottom: -16px;
	  left: 0;
	  right: 0;
  }
  .boxWrapper::after{
	  background:url("../img/bubble-pot-lines.png") no-repeat  0 0;
	  content:"";
	  position: absolute; 
	  width:303px;
	  height:151px;
  }
   .box {
	  height: 246px;
	  width: 230px;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  background: #2a6ffb;
	  border-radius:0 0 40px 40px;
	  overflow: hidden;
  }
   .percent {
	  position: fixed;
	  bottom: 0;
	  z-index: 3;
	  background:#1946ad;
	  padding:30px 50px 35px;
	  width:100%;
	  color: rgba(255,255,255,0.1);
	  font-size: 110px;
	  font-weight: bold;
	  text-align: center;
	  line-height: 0.68;
	  font-family:gotham-bold;
  }
   .box .water {
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  z-index: 2;
	  width: 100%;
	  height: 300px;
	  transform: translate(0, 100%);
	  background: #F9D05D;
	  transition: all 0.9s ease-out;
	  overflow:hidden;
  }
  .water:before,
  .water:after
  {
	  content: '';
	  position: absolute;
	  width:600px;
	  height: 600px;
	  top: -120px;
	  left: 50%;	
  }
  .water:before{		
	  border-radius: 46%;
	  background: rgba(42,110,248, 1);
	  animation: animate 3s linear infinite;
  }
  .water:after{
	  border-radius: 40%;
	  background: rgba(42,110,248, .5);
	  animation: animate 3s linear infinite;
  }
  @keyframes animate{
	  0%{
		  transform: translate(-50%, -75%) rotate(0deg);	
	  }
	  100%{
		  transform: translate(-50%, -75%) rotate(360deg);		
	  }
  }
  
	  /*
   @keyframes wave-front {
	  0%{
			  transform: translate(-50%, -75%) rotate(0deg);
		  }
		  100%{
			  transform: translate(-50%, -75%) rotate(360deg);
		  }
  }
   @keyframes wave-back {
	  0%{
			  transform: translate(-50%, -75%) rotate(0deg);
		  }
		  100%{
			  transform: translate(-50%, -75%) rotate(360deg);
		  }
  }
  */
  
  @-webkit-keyframes wiggle {
	  0%   { -webkit-transform: rotate(0deg); }
	  25%  { -webkit-transform: rotate(3deg); }
	  75%  { -webkit-transform: rotate(-3deg); }
	  100% { -webkit-transform: rotate(0deg); }
  }
  @keyframes wiggle {
	  0%   { transform: rotate(0deg); }
	  25%  { transform: rotate(3deg); }
	  75%  { transform: rotate(-3deg); }
	  100% { transform: rotate(0deg); }
  }
  
  #board {
	  background: #fff;
	  overflow: hidden;
	  border:none!important;
	  position:relative;
	  z-index:1;
	  width:100%;
	  height:calc(100vh - 100px);
  }
  #board .column {
	  width: 100%;
	  position: relative;
	  height: 300px;
	  border:none!important;
	  -webkit-transition: background-color 300ms ease;
	  -moz-transition: background-color 300ms ease;
	  -ms-transition: background-color 300ms ease;
	  -o-transition: background-color 300ms ease;
	  transition: background-color 300ms ease;
  }
  #board .column:last-child {
	  border-right-color: transparent;
  }
  #board .column.over, #board .column.over:last-child {
	  border: dashed 1px #555;
	  background-color: #efefef;
  }
  #board .dragBox ul.card-list {
	  list-style-type: none;
	  margin: 0;
	  width: 1050px;
	  padding: 60px 116px;
  }
  #board .dragBox{
	  background:url('../img/tube-top-table.png') no-repeat 0 128px;
	  position:relative;
	  width:1024px;
	  margin:150PX auto;
	  z-index:33
  }
  
  #board .dragBox::after{
	  content:"";
	  background:url('../img/tube-top-overtlay.png') no-repeat 0 0;
	  position:absolute;
	  bottom:89px;
	  width:1024px;
	  height:41px;
	  left:0;
  }
  #board::before{
	  content:"";
	  background:url('../img/board-left-bg.png') no-repeat 0 0;
	  position:absolute;
	  top:0px;
	  width:1024px;
	  height:100%;
	  left:0;
	  z-index:2;
	  
	  
  }
  #board::after{
	  content:"";
	  background:url('../img/board-right-bg.png') no-repeat 0 0;
	  position:absolute;
	  top:-30px;
	  width:355px;
	  height:100%;
	  right:0;
	  z-index:2;
	  left:auto	
  }
  #board .dropBox ul.card-list {
	  list-style-type: none;
	  margin: 0;
	  width: 333px;
	  padding: 0 0 0 42px;
  }
  #board .dropBox{
	  background:url('../img/drop-box.png') no-repeat 0 50px;
	  position:relative;
	  width: 333px;
	  margin: 0 auto;
	  height: 171px;
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  z-index:43;
  }
  #board .dropBox::after{
	  content:"";
	  background:url('../img/bottom-tube-overlay.png') no-repeat 0 0;
	  position:absolute;
	  top:59px;
	  width:333px;
	  height:40px;
	  left:0;
  }
  .wave{
	  background:#f00;
	  fill:green;
  }
  
  #board .dragBox .one{
	  position:absolute;
	  left:116px;
  }
  #board .dragBox .two{
	  position:absolute;
	  left:197px;
  }
  #board .dragBox .three{
	  position:absolute;
	  left:278px;
  }
  #board .dragBox .four{
	  position:absolute;
	  left:359px;
  }
  #board .dragBox .ten{
	  position:absolute;
	  right:97px;
  }
  #board .dragBox .nine{
	  position:absolute;
	  right:178px;
  }
  #board .dragBox .eight{
	  position:absolute;
	  right:259px;
  }
  #board .dragBox .seven{
	  position:absolute;
	  right:340px;
  }
  #board .dragBox .six{
	  position:absolute;
	  right:421px;
  }
  #board .dragBox .five{
	  position:absolute;
	  right:502px;
  }
  
  #board .dropBox ul.card-list .card{
	  background: none;
	  border: none;
	  width: 36px;
	  float: left;
	  margin: 5px 15px 0 0;
	  -webkit-transition: opacity 300ms ease;
	  -moz-transition: opacity 300ms ease;
	  -ms-transition: opacity 300ms ease;
	  -o-transition: opacity 300ms ease;
	  transition: opacity 300ms ease;
  }
  
  #board .dragBox ul.card-list .card {
	  background: none;
	  border: none;
	  width: 58px;
	  float: left;
	  margin: 5px 23.2px 0 0;
	  -webkit-transition: opacity 300ms ease;
	  -moz-transition: opacity 300ms ease;
	  -ms-transition: opacity 300ms ease;
	  -o-transition: opacity 300ms ease;
	  transition: opacity 300ms ease;
  }
  
  #board ul.card-list .card.dragging {
	  opacity: 1;
  }
  #board #cardDetail {
	  position: fixed;
	  z-index: 10000;
	  -webkit-transition: all 600ms ease-in;
	  -moz-transition: all 600ms ease-in;
	  -ms-transition: all 600ms ease-in;
	  -o-transition: all 600ms ease-in;
	  transition: all 600ms ease-in;
  }
  #board #cardDetail .front,
  #board #cardDetail .back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  border-radius: 8px;
	  text-align: center;
	  -webkit-backface-visibility: hidden;
	  -moz-backface-visibility: hidden;
	  -ms-backface-visibility: hidden;
	  -o-backface-visibility: hidden;
	  backface-visibility: hidden;
	  -webkit-transition: all 600ms ease-in;
	  -moz-transition: all 600ms ease-in;
	  -ms-transition: all 600ms ease-in;
	  -o-transition: all 600ms ease-in;
	  transition: all 600ms ease-in;
  }
  #board #cardDetail .front {
	  background-color: #fff;
	  border: solid 1px #bebebe;
	  z-index: 10000;
	  -webkit-transform: rotateY(0deg);
	  -moz-transform: rotateY(0deg);
	  -ms-transform: rotateY(0deg);
	  -o-transform: rotateY(0deg);
	  transform: rotateY(0deg);
  }
  #board #cardDetail .back {
	  background-color: #68C0E8;
	  border: solid 1px #0082BE;
	  -webkit-transform: rotateY(-179deg);
	  -moz-transform: rotateY(-179deg);
	  -ms-transform: rotateY(-179deg);
	  -o-transform: rotateY(-179deg);
	  transform: rotateY(-179deg);
  }
  #board #cardDetail.flipped .front {
	  -webkit-transform: perspective(1000px) rotateY(180deg);
	  -moz-transform: perspective(1000px) rotateY(180deg);
	  -ms-transform: perspective(1000px) rotateY(180deg);
	  -o-transform: perspective(1000px) rotateY(180deg);
	  transform: perspective(1000px) rotateY(180deg);
  }
  #board #cardDetail.flipped .back {
	  z-index: 20000;
	  -webkit-transform: perspective(1000px) rotateY(0deg);
	  -moz-transform: perspective(1000px) rotateY(0deg);
	  -ms-transform: perspective(1000px) rotateY(0deg);
	  -o-transform: perspective(1000px) rotateY(0deg);
	  transform: perspective(1000px) rotateY(0deg);
  }
  #board #cardDetail .content {
	 padding: 1em;
  }
  #board #cardDetail .flip-trigger {
	  position: absolute;
	  right: 10px;
	  bottom: 10px;
	  color: #333;
  }
  #board #cardDetail .flip-trigger:active, 
  #board #cardDetail .flip-trigger:hover, 
  #board #cardDetail .flip-trigger:focus {
	  color: #0082BE;
  }
  
  
  [draggable] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	-khtml-user-drag: element;
	-webkit-user-drag: element;
  }
  .tubeImg{
	 pointer-events: none;
  }
  
  .tubeImg{
	 pointer-events: none;
  }
  
  .columnDrop{
	  background:#fff;
  }
  .wave{
	  fill:yellow
  }
  
  .footer{
	  position:fixed;
	  background:#BCBEC0;
	  border-top:20px solid #808285;
	  width:100%;
	  height:100px;
	  z-index:999;
	  bottom:0;
  }
  .footerNavBtn{
	  position:absolute;
	  border:1px solid #2463D3;
	  width:60px;
	  height:60px;
	  border-radius:50%;
	  background:#fff;
	  top:9px;
  }
  .footerNavBtn.prev{
	  left:20px;
  }
  .footerNavBtn.next{
	  right:20px;
	  color:#2463d3;
	  padding:8px 4px 7px 7px;
	  text-align:center;
	  font-size:1.6em;
  }
  .footerNavBtn.prev{
	  left:15px;
	  color:#2463d3;
	  padding:8px 7px 7px 4px;
	  text-align:center;
	  font-size:1.6em;
  }
  .footerNavBtn.prev img, .footerNavBtn.next img{
	  width:22px;
  }
  .volumeControl{
	  position:absolute;
	  right:100px;
	  top:22px;
  }
  .volumeControl a{
	  padding:0 8px
  }
  .movableHand{
	  position:absolute;
	  height:30px;
	  width:30px;
	  animation-name: hand;
	  animation-duration: 1.5s;
	  animation-iteration-count: 1;
	  left:100px;
	  top:160px;
	  z-index:45;
	  opacity:0;
  }
  .directionLine{
	  animation:lines 1.5s;
	  position:absolute;
	  top:163px;
	  left:123px;
	  z-index:-1;
	  opacity:0;
  }
  @keyframes hand {
	  0%   {left:100px; bottom:0; top:160px; opacity:1; display:block;}  
	  90%  {left:350px; top:380px; opacity:1;}
	  100% {left:350px; top:380px; opacity:0; z-index:-99;}
  }
  
  @keyframes lines{
	  0% {opacity:1; z-index:44; }
	  90% {opacity:1; z-index:44;}
	  100% {opacity:0; }
  }
  .bgTable{
	  background:url('../img/bg-line.png') repeat-x 0 50px;
	  display: block;
	  position: fixed;
	  top: 228px;
	  height: 219px;
	  width: 100%;
	  z-index: 9;
	  left: 0;
  }
  
  .tubeTitle{
	  background:#2A6B93;
	  color:#fff;
	  padding:0 30px 0 0;
	  font-size:2em;
	  position:fixed;
	  top:130px;
	  z-index:99;
	  width:auto;
	  display:block;
	  left:-1500px;
	  transition:all 0.3s ease;
  }
  .tubeTitle span{
	  font-style:italic;
	  
	  display:inline-block;
	  padding:10px 20px;
	   -ms-transform: skewX(-10deg); /* IE 9 */
	  transform: skewX(-10deg);
	  margin-left:-10px;
  }
  .card.one .tubeTitle span{
	  background:#647F00;
  }
  .card.two .tubeTitle span{
	  background:#F15A29;
  }
  .card.three .tubeTitle span{
	  background:#F7941D;
  }
  .card.four .tubeTitle span{
	  background:#D280F2;
  }
  .card.five .tubeTitle span{
	  background:#D7DF23;
  }
  .card.six .tubeTitle span{
	  background:#8DC63F;
  }
  .card.seven .tubeTitle span{
	  background:#2BB673;
  }
  .card.eight .tubeTitle span{
	  background:#2A6EF8;
  }
  .card.nine .tubeTitle span{
	  background:#5F4ED8;
  }
  .card.ten .tubeTitle span{
	  background:#92278F;
  }
  #board .dragBox .card:hover .tubeTitle{
	  top:130px;
	  left:0;
	  opacity:1;
  }
  .dropBox .tubeTitle{
	  display:none;
  }
  .labWrapper{
	  background:url('../img/lab-analysis.png') no-repeat top -50px right 150px;
	  background-size:cover;
	  height:100vh;
	  width:100%;
	  position:relative;
  }
  .eliminatedTube{
	  background:url('../img/analyser-tube-left.png') no-repeat bottom center;
	  width:460px;
	  height:484px;
	  float:left;	
	  position:absolute;
	  bottom:100px;
  }
  .eliminatedTube h3{
	  position:absolute;
	  left:0;
	  right:0;
	  top:110px;
	  text-align:center;
	  color:#25577C;
	  font-size:30px;
  }
  .eliminatedPoint{
	  border: 1px solid transparent;
	  width: 422px;
	  height: 275px;
	  margin-left: 31px;
	  margin-top: 210px;
	  border-radius: 0 0 50px 50px;
	  overflow:hidden;
  }
  .eliminatedPoint ul{
	  margin:11px 0 0 0;
	  padding:0;
  }
  .eliminatedPoint ul li{
	  list-style:none;
	  margin:0 0 -4px -5px;
	  position:relative;
  }
  .eliminatedPoint ul li h5{
	  position:absolute;
	  text-align:center;
	  left:0;
	  right:0;
	  top:18px;
	  font-family:gotham-medium;
	  color:#fff;
	  font-size:15px;
	  letter-spacing:-0.5px;
  }
  .selectedTube{
	  background:url('../img/analyser-tube-right.png') no-repeat bottom center;
	  width:483px;
	  height:632px;
	  float:right;
	  background-size:cover;
	  position:absolute;
	  bottom:100px;
	  right:15%;
  }
  
  .selectedTube h3{
	  position: absolute;
	  left: 0;
	  right: 77px;
	  top: 117px;
	  text-align: center;
	  color: #25577C;
	  font-size: 30px;
	  width: 130px;
	  margin: 0 auto;
	  letter-spacing: -1px;
  }
  .selectedPoint{
	  border: 1px solid transparent;
	  width: 414px;
	  height: 417px;
	  margin-left: -2px;
	  margin-top: 239px;
	  border-radius: 50%;
	  overflow: hidden;
  }
  .selectedPoint ul{
	  margin:134px 0 0 0;
	  padding:0;
  }
  .selectedPoint ul li{
	  list-style:none;
	  margin:0 0 -4px -5px;
	  position:relative;
  }
  .selectedPoint ul li h5{
	  position:absolute;
	  text-align:center;
	  left:0;
	  right:0;
	  top:16px;
	  font-family:gotham-normal;
	  color:#fff;
	  font-size:15px;
	  letter-spacing:-0.5px;
  }
  
  
  
  .resultTube{
	  background:url('../img/analyser-tube-result.png') no-repeat bottom center;
	  width:393px;
	  height:593px;
	  float:left;	
	  position:absolute;
	  bottom:100px;
	  margin-left:110px
  }
  .resultTube h3{
	  position:absolute;
	  left:0;
	  right:0;
	  top:185px;
	  text-align:center;
	  color:#25577C;
	  font-size:30px;
  }
  .resultPoint{
	  border: 1px solid transparent;
	  width: 328px;
	  height: 275px;
	  margin-left: 31px;
	  margin-top: 310px;
	  border-radius: 0 0 50px 50px;
	  overflow:hidden;
  
  }
  .resultPoint ul{
	  margin:52px 0 0 0;
	  padding:0;
  }
  .resultPoint ul li{
	  list-style:none;
	  padding:7px 0  ;
	  position:relative;
	  
	  
  }
  .resultPoint ul li h5{
	  position:relative;
	  text-align:center;	
	  font-family:gotham-normal;
	  color:#fff;
	  font-size:15px;
	  letter-spacing:-0.5px;
  } 
  .modal{
	  background:rgba(255,255,255,0.85)
  }
  .modalLab .modal-dialog{
	  width:570px;
  }
  .modalLab .modal-content{
	  border-radius:0;
	  border:10px solid #1B75BC;
	  background:#2A6B93;	
	  /*height:250px;*/
	  padding:0;
	  color:#fff;
	  text-align:center;
  }
  .modalLab .modal-body{
	  padding:30px;
  }
  .modalLab .modal-content h2{
	  margin-bottom:25px;
  }
  
  .btnCustom{
	  background:#0BF9F2;
	  color:#24567B;
	  font-size:28px;
	  padding:2px 15px;
	  display:inline-block;
	  text-decoration:none;
	  text-transform:uppercase;
	  box-shadow:5px 5px 0 #1e5375;
	  position:relative;
	  z-index:99;
	  font-family: gotham-bold;
	  transition:all 0.3s ease;
	  text-align:center;
	  border: none;
  }
  .btnCustom:hover, .btnCustom:focus{
	  color:#24567B;
	  text-decoration:none;
	  box-shadow:5px 5px 0 #111;
  }
  .btnSM{
	  width:120px;
  }
  .btnMD{
	  width:150px;
  }
  .btnLG{
	  width:180px;
  }
  .btnRealign {
	  position: absolute;
	  left: 0;
	  right: 0;
	  width: 170px;
	  text-align: center;
	  margin: 100px auto;
  }
  
  .lab2{
	  max-width:1100px;
	  position:fixed;
	  bottom:0;
	  margin:0 auto;
	  left:0;
	  right:0;
  }
  .labMachineWrapper{
	  position:fixed;
	  top:0;
	  margin:0 auto;
	  left:250px;
	  right:0;
	  max-width:270px;
	  animation:machine 0.8s linear;
	  animation-iteration-count:2;
	  opacity:0;
  }
  .lab2Machine{	
	  max-width:270px;
  }
  
  .drop {
	  background:url('../img/drop.png');
	  width: 9px;
	  height: 12px;
	  animation: paintDrop 1s linear ;
	  animation-iteration-count: 1;
	  opacity: 0;
	  position:absolute;
	  left:16px;	
  }
  @keyframes paintDrop {
	0% { bottom:0; opacity:1}
	100% {bottom:-130px; opacity:1}
  }
  @keyframes fall {
	0% { bottom:0; opacity:1}
	100% {bottom:-130px; opacity:1}
  }
  @keyframes machine{
	  0%{opacity:1}
	  
	  100%{opacity:1}
  } 
  .analyserScanner{
	  float:right;
	  margin-right:50px;
	  animation:analyser 4s linear;
	  animation-iteration-count:1;
	  opacity:1;
  }
  @keyframes analyser {
	0% { opacity:0;}
	40% { opacity:0;}
	45% {opacity:1}
	100% {opacity:1}
  }
  .scanBox{
	  width:200px;
	  height:180px;
	  border:10px solid #BCBEC0;
	  border-radius:5px;
	  float:left;
	  margin-right:30px;
	  margin-top:30px;
	  position:relative;
  }
  .scanBox::before{
	  background:#BCBEC0;
	  width:10px;
	  height:50px;
	  position:absolute;
	  left:0;
	  right:0;
	  top:-50px;
	  margin:0 auto;
	  content:"";
  }
  .scanningLine{
	  height: 1px;
	  width: 126px;
	  background: #85FFFF;
	  display: block;
	  position: absolute;
	  top: 30px;
	  margin: 0 auto;
	  text-align: center;
	  left: 4px;
	  right: 0;
	  animation:scanLine 1s linear infinite;
  }
  @keyframes scanLine{
	  0%{top:30px}
	  
	  50%{top:130px;}
	  
	  100%{top:30px}
  } 
  .scanBox img{
	  width:100%;
	  margin-bottom:0;
  }
  .progressBox{
	  background:#2A6B93;
	  width:200px;
	  height:180px;
	  border:10px solid #BCBEC0;
	  float:left;
	  padding:45px 0;
	  border-radius:5px;
	  margin-top:30px;
	  position:relative;
  }
  .progressBox::before{
	  background:#BCBEC0;
	  width:10px;
	  height:50px;
	  position:absolute;
	  left:0;
	  right:0;
	  top:-50px;
	  margin:0 auto;
	  content:"";
  }
  .progressBox h2{
	  font-size:1.8em;
	  color:#0BF9F2;
	  text-align:center;
	  margin-bottom:15px;
  }
  
  .progress{
	  background:url("../img/progress-bar-bg.png") repeat-x 0 0;	
	  border-radius:0;	
  }
  .progress-bar-striped{
	  background:url("../img/progress-bar-stripped.png") repeat-x 0 0;
	  animation:progressBarLoader 4s linear infinite;
	  animation-iteration-count:1;
  }
  @keyframes progressBarLoader{
	  0%{width:0%}	
	  30%{width:10%;}
	  100%{width:100%}
  } 
  
  .analyseCompleteWrapper{
	  background:url("../img/bg-texture.jpg") repeat right 0;
	  height:100vh;
	  width:100%;
  }
  .analyserScannerBig{
	  width:835px;
	  margin:0 auto;
  }
  .analyserScannerBig .scanBox{
	  width:380px;
	  height:344px;
	  border:20px solid #BCBEC0;
	  border-radius:5px;
	  float:left;
	  margin:-1px 30px 0 0;
	  position:relative;
  }
  .analyserScannerBig .scanBox::before, .analyserScannerBig .progressBox::before{
	  display:none;
  }
  .analyserScannerBig .progressBox{
	  width:380px;
	  height:344px;
	  border:20px solid #BCBEC0;
	  border-radius:5px;
	  float:left;
	  margin:-1px 0  0 45px;
	  position:relative;
  }
  .analyserScannerBig .progressBox h2{
	  font-size:40px;
	  margin-top:50px;
	  font-weight:bold;
  }
  .completeBox{
	  animation:complete 2s linear;
	  animation-iteration-count:1;
	  visibility:hidden;
  }
  @keyframes complete{
	  0%{visibility:visible}	
	  90%{visibility:visible}
	  100%{visibility:hidden}
  }
  .percentBox{
	  animation:percent 5s linear;
	  animation-iteration-count:1;
	  visibility:hidden;
	  opacity:0;
	  position:absolute;
	  top:20px;
	  bottom:0;
	  text-align:center;
	  left:0;
	  right:0;
	  color:#ffa701;
  }
  .percentBox h2{
	  font-size:86px!important;
	  color:#ffa701;
	  line-height:1;
  }
  .percentBox h2 span{
	  font-size:63px;
	  display:block;
  }
  @keyframes percent{
	  0%{visibility:hidden; opacity:0;}	
	  45%{visibility:visible; opacity:0;}
	  48%{visibility:visible; opacity:1;}
	  100%{visibility:visible; opacity:1;}
  }
  
  .contentBoxWrapper{
	  position:relative;
	  height: calc(100vh - 100px);
	  width: 100%;
	  z-index:99999;
  }
  .contentBox{
	  width:550px;
	  height:270px;
	  border-radius: 0;
	  border: 10px solid #1B75BC;
	  background: #2A6B93;
	  padding: 50px;
	  color:#fff;
	  text-align:center;
	  position:absolute;
	  left:0;
	  right:0;
	  top:0;
	  bottom:0;
	  margin:18% auto;
  }
  .contentBox .letsText{
	  font-size:40px;
  }
  .resultTubeSm{
	  position:absolute;
	  right:150px;
	  bottom:0;	
  }
  
  .liquidTubeWrapper{
	  background:#BCBEC0;
	  padding:20px;
	  width:730px;
	  height:560px;
	  position:relative;
	  top:70px;
	  margin:0 auto;
  }
  .liquidTubeWrapper::before{
	  position:absolute;
	  content:"";
	  background:#BCBEC0;
	  height:70px;
	  width:20px;
	  top:-70px;
	  left:0;
	  right:0;
	  margin:0 auto;
  }
  .liquidTubeInner{
	  width:100%;
	  height:520px;
	  background:#fff;
	  padding:27px;
	  
  }
  .tube{
	  background:url('../img/progress-tube.png') no-repeat right top 40px;
	  width:225px;
	  height:495px;
	  margin:0 auto;
	  position:relative;
  }
  .tubeliquid{
	  height: 320px;
	  background: #E2B74B;
	  width: 50px;
	  border-radius: 0 0 30px 30px;
	  position: absolute;
	  right: 30px;
	  box-shadow: 0 10px 0px #BF963A;
	  bottom: 63px;
	  z-index:1;
	  animation:tubeLiquid 4s linear;
	  animation-iteration-count:1;
	  
   
  }
  .tubeStrip{
	  position: absolute;
	  right: 2px;
	  top: 40px;
	  z-index: 2;
  }
  .tubeStand{
	  position:relative;
	  z-index:5
  }
  .startingRange{
	  position:absolute;
	  bottom:80px;
	  width:100px;
	  text-align:center;
	  display:inline-block;
	  font-weight:bold;
	  animation:startingRange 3s linear;
	  animation-iteration-count:1;
	  opacity:1
  }
  .startingRange span{
	  display:block;
  }
  .endRange{
	  position:absolute;
	  top:100px;
	  width:100px;
	  text-align:center;
	  display:inline-block;
	  font-weight:bold;
	  animation:endRange 6s linear;
	  animation-iteration-count:1;
	  opacity:1
  }
  .endRange span{
	  display:block;
  }
  
  @keyframes tubeLiquid{
	  0%{
		  height:0;
	  }
	  30%{
		  height:0;
	  }
	  100%{
		  height:320px;
	  }
  }
  
  @keyframes startingRange{
	  0%{
		  opacity:0;
	  }
	  20%{
		  opacity:0;
	  }
	  60%{
		  opacity:1
	  }
	  100%{
		  opacity:1;
	  }
  }
  
  @keyframes endRange{
	  0%{
		  opacity:0;
	  }
	  70%{
		  opacity:0;
	  }
	  75%{
		  opacity:1
	  }
	  100%{
		  opacity:1;
	  }
  }
  
  .modalLab.modalPortfolio .modal-body{
	  padding:50px 30px
  }
  .modalLab.modalPortfolio .modal-body h2{
	  margin-bottom:50px;
  }
  .modal-backdrop{
	  background:#fff;
  }
  .feedbackBox{
	  height:380px;
	  margin:12% auto;
	  padding:30px 30px;
	  font-weight:bold;
	  border-radius:10px;
	  border:15px solid #BCBEC0;
  }
  .feedbackBox .rate{
	  margin-bottom:30px;
  }
  .feedbackBox textarea{
	  border:none;
  }
  .feedbackBox textarea::placeholder{
	  color:#c5c5c5;
  }
  .recommendBox{
	  height:380px;
	  margin:12% auto;
	  padding:50px 20px;
	  font-weight:bold;
	  border-radius:10px;
	  border:15px solid #BCBEC0;
  }
  .recommendBox h1{
	  margin-bottom:50px;
	  font-size:36px;	
  }
  .whiteoverlay{
	  background:rgba(255,255,255,0.85);
	  height:100vh;
	  width:100%;
	  position:fixed;
	  left:0;
	  right:0;
	  top:0;
	  bottom:0;
	  z-index:9999
  }
  .ratingWrapper{
	  background:#2A6B93;
	  height:100vh;
	  top:0;
	  bottom:0;
	  width:100%;
	  text-align:center;
	  color:#fff;
	  padding:10% 0 0 0;
	  
  }
  .ratingWrapper h1{
	  width:650px;
	  font-size:36px;
	  text-align:center;
	  margin:0 auto 25px;
  }
  .socialMediaShare{
	  margin-bottom:30px;
  }
  .socialMediaShare img{
	  margin:10px;
	  transition:all 0.8s ease;
  }
  .socialMediaShare img:hover{
	  transform:rotate(360deg);
  }
  .portfolioView table {
	  color:#fff;
	  margin-bottom:0;
  }
  .portfolioView table th{
	  color:#0BF9F2;
	  padding:10px 0;
	  border-top:none;
	  font-family:gotham-medium
  }
  .portfolioView table td{
	  border-top:1px solid #fff;
	  padding:10px 0;
  }
  .portfolioView .modal-body{
	  overflow:auto;
	  max-height:400px;
	  padding:10px 30px 30px;
  }
  
  .modalPortfolioView.modalLab .modal-dialog {
	width: 670px;
  }
  .modalPortfolioView .portfolioView button{
	  color:#fff;
	  opacity:1;
  }
  .modalPortfolioView .portfolioView button span{
	  text-align:right;
	  display:block;
	  margin-right:2px;
  }
  
  #review {
	  margin-bottom:50px;
  }
  #review i{
	  font-size:3em;
  }
  
  .rate {
	  float: none;
	  height: 46px;
	  padding: 0 10px;
	  width:330px;
	  margin:0 auto;	
  }
  .rate:not(:checked) > input {
	  position:absolute;
	  top:-9999px;
  }
  .rate:not(:checked) > label {
	  float:right;
	  width:1em;
	  overflow:hidden;
	  white-space:nowrap;
	  cursor:pointer;
	  font-size:60px;
	  color:#fff;
	  line-height:0.8;
  }
  .rate:not(:checked) > label:before {
	  content: '★ ';
  }
  .rate > input:checked ~ label {
	  color: #F9D05D;    
  }
  .rate:not(:checked) > label:hover,
  .rate:not(:checked) > label:hover ~ label {
	  color: #F9D05D;  
  }
  .rate > input:checked + label:hover,
  .rate > input:checked + label:hover ~ label,
  .rate > input:checked ~ label:hover,
  .rate > input:checked ~ label:hover ~ label,
  .rate > label:hover ~ input:checked ~ label {
	  color: #F9D05D;
  }
  .thankyouBtn{
	  width:150px;
	  margin:0 15px;
  }
  .shareWrapper .contentBox {
	  width: 800px;
	  padding:20px;
	  height:500px;
  }
  .shareWrapper .resultTubeSm {
	position: absolute;
	right: 20px;
	bottom: 0;
  }
  .shareWrapper .recommendBox h1{
	  margin-bottom:30px;
  }
  
  .welcomeWrapper{
	  background:#1B4DBC;
	  height:100vh;
	  width:100%;
	  position:fixed;
  }
  .particleBG{
	  margin:0 auto;
	  display:block;
	  position:absolute;
	  left:0;
	  right:0;
	  top:0;	
	  transition:all 0.8s ease;
	  animation:particle 5s linear;
	  animation-iteration-count:infinite;
  }
  .welcomeContent{
	  color:#fff;
	  text-align:center;
	  margin-top:180px;
  }
  .welcomeContent h1{
	  font-size:70px;
  }
  .welcomeContent h2{
	  font-size:40px;
	  font-weight:300;
  }
  @keyframes particle{
	  0%{
		  transform:scale(0.6);		
	  }
	  100%{
		  transform:scale(2)
	  }
  }
  
  .feedBackWrapper{
	  background:#2A6B93;
	  top:0;
	  bottom:0;
	  width:100%;
	  text-align:left;
	  color:#fff;
	  padding:30px 0 30px 0;
	  position:relative;
	  background-attachment:fixed;
	  min-height:100vh;
  }
  .feedBackWrapper h1{
	  margin-bottom:50px;
  }
  .feedBackWrapper .form-group{
	  margin-bottom:40px;
	  margin-left:15px;
  }
  .feedBackWrapper textarea{
	  margin-left:20px;
	  resize:none;
	  width:60%;
	  height:100px;
	  border:none;
	  background:#789ab2;
	  border-radius:5px;
	  margin-top:10px;
	  color: #fff;
	  padding: 15px;
	  font-family:gotham-medium;
  }
  
  .feedbackBtnHolder{
	  width:60%;
	  margin-left:40px;
	  text-align:center;
  }
  .custom-control-label::before {
	top: -5px;
	left: -40px;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border: 5px solid #0BF9F2;
	border-radius:0!important;
  }
  
  .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
	background-color: #fff;
	border: 5px solid #0BF9F2;
  }
  .custom-radio .custom-control-label:hover.custom-control-label::before {
	box-shadow: 0px 2px 5px rgba(0, 117, 201, 0.6);
  }
  .custom-radio .custom-control-label::after {
	top: 0.4rem;
	left: -1.25rem;
	width: 1rem;
	height: 1rem;
  }
  .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
	background-image: none;
	background-color: #007bff;
	border-radius: 50%;
	border: 5px solid #0BF9F2;
  }
  .custom-radio .custom-control-input:disabled ~ .custom-control-label::before {
	background-color: #e9ecef;
	border: 5px solid #0BF9F2;
  }
  .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
	background-color: #e9ecef;
  }
  .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::after {
	background-color: #9ca0b1;
	background-image: none;
	border-radius: 50%;
	border: 5px solid #0BF9F2;
  }
  
  .custom-control-label {
	margin-bottom: 0.5rem;
	padding-left: 20px;
	font-size:20px;
	font-family:gotham-medium;
  }
  
  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
	background-color: #fff;
	border: 5px solid #0BF9F2;
  }
  .custom-checkbox .custom-control-label:hover.custom-control-label::before {
	box-shadow: 0px 2px 5px rgba(0, 117, 201, 0.6);
  }
  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
	background: url("../img/check.png");
	background-size:cover;
  }
  .custom-checkbox .custom-control-label::after {
	  top: 1px;
	  left: -32px;
	  width: 23px;
	  height: 25px;
  }
  
  @media (min-width: 1421px) and (max-width:1500px) { 
	  #board .dragBox{
		  margin:125px auto;
	  }
	  .bgTable{
		  top:203px;
	  }
	  .selectedTube, .resultTube{
		  transform: scale(0.8);
		  bottom:36px;
	  }
	  .eliminatedTube{
		  transform: scale(0.8);
		  bottom:52px;
	  }
	  .liquidTubeWrapper{
		  top: 50px;
		  margin: 0 auto;
		  transform: scale(0.95);
	  }
	  .center-outer{
		  bottom: 100px;
		  top: auto;
	  }
	  .bubbles{
		  height: 241px;
		  bottom: 158px;
	  }
  }
  @media (min-width: 1351px) and (max-width:1420px) { 
	  .doorBox{
		  height:480px;
		  margin:50px auto;
	  }
	  .dialpad{
		  margin:50px auto;
	  }
	  #board .dragBox{
		  margin:65px auto;
	  }
	  .bgTable{
		  top:143px;
	  }
	  .labMachineWrapper{
		  transform: scale(0.85);
		  top:-55px;
		  right:20px;
	  }
	  .selectedTube, .resultTube{
		  transform: scale(0.8);
		  bottom:36px;
	  }
	  .eliminatedTube{
		  transform: scale(0.8);
		  bottom:52px;
	  }
	  .liquidTubeWrapper{
		  top: -21px;
		  margin: 0 auto;
		  transform: scale(0.8);
	  }
	  .center-outer{
		  bottom: 100px;
		  top: auto;
	  }
	  .bubbles{
		  height: 241px;
		  bottom: 158px;
	  }
  }
  
  /* -- Extra large devices (large desktops, 1200px and up)--*/
  @media (min-width: 1200px) and (max-width:1350px) { 
		  
	  .tree{
		  bottom:-80px;
	  }
	  .doorBox{
		  border-width:40px;
		  height:530px;
		  margin:36px auto;
	  }
	  .bgTable{
		  top:178px;
	  }
	  #board .dragBox{
		  margin:100px auto;
	  }
	  .selectedTube, .resultTube{
		  transform: scale(0.8);
		  bottom:36px;
	  }
	  .eliminatedTube{
		  transform: scale(0.8);
		  bottom:52px;
	  }
	  .resultPoint ul li h5 {
		  font-size: 19px!important; 
	  }
	  .btnCustom{
		  padding:3px 15px;
	  }
	  .contentBox .letsText{
		  font-size:36px;
	  }
	  .recommendBox{
		  margin:8% auto;
	  }
	  .bubbles{
		  height:180px;
	  }
	  .center-outer{
		  top:250px;
	  }
	  .labMachineWrapper{
		  transform: scale(0.85);
		  top:-55px;
		  right:20px;
	  }
	  .shareWrapper .contentBox{
		  height:440px;
		  padding:30px;
	  }
	  .labWrapper .formulationWrapper{
		  padding-top:100px;
	  }
	  .recommendBox h1{
		  font-size: 32px;
	  }
	  .liquidTubeWrapper{
		  transform:scale(0.8);
		  top:-1px;
	  }
	  .labWrapper .formulationWrapper {
		  padding-top: 100px;
	  }
  }
  @media (min-width: 992px) and (max-width:1199px) { 
	   .selectedTube, .resultTube{
		  transform: scale(0.8);
		  bottom:36px;
	  }
	  .eliminatedTube{
		  transform: scale(0.8);
		  bottom:50px;
	  }
	  .selectedTube{
		  right:5%;
	  }
	  .resultTubeSm{
		  right:50px;
	  }
	  .shareWrapper .resultTubeSm {
		  position: absolute;
		  right: -40px;
		  bottom: 0;		
	  }
	  .doorBox{
		  height:550px;
		  margin:90px auto;
	  }
	  .dialpad{
		  margin:70px auto;
	  }
	  
	  #board .dragBox{
		  margin:65px auto;
	  }
	  .bgTable{
		  top:143px;
	  }
	  .instructionWrapper .contentBox{
		  height:230px;
	  }
	  .instructionWrapper .btnCustom{
		  width:auto;
	  }
	  .labWrapper .formulationWrapper, .labWrapper .instructionWrapper {
		  padding-top: 70px;
	  }
	  .formulationWrapper h1, .instructionWrapper h1, .recommendBox h1 {
		  font-size: 28px;
	  }
	  .formulationWrapper .contentBox h2, .instructionWrapper .contentBox h2 {
		font-size: 24px;
	  }
	  .contentBox .letsText {
		  font-size: 32px;
	  }
	  .contentBox{
		  height:250px;
	  }
	  .btnCustom, .instructionWrapper .btnCustom{
		  font-size:24px;
		  padding:5px 15px;
		  line-height:1.3;
	  }
	  .btnRealign{
		  margin:30px auto;
	  }
	  .selectedPoint ul li h5{
		  font-family:gotham-normal
	  }
	  .selectedPoint ul li h5, .resultPoint ul li h5{
		  font-size:19px;
	  }
	  .liquidTubeWrapper{
		  top: -21px;
		  margin: 0 auto;
		  transform: scale(0.75);
	  }
	  .shareWrapper .contentBox{
		  height:390px;
	  }
	  .center-outer{
		  bottom: 100px;
		  top: auto;
	  }
	  .bubbles{
		  height: 241px;
		  bottom: 128px;
	  }
	  .percent{
		  font-size:80px;
		  line-height:0.6;
	  }
	  .boxWrapper{
		  bottom:-43px;
	  }
	  h1{
		  font-size:28px;
	  }
	  h2{
		  font-size:24px;
	  }
	  .tree{
		  bottom:-80px;
	  }
	  .lab2{
		  max-width:100%;
	  }	
	  .lab2Machine {
		  display:block;
		  width: 180px;
	  }
	  .labMachineWrapper {
		position: fixed;
		top: 0;
		margin: 0 auto;
		left: 0;
		right: 0;
		max-width:38px;
	  }
  }
  @media (min-width: 768px) and (max-width:991px) { 
	  
	  .movableHand{
		  left:0;
	  }
	  @keyframes hand {
		  0%   {left:0; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:170px; top:340px; opacity:1;}
		  100% {left:170px; top:340px; opacity:0; z-index:-99;}
	  }
  
	  .bgTable{
		  background:url('../img/bg-line-sm.png') repeat-x 0 50px;
		  display: block;
		  position: fixed;
		  top: 228px;
		  height: 219px;
		  width: 100%;
		  z-index: 9;
		  left: 0;
	  }
	  .particleBG{
		  width:100%;
	  }
	  .welcomeContent{
		  margin-top:120px;
	  }
	  .welcomeContent h1 {
		  font-size: 59px;
	  }
	  .welcomeContent h2 {
		  font-size: 36px;
	  }
	  .labWrapper {
		  background: url('../img/lab-analysis-sm.png') no-repeat center center;    
		  background-size: contain;
	  }
	  .labWrapper .instructionWrapper{
		  width:100%;
	  }
	  
	  .doorBox{
		  height: 440px;
		  margin: 50px auto;
		  width:700px;
		  border-width:30px;
		  
	  }
	  .dialpad {
		  margin: 30px auto;
	  }
	  .doorHoverRight, .doorHoverLeft{
		  top:-50px;
	  }
	  #board{
		  height: calc(100vh - 70px);
	  }
	  #board .dragBox{
		  background:url('../img/tube-top-table-sm.png') no-repeat 0 128px;
		  position:absolute;
		  width:700px;
		  margin:150PX auto;
		  z-index:33;
		  left:0;
		  right:0;
		  bottom:150px;
	  }
  
	  #board .dragBox::after{
		  content:"";
		  background:url('../img/tube-top-overtlay-sm.png') no-repeat 0 0;
		  position:absolute;
		  bottom:94px;
		  width:700px;
		  height:41px;
		  left:0;
	  }
	  .tubeImg {
		  pointer-events: none;
		  width: 51px;
	  }
	  #board .dragBox .one {
		  position: absolute;
		  left: 4px;
	  }
	  #board .dragBox .two {
		  position: absolute;
		  left: 76px;
	  }
	  #board .dragBox .three {
		  position: absolute;
		  left: 147px;
	  }
	  #board .dragBox .four {
		  position: absolute;
		  left: 218px;
	  }
	  #board .dragBox .five {
		  position: absolute;
		  left: 289px;
	  }
	  #board .dragBox .six {
		  position: absolute;
		  left: 360px;
	  }
	  #board .dragBox .seven {
		  position: absolute;
		  left: 431px;
	  }
	  #board .dragBox .eight {
		  position: absolute;
		  left: 501px;
	  }
	  #board .dragBox .nine {
		  position: absolute;
		  left: 573px;
	  }
	  #board .dragBox .ten {
		  position: absolute;
		  left: 644px;
	  }
	  #board .dropBox .tubeImg{
		  width:36px;
	  }		
	  #board .dragBox{
		  margin:20px auto;
	  }
	  #board .dropBox{
		  transform:scale(0.75);
		  bottom:-21px;
	  }
	  
	  .#board .dragBox::before{
		  background:url('../img/bg-line.png') repeat-x 0 50px;
		  display: block;
		  position: fixed;
		  top: 228px;
		  height: 219px;
		  width: 100%;
		  z-index: 9;
		  left: 0;
	  }
  
	  .tubeTitle{
		  background:#2A6B93;
		  color:#fff;
		  padding:0 30px 0 0;
		  font-size:1.6em;
		  position:fixed;
		  top:0;
		  z-index:99;
		  width:auto;
		  display:block;
		  left:-1500px;
		  transition:all 0.3s ease;
	  }
	  .tubeTitle span{
		  font-style:italic;
		  
		  display:inline-block;
		  padding:8px 15px;
		   -ms-transform: skewX(-10deg); /* IE 9 */
		  transform: skewX(-10deg);
		  margin-left:-10px;
	  }
	  #board .dragBox .card:hover .tubeTitle{
		  top:0;
		  left:0;
		  opacity:1;
	  }
			  
	  .footerNavBtn.next{
		  padding:2px 4px 7px 7px;
		  font-size:1.4em;
	  }
	  .footerNavBtn.prev{
		  padding:2px 7px 7px 4px;
		  font-size:1.4em;
	  }
	  .footerNavBtn {
		  width: 40px;
		  height: 40px;
	  }
	  .footerNavBtn.prev img, .footerNavBtn.next img {
		width: 19px;
	  }
	  .footer{
		  height:70px;
		  border-width:10px;
	  }
	  .volumeControl{
		  top:13px;
	  }
	  .directionLine {
			animation: lines 1.5s;
			position: absolute;
			top: 163px;
			left: 6px;
			z-index: -1;
			opacity: 0;
	  }
	  .percent{
		  font-size:80px;
		  padding:20px;
	  }
	  .or {
		  font-size: 24px;
		  font-weight: bold;
		  margin: 10px 0;
	  }
	  .selectedTube, .resultTube{
		  transform: scale(0.7);
		  bottom: -23px;
	  }
	  .eliminatedTube{
		  transform: scale(0.7);
		  bottom: -3px;
		  left: -40px;
	  }
	  .selectedTube{
		  right:-30px;
	  }
	  .resultTubeSm{
		  right:50px;
	  }
	  .shareWrapper .resultTubeSm {
		  position: absolute;
		  right: 0;
		  bottom: 0;		
	  }
	  
	  .formulationWrapper .contentBox {
		  margin: 20px auto;
		  padding: 15px 0 25px;
		  height: auto;
		  max-width:350px;
	  }
	  .labWrapper  .container{
		  max-width:100%;
		  
	  }
	  .labWrapper .formulationWrapper{
		  width:100%;
	  }
	  
	  .bgTable{
		  top:148px;
	  }
	  
	  .instructionWrapper .contentBox{
		  height:230px;
	  }
	  .instructionWrapper .btnCustom{
		  width:auto;
	  }
	  .labWrapper .formulationWrapper, .labWrapper .instructionWrapper {
		  padding-top: 70px;
	  }
	  .formulationWrapper h1, .instructionWrapper h1, .recommendBox h1 {
		  font-size: 28px;
	  }
	  .formulationWrapper .contentBox h2, .instructionWrapper .contentBox h2 {
		font-size: 24px;
	  }
	  .contentBox .letsText {
		  font-size: 32px;
	  }
	  .contentBox{
		  height:250px;
	  }
	  .btnCustom, .instructionWrapper .btnCustom{
		  font-size:24px;
		  padding:5px 15px;
		  line-height:1.3;
	  }
	  .btnRealign{
		  margin:30px auto;
	  }
	  .selectedPoint ul li h5{
		  font-family:gotham-normal
	  }
	  .selectedPoint ul li h5, .resultPoint ul li h5, .eliminatedPoint ul li h5{
		  font-size:16px;
	  }
	  
	  .liquidTubeWrapper{
		  top: -21px;
		  margin: 0 auto;
		  transform: scale(0.75);
	  }
	  .shareWrapper .contentBox{
		  height:390px;
	  }
	  .center-outer{
		  bottom: 100px;
		  top: auto;
	  }
	  .bubbles{
		  height: 241px;
		  bottom: 128px;
	  }
	  .percent{
		  font-size:80px;
		  line-height:0.6;
	  }
	  .boxWrapper{
		  bottom:-69px;
	  }
	  h1{
		  font-size:28px;
	  }
	  h2{
		  font-size:24px;
	  }
	  .tree{
		  bottom:-80px;
	  }
	  .lab2{
		  max-width:100%;
	  }
	  .lab2Machine {
		max-width: 177px;
	  }
	  .analyserScanner{
		  display:flex;
		  justify-content:center;
		  float:none;
		  margin-right:0;
	  }
	  .progressBox{
		  padding:25px 0;
	  }
	  .boxHolder{
		  width:300px;
	  }
	  .analyserScannerBig .scanBox {
		  width: 250px;
		  height: 225px;
		  border-width:10px;
		  margin:-1px 0 0 25px;
	  }
	  .analyserScannerBig{
		  width:600px;
	  }	
	  .analyserScannerBig .progressBox{
		  width: 250px;
		  height: 225px;
		  border-width:10px;
		  margin:-1px 0 0 45px;
	  }
	  .analyserScannerBig .progressBox h2 {
		  font-size: 40px;
		  margin-top: 20px;
	  }
	  .analyserScannerBig .progressBox .completeBox img{
		  width:90%;
	  }
	  .percentBox h2 {
		  font-size: 80px !important;
		  color: #ffa701;
	  }
	  .percentBox h2 span {
		  font-size: 45px;
		  display: block;
	  }
	  .resultTubeSm {
		  position: absolute;
		  right: 0;
		  bottom: 0;
		  width: 150px;
		  top: auto;
	  }
	  .recommendBox{
		  margin:8% auto;
	  }
	  .shareWrapper .contentBox{
		  width:600px;
		  height:420px;
	  }
	  .rate{
		  width:270px;
	  }
	  .rate:not(:checked) > label{
		  font-size:50px;
	  }
	  .resultTube{
		  margin-left:0;
	  }
	  .resultPoint {
		  border: 1px solid transparent;
		  width: 394px;
		  height: 275px;
		  margin-left: 0;
		  margin-top: 310px;
		  border-radius: 0 0 36px 35px;
		  overflow: hidden;
		  text-align: center;
	  }
	  .feedbackBox{
		  height:320px;
	  }
  }
  
  @media (min-width: 300px) and (max-width:339.98px) { 
	  #board .dragBox, #board .dropBox {
		  transform: scale(0.45)!important;
	  }
	  @keyframes hand {
		  0%   {left:0px; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:150px; top:380px; opacity:1;}
		  100% {left:150px; top:380px; opacity:0; z-index:-99;}
	  }
	  .directionLine{
		  left:0;
	  }
	  #board .dropBox {
		  top:300px
	  }
  }
  @media (min-width: 340px) and (max-width:359.98px) { 
	  #board .dragBox, #board .dropBox {
		  transform: scale(0.45)!important;
	  }
	  @keyframes hand {
		  0%   {left:0px; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:150px; top:380px; opacity:1;}
		  100% {left:150px; top:380px; opacity:0; z-index:-99;}
	  }
	  .directionLine{
		  left:0;
	  }
	  #board .dropBox {
		  top:300px
	  }
  }
  @media (min-width: 360px) and (max-width:379.98px) { 
	  #board .dragBox, #board .dropBox {
		  transform: scale(0.5)!important;
	  }
	  @keyframes hand {
		  0%   {left:0px; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:150px; top:380px; opacity:1;}
		  100% {left:150px; top:380px; opacity:0; z-index:-99;}
	  }
	  .directionLine{
		  left:0;
	  }
	  #board .dropBox {
		  top:310px!important
	  }
  }
  @media (min-width: 380px) and (max-width:399.98px) { 
	  #board .dragBox, #board .dropBox {
		  transform: scale(0.55)!important;
	  }
	  @keyframes hand {
		  0%   {left:0px; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:150px; top:380px; opacity:1;}
		  100% {left:150px; top:380px; opacity:0; z-index:-99;}
	  }
	  .directionLine{
		  left:0;
	  }
	  #board .dropBox {
		  top:320px!important
	  }
  }
  @media (min-width: 400px) and (max-width:419.98px) { 
	  #board .dragBox, #board .dropBox {
		  transform: scale(0.58)!important;
	  }
	  @keyframes hand {
		  0%   {left:0px; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:150px; top:380px; opacity:1;}
		  100% {left:150px; top:380px; opacity:0; z-index:-99;}
	  }
	  .directionLine{
		  left:0;
	  }
	  #board .dropBox {
		  top:340px!important
	  }
  }
  @media (min-width: 420px) and (max-width:439.98px) { 
	  #board .dragBox, #board .dropBox {
		  transform: scale(0.6)!important;
	  }
	  @keyframes hand {
		  0%   {left:0px; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:150px; top:380px; opacity:1;}
		  100% {left:150px; top:380px; opacity:0; z-index:-99;}
	  }
	  .directionLine{
		  left:0;
	  }
	  #board .dropBox {
		  top:350px!important
	  }
  }
  @media (min-width: 440px) and (max-width:479.98px) { 
	  #board .dragBox, #board .dropBox {
		  transform: scale(0.63)!important;
	  }
	  @keyframes hand {
		  0%   {left:0px; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:150px; top:380px; opacity:1;}
		  100% {left:150px; top:380px; opacity:0; z-index:-99;}
	  }
	  .directionLine{
		  left:0;
	  }
	  #board .dropBox {
		  top:360px!important
	  }
  }
  @media (min-width: 480px) and (max-width:499.98px) { 
	  #board .dragBox, #board .dropBox {
		  transform: scale(0.68)!important;
	  }
	  @keyframes hand {
		  0%   {left:0px; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:150px; top:380px; opacity:1;}
		  100% {left:150px; top:380px; opacity:0; z-index:-99;}
	  }
	  .directionLine{
		  left:0;
	  }
	  #board .dropBox {
		  top:370px!important
	  }
  }
  @media (min-width: 500px) and (max-width:539.98px) { 
	  #board .dragBox, #board .dropBox {
		  transform: scale(0.73)!important;
	  }
	  @keyframes hand {
		  0%   {left:0px; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:150px; top:380px; opacity:1;}
		  100% {left:150px; top:380px; opacity:0; z-index:-99;}
	  }
	  .directionLine{
		  left:0;
	  }
	  #board .dropBox {
		  top:380px!important
	  }
  }
  @media (min-width: 540px) and (max-width:579.98px) { 
	  #board .dragBox, #board .dropBox {
		  transform: scale(0.77)!important;
	  }
	  @keyframes hand {
		  0%   {left:0px; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:150px; top:380px; opacity:1;}
		  100% {left:150px; top:380px; opacity:0; z-index:-99;}
	  }
	  .directionLine{
		  left:0;
	  }
	  #board .dropBox {
		  top:390px!important
	  }
  }
  @media (min-width: 580px) and (max-width:767.98px) { 
	  #board .dragBox, #board .dropBox {
		  transform: scale(0.8)!important;
	  }
	  @keyframes hand {
		  0%   {left:0px; bottom:0; top:160px; opacity:1; display:block;}  
		  90%  {left:150px; top:380px; opacity:1;}
		  100% {left:150px; top:380px; opacity:0; z-index:-99;}
	  }
	  .directionLine{
		  left:0;
	  }
	  #board .dropBox {
		  top:404px!important
	  }
  }
  @media screen and (max-width: 767.99px){
	  .bgTable{
		  display:none;
	  }
	  #board::before {
		width: 805px;	 
		background-size: contain;
	  }
	  #board::after {
		width: 205px;	 
		background-size: contain;
		top:0;
	  }
	  #board {
		  height: calc(100vh - 52px);
		  position:relative;
		  display:flex;
		  justify-content:center;
		  flex-wrap:wrap;
	  }
	  #board .dropBox {
		  background: url('../img/drop-box.png') no-repeat 0 50px;
		  position: absolute;
		  width: 333px;
		  margin: 0 auto;
		  height: 171px;
		  bottom: -36px;
		  left: 0;
		  right: 0;
		  z-index: 43;
		  top: 300px;
		  transform: scale(0.4);
	  }
	  #board .dragBox {
		  background: url('../img/tube-top-table-sm.png') no-repeat 0 128px!important;
		  margin: 100px auto;
		  z-index: 33;
		  transform: scale(0.45);
		  float: left;
		  position: relative;
		  left: 0;
		  right: 0;
		  width: 700px!important;
		  top: 0;
	  }
	  #board .dragBox ul.card-list .card{
		  width:51px;
	  }
	  .tubeTitle{
		  top:-30px;
		  left:-1500px;
		  position:fixed;
	  }
	  #board .dragBox .card:hover .tubeTitle{
		  top:-30px;
		  left:0;
		  opacity:1;
		  position:fixed;
		  font-size:1.5em;
	  }
	  #board .dragBox::after {
		  content: "";
		  background: url('../img/tube-top-overtlay-sm.png') no-repeat 0 0!important;
		  background-size: auto;
		  position: absolute;
		  bottom: 100px;
		  width: 700px!important;
		  height: 36px;
		  left: 0;
		  background-size: cover;
	  }
	  #board .dragBox .one {
		  position: absolute;
		  left: 4px;
	  }
	  #board .dragBox .two {
		  position: absolute;
		  left: 76px;
	  }
	  #board .dragBox .three {
		  position: absolute;
		  left: 147px;
	  }
	  #board .dragBox .four {
		  position: absolute;
		  left: 218px;
	  }
	  #board .dragBox .five {
		  position: absolute;
		  left: 289px;
	  }
	  #board .dragBox .six {
		  position: absolute;
		  left: 360px;
	  }
	  #board .dragBox .seven {
		  position: absolute;
		  left: 431px;
	  }
	  #board .dragBox .eight {
		  position: absolute;
		  left: 501px;
	  }
	  #board .dragBox .nine {
		  position: absolute;
		  left: 573px;
	  }
	  #board .dragBox .ten {
		  position: absolute;
		  left: 644px;
	  }
	  #board .dropBox .tubeImg{
		  width:36px;
	  }		
  
	  #board .dragBox ul.card-list {
		  padding: 48px 116px;
	  }
	  .movableHand{
		  left:-50px;
	  }
	  .directionLine{
		  left:0;
	  }
	  
  
	  
	  
	  
	  .welcomeWrapper{
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  padding:10px;
	  }
	  .contentBoxWrapper {
		  height:100vh;
		  display: flex;
		  align-items: center;
		  justify-content: center;
	  }
	  .modalLab.modalPortfolio .modal-body{
		  padding:20px;
	  }
	  .modalPortfolioView.modalLab .modal-dialog {
		  width: 96%;
		  margin: 2%
	  }
	  .percent{
		  font-size:80px;
		  padding:20px 20px 10px;
	  }
	  .boxWrapper{
		  bottom:-72px;
	  }
	  .particleBG {
		  margin: auto;
		  display: block;
		  position: absolute;
		  left: 0;
		  right: 0;
		  top: 0;
		  bottom: 0;
		  width: 100%;
	  }
	  .welcomeContent{
		  margin-top:0;
	  }
	  .welcomeContent h1 {
		  font-size: 50px;
	  }
	  .welcomeContent h2{
		  font-size:30px;
	  }
	  .formulationWrapper .contentBox {
		  margin: 20px auto;
		  padding: 15px 0 25px;
		  height: auto;
		  max-width:320px;
	  }
	  .formulationWrapper h1{
		  font-size:28px;
	  }
	  .labWrapper .formulationWrapper{
		  width:100%;
		  padding-top:30%;
		  display:block;
	  }
	  .labWrapper  .container{
		  max-width:100%;		
	  }
	  .or{
		  margin:15px 0;
		  font-size:18px;
	  }
	  .btnCustom{
		  font-size:20px!important;
		  padding:5px 15px;
		  font-family: gotham-medium;
	  }
	  .arnLink{
		  margin: 4px 15px;
		  font-size:1.2em;
		  display:inline-block;
		  float:none;
	  }
	  .tree {
		  display:none;
	  }
	  .doorBox {
		  height: auto;
		  margin: 40px auto;
		  width: 100%;
		  border-width: 14px;
		  padding:30px 20px 50px;
		  border-radius:75px;
	  }
	  .dialpad {
		  margin: 15px auto 0;
		  padding:15px;
		  height:260px;
		  width:260px;
	  }	
	  .backRemove {
		  position: absolute;
		  bottom: 16px;
		  right: 24px;	
	  }
	  .registerBox{
		  height:210px;
		  width:100%;
	  }
	  .doorBox .btnCustom{
		  margin-top:20px!important;
		  float:left;
		  width:100%;
	  }
	  .doorHoverRight { 		
		  background-size:cover;
	  }
	  .doorHoverLeft{
		  background-size:cover;
	  }
	  .dialInput{
		  height:40px;
	  }
	  .footerLinks{
		  height:40px;
	  }	
	  
	  .dialNumbers{
		  width:auto;
	  }
	  .dialNumbers .digit{
		  margin:7px;
	  }
	  .dialInput{
		  font-size:1em;
	  }
	  .door{
		  height:500px;
		  margin: 10% auto;
	  }
	  .modalLab.modalPortfolio .modal-body h2 {
		  margin-bottom: 24px;
	  }
	  .labWrapper {
		  background: url('../img/lab-analysis-xs.png') no-repeat center center;
		  
	  }
	  .labWrapper .instructionWrapper{
		  width:100%;
		  padding-top:100px;	
		  display:block;
	  }
	  .instructionWrapper .contentBox{
		  height:auto;
		  padding-bottom:80px;
	  }
	  .instructionWrapper .contentBox h2{
		  font-size:24px;
	  }
	  .instructionWrapper .contentBox .letsText span{
		  width:30px;
	  }
	  .modalLab .modal-dialog{
		  width:96%;
		  margin:0 auto 2%;
		  max-width:450px;
		  
	  }
	  .ratingWrapper{
		  padding:10% 15px 0 15px;
	  }
	  .modalLab .modal-content h2{
		  font-size:26px;
	  }
	  .modalLab .modal-body{
		  padding:15px;
	  }
	  .btnModal{
		  padding:5px 7px;
	  }
	  .eliminatedTube{
		  position: relative;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  overflow: hidden;
		  float: none;	
		  background-size: contain;
		  width: 300px;
		  height: 340px;
		  margin:0 auto 170px;
		  top:50px;
	  }
	  .eliminatedTube h3{
		  top:90px; 
	  }
	  .eliminatedPoint{
		  border: 1px solid transparent;
		  width: 276px;
		  height: 195px;
		  margin-left: 20px;
		  margin-top: 0;
		  position: absolute;
		  border-radius: 0 0 35px 35px;
		  overflow: hidden;
		  left: 0;
		  top: 148px;
		  bottom: 0;	
	  }
	  .eliminatedPoint ul li h5{
		  top:10px;
		  font-size:13px;
	  }
	  .eliminatedPoint svg{
		  width: 460px;
		  height: 40px;
	  }
	  .selectedTube {
		  position: relative;
		  background-size: contain;
		  width: 316px;
		  height: 392px;
		  right: 0;
		  margin:0 auto 0;
		  float:none;
		  top:-74px;
	  }
	  .selectedPoint {
		  border: 1px solid transparent;
		  width: 272px;
		  height: 276px;
		  margin-left: -2px;
		  margin-top: 154px;
		  border-radius: 50%;
		  overflow: hidden;
		  position: absolute;
	  }
	  .selectedTube h3 {	
		  right: 50px;
		  top: 79px;		
		  font-size: 20px;
		  width: 130px;
		  margin: 0 auto;
	  }
	  .selectedPoint ul {
		margin: 80px 0 0 0;
		padding: 0;
	  }
	  .selectedPoint ul li h5{
		  top:10px;
		  font-size:11px;
	  }
	  .selectedPoint svg{
		  width: 460px;
		  height: 40px;
	  }
	  .footerNavBtn.next{
		  padding:2px 4px 7px 7px;
		  font-size:1.4em;
	  }
	  .footerNavBtn.prev{
		  padding:2px 7px 7px 4px;
		  font-size:1.4em;
	  }
	  .footerNavBtn {
		  width: 40px;
		  height: 40px;
	  }
	  .footerNavBtn.prev img, .footerNavBtn.next img {
		width: 19px;
	  }
	  .footer{
		  height: 52px;
		  border-width: 2px;		
	  }
	  .footerNavBtn{
		  top:4px;
	  }
	  .volumeControl{
		  top:10px;
	  }
	  .lab2{
		  max-width:100%;
	  }	
	  .lab2Machine {
		  display:block;
		  width: 180px;
	  }
	  .labMachineWrapper {
		position: fixed;
		top: 0;
		margin: 0 auto;
		left: 0;
		right: 0;
		max-width:38px;
	  }
	  .drop{
		  left:10px;
	  }
	  .analyserScanner{
		  margin-right:0;
		  width:100%;
		  margin:0 auto;
		  float:none;
		  display: flex;
		  justify-content: center;
	  }	
	  .progressBox h2 {
		  font-size: 1.1em;
		  color: #0BF9F2;
	  }
	  .scanBox{
		  margin-right:10px;
	  }		
	  .btnRealign {
		  position: relative;
		  left: 0;
		  right: 0;
		  width: 170px;
		  text-align: center;
		  margin: 0 auto;
		  display: block;
		  top: 30px;
	  }
	  .resultTubeSm {
		  position: absolute;
		  right: 0;
		  bottom: 0;
		  width: 150px;
		  top: auto;
		  display:none;
	  }
	  .contentBox {
		  width: 100%;
		  height: auto;
		  position: relative;
		  padding:20px;
		  border: 5px solid #1B75BC;
		  border-radius:0;
	  } 
	  .recommendBox h1, .formulationWrapper .contentBox h2{
		  font-size:26px;
	  }
	  .contentBox .letsText {
		  font-size: 26px;
	  }
	  .shareWrapper .contentBox{
		  width:100%;
		  height:auto;
	  }
	  .rate{
		  width:270px;
	  }
	  .rate:not(:checked) > label{
		  font-size:50px;
	  }
	  .ratingWrapper h1 {
			width: 100%;
			font-size: 26px;
	  }
	  .ratingWrapper .btnCustom{
		  margin-bottom:15px;
	  }
	  .socialMediaShare img {
		  margin: 10px 2px;
		  transition: all 0.8s ease;
		  width: 49px;
	  }
	  .resultTube {
		  background: url('../img/analyser-tube-result.png') no-repeat 0 0;
		  background-size: auto;
		  width: 300px;
		  height: 450px;
		  float: none;
		  position: relative;
		  bottom: 0;
		  margin-left: 0;
		  background-size: cover;
		  margin: 0 auto;  
		  top:30px;
	  }
	  .resultTube h3{
		  top:145px;
		  font-size:20px;
	  }
	  .resultPoint {
		  border: 1px solid transparent;
		  width: 300px;
		  height: 490px;
		  margin-left: 0;
		  margin-top: 3px;
		  border-radius: 0 0 50px 50px;
		  overflow: hidden;
	  }
	  .resultPoint ul {
		margin: 275px 0 0 0;
		padding: 0;
	  }
	  .resultPoint ul li h5 {
		  font-size: 14px !important;
		  line-height: 0.9;
	  }
	  .selectedTubeResult{
		  bottom:0;
		  margin:50px auto 25px;
		  top:0;
		  height:410px;
	  }
	  .selectedPoint ul li h5{
		  font-size: 11px !important;
		  line-height: 0.8;
		  top:15px;
		  
	  }
	  .perforTextContentBox {
		  margin: auto;
		  max-width: 360px;
		  padding: 5px;
		  position: absolute;
		  top: 0;
		  bottom: 0;
		  height: 270px;
		  left:0;
		  right:0;
	  }
	  .perforTextContentBox .contentBox{
		  margin:0 auto;
	  }
	  .liquidTubeWrapper{
		  width:300px;
		  height:460px;
		  padding:10px;
	  }
	  .tube{
		  transform:scale(0.8);
		  margin-left: -8px;
		  margin-top: -10px;
	  }
	  .liquidTubeInner{
		  padding:5px;
		  height:440px;
	  }
	  .selectedTubeWrapper{
		  height:465px;
	  }
	  .feedBackWrapper h1{
		  margin-bottom:30px;
		  font-size:24px;
	  }
	  .feedBackWrapper .form-group{
		  margin-bottom:30px;
		  margin-left:15px;
		  
	  }
	  .feedBackWrapper textarea{
		  width:85%;
		  margin-left:5px;
	  }
	  .custom-control-label::before {
		  top: -5px;
		  left: -40px;
		  width: 30px;
		  height: 30px;
		  background-color: #fff;
		  border: 3px solid #0BF9F2;
		  border-radius: 0 !important;
	  }
	  .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
		  border-width:3px;
	  }
	  .custom-checkbox .custom-control-label::after {
		  top: 1px;
		  left: -34px;
		  width: 18px;
		  height: 17px;
	  }
	  .custom-control-label{
		  margin-bottom: 0;
		  padding-left: 5px;
		  font-size: 18px;
		  line-height:1.1;
	  }
	  .feedbackBtnHolder{
		  margin-left:35px;
	  }
  }
  
  @media (min-width: 568px) and (max-width: 767.99px){
  
	  .progressBox{
		  padding:25px 0;
	  }
	  .boxHolder{
		  width:250px;
	  }
	  .analyserScannerBig .scanBox {
		  width: 200px;
		  height: 180px;
		  border-width:10px;
		  margin:-1px 0 0 25px;
	  }
	  .analyserScannerBig{
		  width:550px;
	  }	
	  .analyserScannerBig .progressBox{
		  width: 200px;
		  height: 180px;
		  border-width:10px;
		  margin:-1px 0 0 45px;
	  }
	  .analyserScannerBig .progressBox h2 {
		  font-size: 30px;
		  margin-top: 10px;
	  }
	  .analyserScannerBig .progressBox .completeBox img{
		  width:90%;
	  }
	  .percentBox h2 {
		  font-size:60px !important;
		  color: #ffa701;
	  }
	  .percentBox h2 span {
		  font-size: 35px;
		  display: block;
	  }
	  
  
  }
  
  @media (min-width: 320px) and (max-width: 567.99px){
	  .scanBox, .progressBox, .analyserScannerBig .scanBox, .analyserScannerBig .progressBox{
		  width: 155px;
		  height: 140px;
	  }
	  .progressBox{
		  padding:25px 0;
	  }
	  .boxHolder{
		  width:200px;
	  }
	  .boxHolder::after{
		  position:absolute;
		  width:5px;
		  height:50px;
	  }
	  .analyserScannerBig .scanBox {
		  width: 150px;
		  height: 135px;
		  border-width:6px;
		  margin:-1px 0 0 0;
	  }
	  .analyserScannerBig{
		  width:325px;
		  display:flex;
		  justify-content:center;
	  }	
	  .analyserScannerBig .progressBox{
		  margin:-1px 0 0 0;
		  height: 135px;
		  width:150px;
		  border-width:6px;
		  margin:-1px 0 0 25px;
	  }
	  .analyserScannerBig .progressBox h2 {
		  font-size: 20px;
		  margin-top: 0;
	  }
	  .analyserScannerBig .progressBox .completeBox img{
		  width:90%;
	  }
	  .percentBox h2 {
		  font-size: 40px !important;
		  color: #ffa701;
	  }
	  .percentBox h2 span {
		  font-size: 28px;
		  display: block;
	  }
	  .resultTube{
		  position:relative;
		  margin:0 auto;
	  }
	  
  }
  @media  (min-height: 300px) and (max-height: 500px) {
	  .boxWrapper{
		  transform:scale(0.6);
		  bottom:-142px;
	  }
	  .bubbles{
		  margin-top:0;
	  }
	  .percent{
		  font-size:80px;
		  padding:20px 20px 10px;
	  }
	  .welcomeContent{
		  margin-top:5%;
	  }
	  .labWrapper .formulationWrapper{
		  padding-top:3%;
	  }
	  .footerLinks{
		  height:40px;		
	  }
	  .arnLink{
		  margin: 4px 15px;
		  font-size:1.2em;
	  }
	  .tree {
		  display:none;
	  }
	  .doorBox {
		  height: 440px;
		  margin: 5px auto;
		  width: 100%;
		  border-width: 14px;	
		  padding:20px 20px 50px;
	  }
	  /*.dialpad {
		  margin: 0 auto 0;
		  padding: 10px;
		  height: 195px;
		  width: 350px;
	  }
	  .dialNumbers {
		  width: calc(100% - 15px);
		  padding: 15px;
	  }
	  .dialNumbers .digit {
		  margin: 0 6px 6px;
	  }
	  .dialpad .btnCustom{
		  margin-top:25px!important
	  }
	  .dialInput{
		  height:40px;
	  }
	  .backRemove {
		  position: absolute;
		  bottom: 45px;
		  right: 14px;
	  }
	  .doorBox .btnCustom {
		  margin-top: 15px!important;
		  float: none;
		  width: 250px;
		  margin: 0 auto;
	  }
	  */
	  .registerBox{
		  height:210px;
	  }
	  
	  
	  
	  .doorHoverLeft, .doorHoverRight{
		  background:#1e5ff5!important
	  }
	  
	  .labWrapper .instructionWrapper {
		width: 100%;
		padding-top: 30px;
	  }
	  .modalLab .modal-dialog {
		  width: 96%;
		  margin: 0 auto ;
	  }
	  .selectedTube{
		  bottom:-40px!important;
	  }
	  .selectedTube, .resultTube{
		  transform: scale(0.7);
		  bottom: -10px;
	  }
	  .resultTube{
		  transform: scale(0.6);
		  bottom: 0;
		  margin-bottom: 50px;
		  position: absolute;
		  top: -68px;
	  }
	  .resultPoint ul li h5 {
		  font-size: 15px !important;
		  line-height: 0.8;
	  }
	  .selectedTubeResult{
		  top:-60px;
	  }	
	  .selectedTubeResult .selectedPoint ul li h5 {
		  font-size: 13px !important;
		  line-height: 1.1;
		  top: 15px;
	  }
	  .eliminatedTube{
		  transform: scale(0.7);
		  bottom: -52px;
		  left: -40px;
	  }
	  .eliminatedTube{
		  position: absolute;
		  bottom: 18px;
		  left: 0;
		  right: 0;
		  overflow: hidden;
		  float: none;	
		  background-size: contain;
		  width: 300px;
		  height: 340px;
		  margin:0 ;
		  top:auto;
	  }
	  .eliminatedTube h3{
		  top:90px; 
	  }
	  .eliminatedPoint{
		  border: 1px solid transparent;
		  width: 276px;
		  height: 195px;
		  margin-left: 20px;
		  margin-top: 0;
		  position: absolute;
		  border-radius: 0 0 35px 35px;
		  overflow: hidden;
		  left: 0;
		  top: 148px;
		  bottom: 0;	
	  }
	  .eliminatedPoint ul li h5{
		  top:10px;
		  font-size:13px;
	  }
	  .eliminatedPoint svg{
		  width: 460px;
		  height: 40px;
	  }
	  .selectedTube {
		  position: absolute;
		  background-size: contain;
		  width: 316px;
		  height: 410px;
		  right: 0;
		  margin:0 0 50px;
		  float:none;
		  top:-58px;
	  }
	  .selectedPoint {
		  border: 1px solid transparent;
		  width: 272px;
		  height: 276px;
		  margin-left: -2px;
		  margin-top: 151px;
		  border-radius: 50%;
		  overflow: hidden;
		  position: absolute;
	  }
	  .selectedPoint {
		  border: 1px solid transparent;
		  width: 272px;
		  height: 276px;
		  margin-left: -2px;
		  margin-top: 151px;
		  border-radius: 50%;
		  overflow: hidden;
		  position: absolute;
	  }
	  .selectedTube h3 {	
		  right: 50px;
		  top: 79px;		
		  font-size: 20px;
		  width: 130px;
		  margin: 0 auto;
	  }
	  .selectedPoint ul {
		margin: 80px 0 0 0;
		padding: 0;
	  }
	  .selectedPoint ul li h5{
		  top:10px;
		  font-size:11px;
	  }
	  .selectedPoint svg{
		  width: 460px;
		  height: 40px;
	  }
	  .lab2Machine {
		display: block;
		width: 100px;
	  }
	  .labMachineWrapper{
		  max-width:12px;
		  left:0;
	  }
	  .lab2 {
		  max-width: 100%;
		  max-height: 100%;
	  }
	  .selectedTubeWrapper {
		  height: auto;
	  }
	  .recommendBox, .feedbackBox{
		  margin:30px auto 30px;
	  }
	  #board {
		  height: calc(100vh - 21px);
		  
	  }
	  #board .dropBox {
		  background: url('../img/drop-box.png') no-repeat 0 50px;
		  position: relative;
		  width: 333px;
		  margin: 0 auto;
		  height: 171px;
		  position: absolute;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  z-index: 43;
		  top: 151px;
		  transform: scale(0.6);
	  }
	  #board .dragBox {
		  background: url('../img/tube-top-table-sm.png') no-repeat 0 128px!important;;
		  margin: 0 auto;
		  z-index: 33;
		  transform: scale(0.6);
		  float: left;
		  position: absolute;
		  left: 0;
		  right: 0;
		  width: 700px!important;
		  top: -50px;
	  }
	  #board .dragBox ul.card-list .card{
		  width:51px;
	  }
	  .tubeTitle{
		  top:0;
		  left:-1500px;
		  position:fixed;
	  }
	  #board .dragBox .card:hover .tubeTitle{
		  top:0;
		  left:0;
		  opacity:1;
		  position:fixed;
		  font-size:1.5em;
	  }
	  #board .dragBox::after {
		  content: "";
		  background: url('../img/tube-top-overtlay-sm.png') no-repeat 0 0!important;
		  background-size: auto;
		  position: absolute;
		  bottom: 100px;
		  width: 700px!important;
		  height: 36px;
		  left: 0;
		  background-size: cover;
	  }
	  #board .dragBox .one {
		  position: absolute;
		  left: 4px;
	  }
	  #board .dragBox .two {
		  position: absolute;
		  left: 76px;
	  }
	  #board .dragBox .three {
		  position: absolute;
		  left: 147px;
	  }
	  #board .dragBox .four {
		  position: absolute;
		  left: 218px;
	  }
	  #board .dragBox .five {
		  position: absolute;
		  left: 289px;
	  }
	  #board .dragBox .six {
		  position: absolute;
		  left: 360px;
	  }
	  #board .dragBox .seven {
		  position: absolute;
		  left: 431px;
	  }
	  #board .dragBox .eight {
		  position: absolute;
		  left: 501px;
	  }
	  #board .dragBox .nine {
		  position: absolute;
		  left: 573px;
	  }
	  #board .dragBox .ten {
		  position: absolute;
		  left: 644px;
	  }
	  #board .dropBox .tubeImg{
		  width:36px;
	  }		
	  #board .dragBox{
		  margin:0 auto;
	  }
	  #board .dropBox {
			transform: scale(0.45);
			bottom: -36px;
			margin: -40px auto;
			width: 333px;
		  }
	  #board .dragBox ul.card-list {
		  padding: 48px 116px;
	  }
	  .bgTable{
		  display:none;
	  }
  }
.close {
    opacity: 2;
}
.modal{
	background: none;
}
.modal-content {
    border-radius: 0;
    border: 10px solid #1B75BC!important;
    background: #2A6B93!important;
    padding: 0;
    color: #fff;
    text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 25px;
	flex: none !important;;
	font-weight: 700;
}
.p-r-t{
	padding: 6px 40px!important;
}
.error-modal{
	font-size: 25px;
	flex: none !important;;
	font-weight: 700;
}
.homeWrapper {
	background: #1EB5D1 url(../img/bubble-screen-bg.png) no-repeat center center;
	height: 100vh;
	width: 100%;
  }
.text-capital{
	text-transform: capitalize;
}
@media (min-width: 576px){
	.modal-dialog {
		max-width: 610px!important;
		margin: 1.75rem auto;
	}
}