*:focus {
    outline: 0;
}

.backbg{
	background: repeating-linear-gradient( -45deg, #c7c5c5 0px, #c7c5c5 1px, #ebedeb 2px, #ebedeb 3px, #c7c5c5 4px); 
	background-size: cover; 
	background-position: top center; 
	min-height: 600px;
}

.backbgi{
	background: repeating-linear-gradient( -45deg, #95ab99 0px, #95ab99 1px, #8c8f8d 2px, #8c8f8d 3px, #95ab99 4px); 
	background-size: cover; 
	background-position: top center; 
	min-height: 600px;
}

.briefing{
	 border-radius: 10px; 
	 /*font-size: 14pt;
	 box-shadow: inset  0px 0px 2px 2px gray; */
}

#glower {
  animation: animate 3s linear infinite;
  text-shadow: 0 0 50px #0072ff, 
               0 0 100px #0072ff,
               0 0 150px #0072ff,
               0 0 200px #0072ff;
}
#glower {
  animation-delay: 0.1s;
}
@keyframes animate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

.shimmer {
	-webkit-mask:linear-gradient(-60deg,#000 10%,#0005,#000 60%) right/350% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  100% {-webkit-mask-position:left}
}


.blink_me {
	animation: blinker 1s linear infinite;
	}

	@keyframes blinker {  
	  50% { opacity: 0; }
	}

.dic{
	width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
/*table form rows -- new loan */
#table-row{
	background-color:skyblue; 
	color:white; 
	text-align:left;
	font-weight:bold;
}
#loan-img{
	height:120px; 
	width:115px; 
	padding:7px; 
	border-radius:20px;
}
#table-img{
	height:45px; 
	width:40px; 
	border-radius:7px;
}
#cphoto{
	animation:text-transform;
	animation-duration:.5s ease in out;
}
#cphoto:hover{
	opacity:0.5;
}
#dic{
	width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
#gdic{
	width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
#gmems{
	border-radius:100%; 
	margin:4px; 
	border:solid white; 
	box-shadow: 0px 0px 2px 2px gray;
}
#gmems:hover{
	opacity:0.5;
}

.homstart{
	opacity: 1;
}
.homstart:active{
	filter: sepia(100%);
	/*background: linear-gradient(lime,green);
	border: solid thin 0px; */
}
.fou:active{
	filter: sepia(100%);
	/*background: linear-gradient(lime,green);
	border: solid thin 0px; */
}
.mobo{
	left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 0.3rem;
  background-color: #efefef;
  text-align: center;
}


#password_rules ul li {
        /*font-size: 12px;
        font-weight: normal;*/
        color: #000000;
    }
    #password_rules ul li.complete {
        color: #5DB406;
    }
    span.togglePassword {
        color: gray;
        font-size: 12px;
        cursor: pointer;
    }
	
		  @media screen and (min-width: 1000px) {  
        .med_sm {  
            display: none  
        }  
    }  
	@media screen and (max-width: 600px) {  
        .med_lg {  
            display: none  
        }  
    }


/*cloc script begis */
/* Styles for this pen */


#analogclock {
  font-size:8px;
  margin:0 auto;
  padding:0;
  width:100%;
  height:314px;
  border:2em solid #123;
  border-radius:50%;
  display:block;
  position:relative;
  text-align:center;
  background:#fff;
  box-shadow:inset 0 0 0.8em 0.8em #ffe, 
    0 0 0 0.5em #def, 
    0 0 0 0.7em #456;
}
.minmarks {
  display:inline-block;
  position:relative;width:100%;height:100%;
  top:0;
  border:0.2em solid #000;
  border-radius:50%;
  box-shadow:0 0 0.5em 0.5em #89a;
}
#brand {
  display:inline-block;
  position:absolute;
  width:100%;height:auto;
  top:65%;left:0;
  text-align:center;
  font-family:"Great Vibes", cursive;
  font-size:200%;
  color:#345;
}
#clocknumbers, #clocknumbers24 {
  display:inline-block;
  position:absolute;
  border:0 none;
  border-radius:50%;
}
#clocknumbers {
  width:84%;height:84%;
  top:8%;left:8%;
}
#clocknumbers24 {
  width:72%;height:72%;
  top:14%;left:14%;
  border:0 none;
}
.clockdigits, .clockdigits24 {
  position:absolute;
  padding:0;margin:0;
  width:4em;height:1em;
  text-align:center;
  font-family:"Times New Roman", serif;
  font-weight:bold;
}
.clockdigits{
  font-size:11pt;
  color:#345;
}
.clockdigits24 {
  color:#666;
  font-size:100%;
}

#nut {
  display:inline-block;
  position:absolute;width:2.4em;height:2.4em;
  top:calc(50% - 1.2em);left:calc(50% - 1.2em);
  border:0.2em solid #333;
  background:radial-gradient(#ccc,#000, #ccc);
  border-radius:50%;
  box-shadow:inset 0 0 0 0.1em #333,
    0 0 0 0.1em #000;
}
.guide {
  position:absolute;
  background:transparent;
  height:100%;width:1px;
  left:50%;top:0;
  transform:rotate(var(--angle));
  font-family:"Times New Roman",serif;
  font-weight:bold;
  font-size:1em;
}
.guide::before {
  content:'';
  width:0.5em;height:1em;
  background:#000;
  position:absolute;left:0;top:0;
}
.guide::after {
  content:'';
  width:0.5em;height:1em;
  background:#000;
  position:absolute;left:0;top:calc(100% - 1em);
}
.guidedot {
  position:absolute;
  background:transparent;
  height:100%;width:1px;
  left:50%;top:0;
  transform:rotate(var(--angle));
}
.guidedot::before {
  content:'';
  width:0.25em;height:0.5em;
  background:#000;
  position:absolute;left:0;top:0;
}
.guidedot::after {
  content:'';
  width:0.25em;height:0.5em;
  background:#000;
  position:absolute;left:0;top:calc(100% - 0.5em);
}
#secondscircle {
  position:absolute;
  width:94%;height:94%;
  left:3%;top:3%;
  border-radius:50%;
}
#secondshand {
  position:absolute;
  background:#c00;
  width:0.2em;
  height:50%;
  left:50%;
  top:0;
  transform-origin: bottom center;
  box-shadow:0 0 0.3em 0.1em #ccc,
    0 4em 0 0 #c00;
}
#secondshand:after {
  position:absolute;
  content:'';
  width: 1em; 
  height: 3em; 
  background:linear-gradient(to right, #fcc, #c00,#fcc);
  left:-0.4em;top:calc(100% + 2em);
  border-radius:0.5em;
  box-shadow:0 0 1em 0.1em #ccc;
}
#minutescircle {
  position:absolute;
  width:74%;height:74%;
/*   border:1px solid green; */
  left:13%;top:13%;
  border-radius:50%;
}
#minuteshand {
  position:absolute;
  width:0.8em;
  left:calc(50% - 0.4em);
  background:linear-gradient(#345 0%, #234 100%);
  box-shadow:0 0 0.8em 0.1em #999;
}
#hourscircle {
  position:absolute;
  width:50%;height:50%;
  border:0 none;
  left:25%;top:25%;
  border-radius:50%;
}
#hourscircle, #minutescircle, #secondscircle {
  pointer-events:none;
}
#hourshand {
  position:absolute;
  width:1.2em;
  left:calc(50% - 0.6em);top:0;
  background:linear-gradient(#234 0%, #123 100%);
  box-shadow:0 0 1.2em 0.1em #999;
}
#minuteshand, #hourshand {
  top:0;
  height:50%;
  border-radius:50% 50% 0 0;
  transform-origin: bottom center;
  pointer-events:none;
}


#digitalclock {
  text-align:center;
  margin:40px auto 20px auto;
  font-family: 'Roboto Mono', monaco, monospace;
  font-size:4rem;
  color:#0f0;
  padding:0.75em;
  background:#000;
  width:10em;
  border:4px solid silver;
  border-radius:8px;
  box-shadow:inset 0 0 0 0.5em #234;
}


@media only screen and (min-width: 600px){
  html {
  font-size:14px;
  }
  #analogclock {
  font-size:10px;
  }
}

@media only screen and (min-width: 900px){
  #analogclock {
  font-size:11px;
  }
}
@media only screen and (min-width: 1200px){
  #analogclock {
  font-size:12px;
  }
}

.comment {
  margin:2rem auto 2rem auto;
  width:80%;text-align:center;
}


#soundtoggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0 none;
  border-radius: 0;
  background-color: transparent;
  position:absolute;
  left:47%;
  top:75%;
  
  cursor:pointer;
}

.speaker {
  --color:#000;
  --size:3rem;
  width:var(--size);
  height:var(--size);
  position:relative;
  background:transparent;
  display:inline-block;
  opacity:0.9;
}
.speaker:hover {
  opacity:1;
}
.speakertriangle {
  display:inline-block;
  width: 0; 
  height: 0; 
  border-top: calc(var(--size) * 0.4) solid transparent;
  border-bottom: calc(var(--size) * 0.4) solid transparent;
  border-right: calc(var(--size) * 0.5) solid var(--color);
  position:absolute;
  left: calc(var(--size) * 0.05);
  top: calc(var(--size) * 0.1);
}
.speakerbar {
  display:inline-block;
  width: calc(var(--size) * 0.333); 
  height: calc(var(--size) * 0.333);
  background: var(--color);
  position:absolute;
  left: 0;
  top:calc(var(--size) * 0.333);
}
.speaker--off {
  opacity:0.6;
}
.speaker--off .speakertriangle {
   left: calc(var(--size) * 0.25);
}
.speaker--off .speakerbar{
  left: calc(var(--size) * 0.2)
}

.speakerwave {
  display:inline-block;
  border:2px solid var(--color);
  border-left-color:transparent;
  border-top-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  position:absolute; 
}
.speaker--off .speakerwave {
  display:none;
}
.speakerwave--1 {
  width:calc(var(--size) * 0.35); 
  height:calc(var(--size) * 0.5);  
  right: calc(var(--size) * 0.3);
  top:calc(var(--size) * 0.25);
  opacity:0.4;
}
.speakerwave--2 {
  width:calc(var(--size) * 0.5); 
  height:calc(var(--size) * 0.8);  
  right: calc(var(--size) * 0.15);
  top:calc(var(--size) * 0.1);
  opacity:0.6;
}
.speakerwave--3 {
  width:calc(var(--size) * 0.5); 
  height:calc(var(--size) * 1);  
  right: calc(var(--size) * 0);
  top:calc(var(--size) * 0);
  opacity:0.8;
}
/*******clock ends*******/


/********* text carousal begins ****
==============================================================================
==============================================================================
**/
.content-slider {
  width: 100%;
  /*border-radius: 7px;*/
  margin-bottom: 0px;
}

.slider {
  width: 100%;
  overflow: visible;
  position: relative;
}
.mask {
  overflow: hidden;
  height: 30px;
}

.slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}

.slider li {
  width: 100%;
  position: absolute;
  top: -325px;
  list-style: none;
}

.slider .quote {
  font-size: 16px;
  font-style: italic;
}

.slider .source {
  font-size: 10px;
  text-align: center;
}

.slider li.anim1 {
  -webkit-animation: cycle 20s linear infinite;
          animation: cycle 20s linear infinite;
}

.slider li.anim2 {
  -webkit-animation: cycle2 20s linear infinite;
          animation: cycle2 20s linear infinite;
}

.slider li.anim3 {
  -webkit-animation: cycle3 20s linear infinite;
          animation: cycle3 20s linear infinite;
}

.slider li.anim4 {
  -webkit-animation: cycle4 20s linear infinite;
          animation: cycle4 20s linear infinite;
}

.slider li.anim5 {
  -webkit-animation: cycle5 20s linear infinite;
          animation: cycle5 20s linear infinite;
}

.slider:hover li {
  -webkit-animation-play-state: play;
          animation-play-state: play;
}

@-webkit-keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@-webkit-keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@-webkit-keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@-webkit-keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@-webkit-keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}

@keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}

/*form styles*/
#msform fieldset {
  background: white;
  border:solid thin darkgray;
  /*border-radius: 5px;*/
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 800px /*was 500*/
  /*stacking fieldsets above each other*/
  position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
  display: none;
}

#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #67d5bf;
}
/*headings*/
.fs-title {
  font-size: 16px;
  text-transform: uppercase;
  color: #63a2cb;
  margin-bottom: 10px;
}
.fs-subtitle {
  font-weight: normal;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.help-block {
  font-size: 0.8em;
  color: #7c7c7c;
  text-align: left;
  margin-bottom: 0.5em;
}


.radiobtn {
  position: relative;
  display: block;
}
.radiobtn label {
  display: block;
  background: #fee8c3;
  color: #444;
  border-radius: 5px;
  padding: 10px 20px;
  border: 2px solid #fdd591;
  margin-bottom: 5px;
  cursor: pointer;
}
.radiobtn label:after, .radiobtn label:before {
  content: "";
  position: absolute;
  right: 11px;
  top: 11px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: #fdcb77;
}
.radiobtn label:before {
  background: transparent;
  transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;
  z-index: 2;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 13px;
  background-position: center;
  width: 0;
  height: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
}
.radiobtn input[type=radio] {
  display: none;
  position: absolute;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.radiobtn input[type=radio]:checked + label {
  background: #fdcb77;
  -webkit-animation-name: blink;
          animation-name: blink;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  border-color: #fcae2c;
}
.radiobtn input[type=radio]:checked + label:after {
  background: #fcae2c;
}
.radiobtn input[type=radio]:checked + label:before {
  width: 20px;
  height: 20px;
}

@-webkit-keyframes blink {
  0% {
    background-color: #fdcb77;
  }
  10% {
    background-color: #fdcb77;
  }
  11% {
    background-color: #fdd591;
  }
  29% {
    background-color: #fdd591;
  }
  30% {
    background-color: #fdcb77;
  }
  50% {
    background-color: #fdd591;
  }
  45% {
    background-color: #fdcb77;
  }
  50% {
    background-color: #fdd591;
  }
  100% {
    background-color: #fdcb77;
  }
}

@keyframes blink {
  0% {
    background-color: #fdcb77;
  }
  10% {
    background-color: #fdcb77;
  }
  11% {
    background-color: #fdd591;
  }
  29% {
    background-color: #fdd591;
  }
  30% {
    background-color: #fdcb77;
  }
  50% {
    background-color: #fdd591;
  }
  45% {
    background-color: #fdcb77;
  }
  50% {
    background-color: #fdd591;
  }
  100% {
    background-color: #fdcb77;
  }
}

/**blinkig toay***/
.blink_me {
	animation: blinker 2s linear infinite;
	}

	@keyframes blinker {  
	  50% { opacity: 0.5; }
	}



.phone-wrapper {
  position: relative;
  width: 100%;
  height: 550px;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 0px;
  background-color: #fff;
  color: #444;
  text-align: center;
  font-size: 1.1rem;
  overflow: hidden;
}

.background-image-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.5s ease-in-out 0.2s;
  transform: scale(1);
}
.background-image-wrapper.open {
  transform: scale(1.1) translatey(-5px);
}

.details-wrapper {
  position: absolute;
  bottom: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  transition: transform 0.8s ease-in-out;
  transform: scale(0.9) translatey(-15px);
}
.details-wrapper.open {
  transform: scale(1) translatey(0);
}
.details-wrapper.open .name-label::after {
  transform: rotate(-180deg);
}
.details-wrapper.open .person-details {
  height: 150px;
  overflow: hidden;
}
.details-wrapper.open .description,
.details-wrapper.open .email,
.details-wrapper.open .phone {
  opacity: 1;
  transform: translatey(0);
  transition-delay: 0.4s;
}
.details-wrapper.open .phone {
  transition-delay: 0.5s;
}
.details-wrapper.open .email {
  transition-delay: 0.5s;
}

.names-wrapper .name-label {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  cursor: pointer;
  padding: 20px 20px 10px;
  font-weight: 700;
  font-size: 1.2em;
}
.names-wrapper .name-label:after {
  font-family: FontAwesome;
  content: "";
  transition: transform 0.8s ease-in-out 0.3s;
  transform-origin: center;
}

.person-details {
  text-align: left;
  height: 0;
  overflow: hidden;
  transition: height 0.7s ease-in-out;
  will-change: height;
  font-size: 0.9em;
}
.person-details .description,
.person-details .email,
.person-details .phone {
  opacity: 0;
  transform: translatey(20px);
  transition: transform 0.6s ease-in-out, opacity 0.4s ease-in-out;
  transition-delay: 0;
}
.person-details .description {
  padding: 5px 20px;
  text-justify: justify;
}
.person-details .email,
.person-details .phone {
  display: flex;
  align-items: center;
  padding: 5px 20px;
}
.person-details .email::before,
.person-details .phone::before {
  font-family: FontAwesome;
  content: "";
  margin-right: 10px;
}
.person-details .phone::before {
  content: "";
  font-size: 1.5em;
}
.person-details .email::before {
  content: "";
}

.stats-wrapper {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats {
  text-align: left;
}
.stats .stats-count {
  font-size: 1.7em;
  font-weight: 400;
}
.stats .label {
  font-size: 0.9rem;
  font-weight: 200;
  text-transform: capitalize;
}

.footer-note {
  color: #fff;
}
.footer-note .ajduke {
  text-align: center;
}
.footer-note .ajduke .fa-heart {
  color: tomato;
  padding: 0 5px;
}
.footer-note .ajduke a {
  text-decoration: none;
  border-bottom: 1px dotted;
}
.footer-note .ajduke a:hover, .footer-note .ajduke a:visited, .footer-note .ajduke a.active {
  color: inherit;
}


/**======upcoming banner========**/
.ad-txt {
  position: absolute;
  padding: 0;
  margin: 0;
  letter-spacing: 0.5px;
}

.count-txt {
  font-family: "Oswald";
  font-size: 48px;
  font-weight: bold;
}

.count-txt.colon {
  font-size: 28px;
}

.count-txt-lbl {
  font-family: "Oswald";
  font-size: 14px;
  font-weight: normal;
}

.count-desc {
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: normal;
}



.results-summary-container {
  font-family: "Hanken Grotesk", sans-serif;
  display: flex;
  width: 94%;
  border-radius: 5px;
  box-shadow: 10px 20px 20px rgba(120, 87, 255, 0.3);
  backface-visibility: hidden;
  margin: 0 auto;
}

.heading-primary,
.heading-secondary,
.heading-tertiary {
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.heading-primary {
  font-size: 36px;
  font-weight: 600;
  background-image: linear-gradient(to right, #f7bb97, #dd5e89);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(1.6);
}

.heading-secondary {
  font-size: 24px;
  font-weight: 600;
  margin-top: 20px;
  letter-spacing: 2px;
}

.heading-tertiary {
  font-size: 20px;
  font-weight: 500;
  color: hsl(221, 100%, 96%);
}

.paragraphi {
  font-size: 17px;
  line-height: 1.4;
  color: hsl(221, 100%, 96%);
}
.paragraph-text-box {
  width: 100%;
}

.text-center {
  text-align: center;
}

.margin-1 {
  margin-bottom: 10px;
}

.results-summary-container__result {
  width: 100%; 
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 5px;
  background-image: radial-gradient(to bottom, #734b6d, #42275a);
  animation: gradient 9s infinite alternate linear;
  .result-box {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-image: linear-gradient(-45deg, #ef629f, #42275a);
  background-color: #56ab2f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: gradient 9s linear infinite;
}

.result {
  margin-top: -8px;
  font-size: 16px;
  font-weight: 400;
  color: hsl(241, 100%, 89%);
}
}

.btnx {
  padding: 10px;
  color: #ffffff;
  background-image: linear-gradient(to right, #aa076b, #61045f);
  border: none;
  border-radius: 5px;
  font-size: 14px;
  /*text-transform: uppercase;*/ 
  letter-spacing: 1px;
  font-weight: 500;
  cursor: pointer;
  margin: 20px 0 5px 0;
  transition: all 0.3s;
}

.btnx:hover {
  transform: translateY(5px);
  background-image: linear-gradient(to left, #aa076b, #61045f);
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
    background-image: linear-gradient(-45deg, #ef629f, #42275a);
  }

  50% {
    background-position: 100% 50%;
    background-image: linear-gradient(to bottom, #aa076b, #61045f);
  }

  100% {
    background-position: 0% 50%;
    background-image: linear-gradient(to top, #ef629f, #42275a);
  }
}

.confetti {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 300px;
  height: 60%;
  overflow: hidden;
  z-index: 1000;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 20px;
  background-color: hsl(39, 100%, 56%);
  top: 0;
  opacity: 0;
  animation: makeItRain 3000ms infinite linear;
}

.confetti-piece:nth-child(1) {
  left: 7%;
  transform: rotate(-10deg);
  animation-delay: 182ms;
  animation-duration: 2000ms;
}

.confetti-piece:nth-child(2) {
  left: 14%;
  transform: rotate(20deg);
  animation-delay: 161ms;
  animation-duration: 2076ms;
}

.confetti-piece:nth-child(3) {
  left: 21%;
  transform: rotate(-51deg);
  animation-delay: 481ms;
  animation-duration: 2103ms;
}

.confetti-piece:nth-child(4) {
  left: 28%;
  transform: rotate(61deg);
  animation-delay: 334ms;
  animation-duration: 1008ms;
}

.confetti-piece:nth-child(5) {
  left: 35%;
  transform: rotate(-52deg);
  animation-delay: 302ms;
  animation-duration: 1776ms;
}

.confetti-piece:nth-child(6) {
  left: 42%;
  transform: rotate(38deg);
  animation-delay: 180ms;
  animation-duration: 1168ms;
}

.confetti-piece:nth-child(7) {
  left: 49%;
  transform: rotate(11deg);
  animation-delay: 395ms;
  animation-duration: 1200ms;
}

.confetti-piece:nth-child(8) {
  left: 56%;
  transform: rotate(49deg);
  animation-delay: 14ms;
  animation-duration: 1887ms;
}

.confetti-piece:nth-child(9) {
  left: 63%;
  transform: rotate(-72deg);
  animation-delay: 149ms;
  animation-duration: 1805ms;
}

.confetti-piece:nth-child(10) {
  left: 70%;
  transform: rotate(10deg);
  animation-delay: 351ms;
  animation-duration: 2059ms;
}

.confetti-piece:nth-child(11) {
  left: 77%;
  transform: rotate(4deg);
  animation-delay: 307ms;
  animation-duration: 1132ms;
}

.confetti-piece:nth-child(12) {
  left: 84%;
  transform: rotate(42deg);
  animation-delay: 464ms;
  animation-duration: 1776ms;
}

.confetti-piece:nth-child(13) {
  left: 91%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 1818ms;
}

.confetti-piece:nth-child(14) {
  left: 94%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 818ms;
}

.confetti-piece:nth-child(15) {
  left: 96%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 2818ms;
}

.confetti-piece:nth-child(16) {
  left: 98%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 2818ms;
}

.confetti-piece:nth-child(17) {
  left: 50%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 2818ms;
}

.confetti-piece:nth-child(18) {
  left: 60%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 1818ms;
}

.confetti-piece:nth-child(odd) {
  background-color: hsl(0, 100%, 67%);
}

.confetti-piece:nth-child(even) {
  z-index: 1;
}

.confetti-piece:nth-child(4n) {
  width: 6px;
  height: 14px;
  animation-duration: 4000ms;
  background-color: #c33764;
}

.confetti-piece:nth-child(5n) {
  width: 3px;
  height: 10px;
  animation-duration: 4000ms;
  background-color: #b06ab3;
}

.confetti-piece:nth-child(3n) {
  width: 4px;
  height: 12px;
  animation-duration: 2500ms;
  animation-delay: 3000ms;
  background-color: #dd2476;
}

.confetti-piece:nth-child(3n-7) {
  background-color: hsl(166, 100%, 37%);
}

@keyframes makeItRain {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    transform: translateY(250px);
  }
}