html, body {  
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%; 
}
div {
	position: absolute;
}
#content {
	width: 100%;
	height: 100%;
}
#ad {
	border: #000 1px solid;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	height: 90px;/*100%;*/
	left: 0px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	width: 728px;/*100%;*/
}
/* --  content start  --------------------------------------------------------  */
#static{
	background-image: url(19D30145_AD_Instagram_728x90_f2.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 728px;
	height: 90px;
	opacity: 0.4;
}
#background{
	background: rgb(123,78,159);
	background: linear-gradient(180deg, rgba(123,78,159,1) 0%, rgba(180,49,146,1) 25%, rgba(214,50,118,1) 50%, rgba(233,51,99,1) 75%, rgba(240,83,65,1) 100%);
	width: 100%;
	height: 100%;
}
#Frame-1{
	width: 100%;
	height: 100%;
	z-index: 100;
	opacity: 1;
}
#Frame-1 [id^="text-"] {
	opacity: 0; /*Turn it back to 0*/  
}
#Frame-1 [id^="text-"].in {
	opacity: 1;
}
#Frame-1.out {
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	transition: all 0.7s ease-in-out; 	
}
[id^="text-"] {
	background-size: contain;
	transition: all .5s ease-in-out;
}
[id^="text-"].in {
	opacity: 1;
}
#flo{
	background: url(Flo.png) no-repeat;
	background-size: contain;
	height: 159px;
    width: 100%;
    bottom: -67px;
    left: 19px;
	-webkit-transform: translateY(100%);
	transform: translateY(100%); 	
    transition: all .5s ease-in-out;
}

#flo.in{
	transform: none; 
	transition: all .5s ease-in-out;
	opacity: 1;
}

#text-1{
	background-image: url(text-1.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
    height: 32px;
    top: 29px;
    left: 103px;
}
#text-2{
	background-image: url(text-2.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
    height: 32px;
    top: 29px;
    left: 232px;
}
#text-3{
	background-image: url(text-3.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
    height: 32px;
    top: 29px;
    left: 331px;
}

#text-4{
	background-image: url(text-4.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
    height: 31px;
    top: 29px;
    left: 422px;
}
#text-4b{
	background-image: url(R.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
    height: 5px;
    top: 30px;
    left: 510px;
}
#text-5{
	background-image: url(text-5.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
    height: 32px;
    top: 29px;
    left: 523px;
}

#Frame-2{
	width: 100%;
	height: 100%;
	z-index: 110;
	opacity: 1;
}
#Frame-2 [id^="text-"] {
	opacity: 0; /*Turn it back to 0*/  
}
#Frame-2 [id^="text-"].in {
	opacity: 1;
}
#logo {
	background: url(PGR_logo_2d95e5_120x18.svg) no-repeat;
	height: 20px;
    left: 568px;
    top: 12px;
    width: 100%;
    opacity: 0;
}
#logo.in {
	opacity: 1;
}

.wrapper{
	width: 100%;
}

#tool-1{
	background-image: url(tool-1.png);
	background-repeat: no-repeat;
	background-size: contain;
	top: 21px;
    left: 29px;
    height: 42px;
    width: 46px;
    transform: rotate(-8deg);
	opacity: 0;
}

#tool-2{
	background-image: url(tool-2.png);
	background-repeat: no-repeat;
	background-size: contain;
    top: 21px;
    left: 323px;
    height: 42px;
    width: 46px;
    transform: rotate(8deg);
	opacity: 0;
}
.rotate-in-center {
	-webkit-animation: rotate-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: rotate-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* #tool-1.in{
	opacity: 1;
}
#tool-2.in{
	opacity: 1;
} */

#text-6{
	background-image: url(text-6.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
    height: 30px;
    top: 13px;
    left: 86px;
}
#text-7{
	background-image: url(text-7.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
    height: 29px;
    top: 13px;
    left: 155px;
}
#text-8{
	background-image: url(text-8.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
    height: 30px;
    top: 13px;
    left: 250px;
}
#text-9{
	background-image: url(text-9.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
    height: 30px;
    top: 49px;
    left: 87px;
}
#text-10{
	background-image: url(text-10.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
    height: 30px;
    top: 49px;
    left: 198px;
}


  
/* --  content ends  ---------------------------------------------------------  */

/* --  CTA  ------------------------------------------------------------------  */ 

#button{
    bottom: -15px;
    left: 553px;
}
#button1 {	
	background: url(button_0a3360_134x36.svg) no-repeat;
	bottom: 23px;
    height: 38px;
    left: 13px;
	width: 137px;
	opacity: 0;
	-webkit-appearance: none;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
}
#button1.in {
	opacity: 1;
	position: absolute;
	-webkit-appearance: none;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}
#button1.mouse {
	opacity: 1;
	position: absolute;
	-webkit-appearance: none;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}
#ad:hover #button1 {
	position: absolute;
	transform: scale(1.05);
}

#bgExitArea { 
	z-index: 115;
	cursor: pointer; 
	height: 100%; 
	left: 0;
	opacity: 0.5; 
	position: absolute; 
	top: 0;   
	width: 100%;	
}
#bgExitArea a {
	display: none;
}

#Frame-3{
	z-index: 120;
	opacity: 0;
} 
#Frame-3.in {
	opacity: 1;
	-webkit-appearance: none;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -ms-transition: all 0.7s;
    transition: all 0.7s;
} 
  .box {
    width: 128px;
    height: 78px;
    background-color: #fff;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    left: 396px;
	top: 5px;
  }
  
  .title {
    font-size: 13px;
    font-weight: 600;
    color: #9342A8;
    text-align: center;
	margin-bottom: 12px;
	font-family:  sans-serif;
  }
.mount {
	position: absolute;
	left: -46px;
	bottom: 1px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 200;
} 
.trigger {
  display: block;
  width: 113px;
  text-align:center;
  bottom: -45px;
  border: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  outline: 0;
  cursor: pointer;
}
.trigger:active {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
}

.fetti{
  border-radius: 10rem;
  background-image: url(Dollar.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.rangeSlider {
	margin: 0 0;
	outline: none;
	padding: 0;
	width: 85%;
	height: 4px;
	border-radius: 50px;
	background-color: #dcdde1;
	cursor: pointer;
	-webkit-appearance: none;
	position: relative;
	top: -12px;
  }
  
  .rangeSlider:after {
	content: '';
	width: var(--range);
	height: 100%;
	border-radius: 50px;
	background: -moz-linear-gradient(45deg, rgba(123,78,159,1) 0%, rgba(180,49,146,1) 25%, rgba(214,50,118,1) 50%, rgba(233,51,99,1) 75%, rgba(240,83,65,1) 100%);
	background: -webkit-linear-gradient(45deg, rgba(123,78,159,1) 0%, rgba(180,49,146,1) 25%, rgba(214,50,118,1) 50%, rgba(233,51,99,1) 75%, rgba(240,83,65,1) 100%);
	background: linear-gradient(45deg, rgba(123,78,159,1) 0%, rgba(180,49,146,1) 25%, rgba(214,50,118,1) 50%, rgba(233,51,99,1) 75%, rgba(240,83,65,1) 100%);
	position: absolute;
	top: 0;
	left: 0;
  }
   
  .rangeSlider::-webkit-slider-thumb {
	width: 20px;
	height: 20px;
	border: 0;
	background-image: url(Dollar.svg);
	background-color: #fff;
	border-radius: 100%;
	box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.3);
	z-index: 99;
	position: relative;
	-webkit-appearance: none;
  }
  
  .rangeSlider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 0;
	background-image: url(Dollar.svg);
	background-color: #fff;
	border-radius: 100%;
	box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.3);
  }
  
  .thumbChanged.rangeSlider::-webkit-slider-thumb {
	background-image: url(Dollar.svg);
	background-size: cover;
  }
  
  .thumbChanged.rangeSlider::-moz-range-thumb {
	background-image: url(Dollar.svg);
	background-size: cover;
  }

@-webkit-keyframes rotate-in-center {
	0% {
	  -webkit-transform: rotate(-360deg);
			  transform: rotate(-360deg);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: rotate(0);
			  transform: rotate(0);
	  opacity: 1;
	}
  }
  @keyframes rotate-in-center {
	0% {
	  -webkit-transform: rotate(-360deg);
			  transform: rotate(-360deg);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: rotate(0);
			  transform: rotate(0);
	  opacity: 1;
	}
  }
  

  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* #Frame-3{
		display: none;
	} */

	/* .wrapper{
		margin-top: 70px;
		width: 100%;
	} */
	.box{
		align-items: inherit;
	}
	.title{
		display: block;
		margin: 15px 9px 0;
	}
	.rangeSlider{
		height: auto;
		box-sizing: border-box;
		background: transparent;
		margin: auto;
		position: static;
		top: auto;
	}

	.rangeSlider::-ms-track{
		/* margin: 0 0; */
		/* outline: 1px solid red; */
		/* padding: 0; */
		width: 100%;
		height: 5px;
		border-radius: 50px;
		border-width: 10px 0;
		background: transparent;
		border-color:transparent;
		color: transparent;
		cursor: pointer;
		/* position: relative; */
		/* top: -12px; */
	}
	.rangeSlider::-ms-fill-lower {
		background: -ms-linear-gradient(45deg, rgba(123,78,159,1) 0%, rgba(180,49,146,1) 25%, rgba(214,50,118,1) 50%, rgba(233,51,99,1) 75%, rgba(240,83,65,1) 100%);
		border-radius: 10px;
	}
	.rangeSlider::-ms-fill-upper {
		background: #dcdde1;
		border-radius: 10px;
	}
	.rangeSlider::-ms-thumb {
		width: 22px;
		height: 22px;
		border: none;
		background-image: url(Dollar.svg);
		background-color: #fff;
		border-radius: 100%;
		box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.3);
	}
	.rangeSlider::-ms-tooltip {
		display: none;
	}

}

@supports (-ms-ime-align: auto) {
	.box{
		align-items: inherit;
	}
	.title{
		display: block;
		margin: 15px 9px 0;
	}
	.rangeSlider{
		height: auto;
		box-sizing: border-box;
		background: transparent;
		margin: auto;
		position: static;
		top: auto;
	}

	.rangeSlider::-ms-track{
		/* margin: 0 0; */
		/* outline: 1px solid red; */
		/* padding: 0; */
		width: 100%;
		height: 5px;
		border-radius: 50px;
		border-width: 10px 0;
		background: transparent;
		border-color:transparent;
		color: transparent;
		cursor: pointer;
		/* position: relative; */
		/* top: -12px; */
	}
	.rangeSlider::-ms-fill-lower {
		background: linear-gradient(45deg, rgba(123,78,159,1) 0%, rgba(180,49,146,1) 25%, rgba(214,50,118,1) 50%, rgba(233,51,99,1) 75%, rgba(240,83,65,1) 100%);
		border-radius: 10px;
	}
	.rangeSlider::-ms-fill-upper {
		background: #dcdde1;
		border-radius: 10px;
	}
	.rangeSlider::-ms-thumb {
		width: 22px;
		height: 22px;
		border: none;
		background-image: url(Dollar.svg);
		background-color: #fff;
		border-radius: 100%;
		box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.3);
	}
	.rangeSlider::-ms-tooltip {
		display: none;
	}
  }