@keyframes animateWave {
	0% {
		transform: scale(1, 0);
	}
	100% {
		transform: scale(1, 1);
	}
}

#animWaveDiv {
	display: block;
	transform-origin: bottom;
	animation: animateWave 1000ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.wave-container svg {
	display: block;
}

.wave2 {
	position: absolute;
	bottom: 0;
	left: 0;
	transform-origin: bottom;
	transform: scale(1, 1);
}

.bg-light3:hover .wave2 {
	transform: scale(1, 0);
}


b, strong {
   color: #333;
}


html,
body {
	height: 100%;
}

body {
	background-color: #ecf0f1;
	color: #555;
	font-family: 'Roboto', sans-serif;
	font-size: 0.9rem;
	font-weight: 300;
}

.navbar-brand {
	padding-top: 0.3125rem;
	padding-bottom: 0.3125rem;
	padding-right: 0.3125rem;
	padding-left: 0.3125rem;
	font-weight: 900;
	font-size: 1.25rem;
	text-decoration: none;
	white-space: nowrap;
}

#wrap {
	min-height: 100%;
	height: auto;
	margin: 0 auto -220px;
	padding: 0 0 220px;
}

.footer {
	background-color: #e2e8e9;
	color: grey;
	padding-top: 30px;
	font-size: 12px;
	height: 200px;
	margin-top: 20px;
}

@media (min-width: 992px) {
	#wrap {
		min-height: 100%;
		height: auto;
		margin: 0 auto -100px;
		padding: 0 0 100px;
	}

	.footer {
		height: 80px;
	}

}

.bg-light1 {
	background-color: rgba(255, 255, 255, 0.8) !important;
	border-radius: 5px;
	box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.10);
	margin-bottom: 20px;
	padding: 30px;
	
	z-index: 1;
}

.bg-light2 {
	background-color: rgba(255, 255, 255, 0.8) !important;
	transition: all .2s;
	border-radius: 5px;
	box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.10);
	margin: 20px;
	padding: 30px;
}
.bg-light3:hover 
.bg-light2 img {
	margin-top: 20px;
	margin-bottom: 20px;
}

.bg-light2:hover {
	background-color: #fff !important;
	box-shadow: 0px 0px 12px 6px rgba(0, 0, 0, 0.25);
	transform: scale(1.1);
}

.bg-light2:hover .btn {
	box-shadow: 0px 0px 12px 6px rgba(0, 0, 0, 0.25);
}

.bg-light3 {
	background-color: rgba(255, 255, 255, 0.8) !important;
	transition: all .2s;
	border-radius: 5px;
	box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.10);
	margin: 20px;
	padding: 30px;
}

.bg-light3:hover {
	background: linear-gradient(10deg, rgba(60, 184, 130, 1) 0%, rgba(6, 153, 255, 1) 100%);
	box-shadow: 0px 0px 12px 6px rgba(0, 0, 0, 0.25);
	transform: scale(1.1);
}

.bg-light3ex:hover {
	transform: scale(1);
}

.bg-light3:hover h6, .bg-light3:hover h5, .bg-light3:hover h4 , .bg-light3:hover p {
	color: #fff !important;
}

.bg-light3:hover .btn {
	color: #000;
	background-color: #ffcd39;
	border-color: #ffc720;
}


.smsbadge {
	color: #fff;
	background-color: #3cb882;
	border-color: #3cb882;
	transition: all .2s;
}

.bg-light3:hover .smsbadge {
	color: #000;
	background-color: #ffcd39;
	border-color: #ffc720;
}



.bg-light3 .btn {
	margin-top: 10px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #333;
}

.container {
	margin-bottom: 20px;
}

@media (max-width: 575.98px) {
}

.progress {
	display: -ms-flexbox;
	display: flex;
	height: 0.7rem;
	overflow: hidden;
	font-size: 0.75rem;
	background-color: #e5e7e9;
	border-radius: 0rem;
	margin-top: 20px;
	margin-bottom: 20px;
}

.ptypes {
	text-align: right;
}

.btn {
	text-transform: uppercase;
	font-weight: bold;
}

.bg-success {
	background-color: #3cb882 !important;
}

.btn-outline-light:hover {
	color: #333;
}

.info {
	margin-top: 1rem;
}

.info .badge {
	margin-bottom: 20px;
}

.ill {
	text-align: right;
}

.serverbox {
	margin-top: 70px;
}

.name {
	margin-top: 15px;
	text-align: center;
}

.name2 {
	margin-top: 80px;
	text-align: center;
}


.ppbox {
	/*margin-top: 70px !important;*/
	position: relative;
}


.ribbon-wrapper {
	width: 85px;
	height: 88px;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

.ribbon {
	font: bold 15px sans-serif;
	color: #333;
	text-align: center;
	-webkit-transform: rotate(45deg);
	-moz-transform:    rotate(45deg);
	-ms-transform:     rotate(45deg);
	-o-transform:      rotate(45deg);
	position: relative;
	padding: 7px 0;
	top: 15px;
	right: 0;
	width: 120px;
	background-color: #fc1e35;
	color: #fff;
}

.ppheader {
	background: red;

	background: rgb(143,157,167);
	background: linear-gradient(22deg, rgba(143,157,167,1) 0%, rgba(209,222,235,1) 100%);


	border-radius: 5px 5px 0 0;	
	position: absolute;
	left: 0;
	top: 0;
	padding-top: 60px;
	padding-bottom: 10px;
	text-align: center;
	width: 100%;
	z-index: 1;
	color: #222;
	font-weight: bold;
	font-size: 135%;
}

@media (min-width: 768px) {
	.name {
		text-align: left;
		margin-top: 0;
	}	

	.serverbox {
		margin-top: 20px;
		padding-top: 30px;
	}

	.ppbox {
		margin-top: 65px;
		margin-bottom: 50px;
		padding-top: 30px;
	}
}

@media (min-width: 1200px) {
	.ppbox {
		margin-top: 20px;
		margin-bottom: 0;
	}
}


.logo2 {
	background: #212529;
	
	height: 14vw;
	width: 14vw;

	max-width: 110px;
	max-height: 110px;

	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-top: calc(max(-7vw, -65px) - 30px);

	z-index: 2;
	position: relative;
}

.logo {
	background: #212529;
	
	height: 12vw;
	width: 12vw;

	min-height: 60px;
	min-width: 60px;
	max-height: 80px;
	max-width: 80px;

	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
}


.logowhite {
	background: #ecf0f1;
}

@media (min-width: 1200px) {
	.logo {
		height: 5vw;
		width: 5vw;
	}
}

.logo img, .logo2 img {
	width: 70%;
	height: 70%;
	margin-top: 15%;
	margin-left: 15%;
}


@media (min-width: 768px) {
	.name {
		border-left: 1px solid rgba(0, 0, 0, 0.1);
		padding-left: 10px;
		margin-left: 10px;
		padding: 10px;
	}
}

.wave-container {
	position: relative;
	background: rgb(60, 184, 130);
	background: linear-gradient(10deg, rgba(60, 184, 130, 1) 0%, rgba(6, 153, 255, 1) 100%);
	color: rgba(255, 255, 255, 0.7);
	overflow: hidden;
	font-size: 1rem;
	font-weight: 400;
	z-index: -1;
}

#mainTopContainer {
	color: rgba(255, 255, 255, 0.7);
}

#mainTopContainer h1 {
	margin-bottom: 1rem;
	font-weight: bold;
	color: #fff;
}

#mainTopContainer h5 {
	color: #fff;
}

#mainTopContainer h6 {
	color: #fff;
}

@media (min-width: 1200px) {
	.logo {
		height: 5vw;
		width: 5vw;
	}
}

.navbar {
	border-bottom: 1px solid #fff;
	border-left-width: 0;
	border-right-width: 0;
	border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) 1 stretch;
	font-weight: 300;
}

.navbar-brand i {
	color: rgba(255, 255, 255, 0.7);
}


/* Custom Scrollbar */

::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	background: #c2c2c2;
}

::-webkit-scrollbar-thumb {
	background: #3d3d40;
}

::-webkit-scrollbar-thumb:hover {
	background: #3cb882;
}

.f1 {
	-webkit-animation: fade-in 2.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in 2.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#mainTopContainer h1 {
	margin-top: 3rem;
	font-size: 2rem;
}

.topText {
	margin-bottom: 60px;
	margin-top: 0;
}

.ill {
	position: relative;
    min-height: 256px;
}

.ill img {
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
}

@media (min-width: 992px) {
	.ill img {
		opacity: 1;
		max-width: 500px;
	}

	.ill {
		width: 500px;
		height: 430px;
	}

	.topText {
		margin-bottom: 155px;
		margin-top: 50px;
	}

	#mainTopContainer h1 {
		margin-top: 6rem;
		font-size: 3rem;
	}
}

@media (min-width: 1200px) {
	.ill img {
		opacity: 1;
	    margin-top: 0;
	    margin-bottom: 0;
		max-width: 600px;
	}

	.ill {
		width: 600px;
		height: 516px;
	}


	.topText {
		margin-bottom: 225px;
		margin-top: 100px;
	}
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.bg {
	background-image: url('../img/bg.png');
	height: 30%;
	position: relative;
	z-index: 2;
	background-repeat: no-repeat;
	background-size: cover;
}


.pptext h4, .pptext h3 {
	margin-bottom: 0.15rem;
}

.bg-light3:hover .pptext h4, .bg-light3:hover .pptext h3, .bg-light3:hover .pptext h6 {
	color: #ffcd39 !important;
}

.pptext h4, .pptext h3, .pptext h6 {
	color: #19a4d3;
}


.ppWas {
	text-decoration: line-through;
	color: #a2daed !important;
}

.bg-light3:hover .pptext .ppWas {
	color: rgba(230, 230, 230, 0.75) !important;
}


.backToServer, .backToMethod, .backToHome {
	position: absolute;
	right: 0;
	top: -48px;
	height: 32px;
	height: 32px;
	color: #333;
	background-color: #ecf0f1;
	border-color: #d9dada;
}

.mainOrderBox {
	margin-top: -240px;
	position: relative;
}

@media (max-width: 575.98px) {
	.mainOrderBox {
		position: static;
	}

	.backToHome {
		position: absolute;
		right: 2.5%;
		top: 12px;
	}
}

@keyframes rotation {
  0% {
	transform: rotate(0deg);
  }
  5% {
	transform: rotate(15deg);
  }
  10% {
	transform: rotate(0deg);
  }
  15% {
	transform: rotate(-15deg);
  }
  20% {
	transform: rotate(0deg);
  }
  100% {
	transform: rotate(0deg);
  }
}

.row.row-eq-height {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}


.chmanim_circle_success {
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 5px;
	stroke-miterlimit: 10;
	stroke: #24aa70;
	animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.chmanim_circle_error {
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 5px;
	stroke-miterlimit: 10;
	stroke: #ff4444;
	animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.chmanim {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
	margin: 10px auto;
	stroke-width: 5px;
	stroke: white;
	stroke-miterlimit: 10;
}

.chmanim.success {
	box-shadow: inset 0px 0px 0px #24aa70;
	animation: fillsuccess 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.chmanim.error {
	box-shadow: inset 0px 0px 0px #ff4444;
	animation: fillerror 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.chmanim_check {
	transform-origin: 50% 50%;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.9s forwards;
}



@keyframes stroke {
  100% {
	stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
	transform: none;
  }
  50% {
	transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fillsuccess {
  100% {
	box-shadow: inset 0px 0px 0px 75px #24aa70;
  }
}
@keyframes fillerror {
  100% {
	box-shadow: inset 0px 0px 0px 75px #ff4444;
  }
}

#bar-progress {
	width: 100%;
	display: inline-flex;
	justify-content: center;
	margin-bottom: 15px;
}

#bar-progress .step {
	display: inline-block;

	
	margin: 0 2%;
}

#bar-progress .step.step-active .number-container {
	background-color: #333;
	color: white;
}

#bar-progress .step.step-active h5 {
	font-weight: bold;
	color: #333;
}

#bar-progress .step h5 {
	color: rgba(0, 0, 0, .3);
	font-weight: 500;
	font-size: .8em;
	text-transform: uppercase;
	text-align: center;
	width: 128px;

}

#bar-progress .step .number-container {
	display: block;
	color: rgba(0, 0, 0, .2);
	margin: 10px auto;

	border: solid 1px rgba(0, 0, 0, .2);
	border-radius: 50%;
	
	width: 32px;
	height: 32px;
	line-height: 32px;
	font-size: 15px;

	text-align: center;
	font-weight: bold;
}

#bar-progress .step.done .number-container {
	color: #fff;
	border-color: #24aa70;
	background-color: #24aa70;
}

#bar-progress .step.done h5 {
	color: #24aa70;
	
	font-weight: bold;
}

#bar-progress .step.fail .number-container {
	color: #fff;
	border-color: #ff4444;
	background-color: #ff4444;
}

#bar-progress .step.fail h5 {
	color: #ff4444;
	
	font-weight: bold;
}

#bar-progress .seperator {
	display: block;
	width: 10%;
	height: 2px;
	background-color: rgba(0, 0, 0, .2);
	margin: 25px -25px; /* 32/2-2/2+10=15 */
}

#bar-progress .seperatorprog {
	width: 0%;
	height: 2px;
	background-color: #24aa70;
}
#bar-progress .seperatorprog.active {
	width: 100%;
}

@media (min-width: 992px) {
}

.form-label, .form-check-label {
	font-weight: bold;
}

.mainmargtop {
	margin-top: 0;
}

.fas.fa-circle-notch.fa-spin {
	color: #333;
}


.model-1 {
	position: relative;
	height: 100px;
	margin-top: -20px;
}
.model-1 .spinner {
  color: #f00;
  -webkit-animation: color-bubble 2s linear 0s infinite;
  animation: color-bubble 2s linear 0s infinite;
}
.model-1 .spinner:after, .model-1 .spinner:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 100%;
  box-shadow: 0 0 0 3px;
  -webkit-animation: spinner-bubble 0.8s linear 0s infinite;
  animation: spinner-bubble 0.8s linear 0s infinite;
  margin: auto;
  width: 10px;
  height: 10px;
  opacity: 0;
}
.model-1 .spinner:before {
  -webkit-animation: spinner-bubble 0.8s linear 1s infinite;
  animation: spinner-bubble 0.8s linear 1s infinite;
}
@-webkit-keyframes spinner-bubble {
  from {
    width: 10px;
    height: 10px;
    opacity: .8;
  }
  to {
    width: 50px;
    height: 50px;
    opacity: 0;
  }
}
@keyframes spinner-bubble {
  from {
    width: 10px;
    height: 10px;
    opacity: .8;
  }
  to {
    width: 50px;
    height: 50px;
    opacity: 0;
  }
}
@-webkit-keyframes color-bubble {
  0% {
    color: #33b398;
  }
  50% {
    color: #0c9cf2;
  }
  100% {
    color: #33b398;
  }
}
@keyframes color-bubble {
  0% {
    color: #33b398;
  }
  50% {
    color: #0c9cf2;
  }
  100% {
    color: #33b398;
  }
}


@keyframes ill1 {
  0% {
  	opacity: 0;
    transform: scale(0.7) translateX(200px);
  }
  50 % {
  	opacity: 1;
  }
  100% {
  	transform: scale(1) translateX(0);
  }
}

@keyframes ill2 {
  0% {
  	opacity: 0;
    transform: scale(1.3) translateX(-200px);
  }
  50 % {
  	opacity: 1;
  }
  100% {
  	transform: scale(1) translateX(0);
  }
}

@keyframes ill3 {
  0% {
  	opacity: 0;
    transform: scale(1.5) translateX(-400px);
  }
  50 % {
  	opacity: 1;
  }
  100% {
  	transform: scale(1) translateX(0);
  }
}

@keyframes ill4 {
  0% {
  	opacity: 0;
    transform: scale(1.5) translateX(-400px);
  }
  50 % {
  	opacity: 1;
  }
  100% {
  	transform: scale(1) translateX(0);
  }
}

@keyframes ill5 {
  0% {
  	opacity: 0;
    transform: scale(1.5) translateX(-400px);
  }
  50 % {
  	opacity: 1;
  }
  100% {
  	transform: scale(1) translateX(0);
  }
}

@keyframes ill6 {
  0% {
  	opacity: 0;
    transform: scale(1.4) translateX(-300px);
  }
  50 % {
  	opacity: 1;
  }
  100% {
  	transform: scale(1) translateX(0);
  }
}

@keyframes ill7 {
  0% {
  	opacity: 0;
    transform: scale(1.5) translateX(-400px);
  }
  50 % {
  	opacity: 1;
  }
  100% {
  	transform: scale(1) translateX(0);
  }
}

@keyframes ill8 {
  0% {
  	opacity: 0;
    transform: scale(1) translateY(-300px);
  }
  50 % {
  	opacity: 1;
  }
  100% {
  	transform: scale(1) translateY(0);
  }
}

.faqText {
	text-align: justify;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 0;
}

.faqText .card {
	margin: 10px 0;
	text-align: center;
}

.faqText .card .card-body h6 {
	margin: 0 !important;
}

.faqOpened {
	transform: rotate(90deg);
}

@media (min-width: 992px) {
	.mainTopBox {
		margin-top: -64px;
	}
}

@media (min-width: 1400px) {
	.mainTopBox {
		margin-top: -32px;
	}
}

.easterbg {
  
	background: url(/img/ebg.png), linear-gradient(135deg, #47c4f4 0%, #e7e4ab 100%);
	background-position: center center;
	background-size: cover;
  }