/*Todo move to global*/
html {
  scroll-behavior: smooth;
}



/*Rating*/
.echeckrate .rate-select-layer, .echeckrate .rate-base-layer, .echeckrate .rate-hover-layer {
	color: #006744;
	font-size:55px;
	margin:0 auto;
	cursor:pointer;
}
.echeckrate .rate-base-layer {
    color: #ccc;	
}
.echeckrate .rate-hover-layer {
    /*color: #14ab78;*/
	color: rgba(100,153,51,1);	
	
}
.echeckrate .rate-base-layer span, .echeckrate .rate-hover-layer span, .echeckrate .rate-select-layer span {

}
/*
.echeckrate > .rate-hover-layer > span:nth-child(1), .echeckrate > .rate-select-layer > span:nth-child(1) {
	color: rgba(100,153,51,1);			
}
.echeckrate > .rate-hover-layer > span:nth-child(2), .echeckrate > .rate-select-layer > span:nth-child(2) {
	color:#2f8960;		
}
.echeckrate > .rate-hover-layer > span:nth-child(3), .echeckrate > .rate-select-layer > span:nth-child(3) {
	color:#496748;		
}
.echeckrate > .rate-hover-layer > span:nth-child(4), .echeckrate > .rate-select-layer > span:nth-child(4) {
	color:#644430;		
}
.echeckrate > .rate-hover-layer > span:nth-child(5), .echeckrate > .rate-select-layer > span:nth-child(5) {
	color:#990000;		
}

.echeckratereverse > .rate-hover-layer > span:nth-child(1), .echeckratereverse > .rate-select-layer > span:nth-child(1) {
	color:#990000;
}
.echeckratereverse > .rate-hover-layer > span:nth-child(2), .echeckratereverse > .rate-select-layer > span:nth-child(2) {
	color:#644430;		
}
.echeckratereverse > .rate-hover-layer > span:nth-child(3), .echeckratereverse > .rate-select-layer > span:nth-child(3) {
	color:#496748;		
}
.echeckratereverse > .rate-hover-layer > span:nth-child(4), .echeckratereverse > .rate-select-layer > span:nth-child(4) {
	color:#2f8960;
}
.echeckratereverse > .rate-hover-layer > span:nth-child(5), .echeckratereverse > .rate-select-layer > span:nth-child(5) {
	color: rgba(100,153,51,1);
}*/


.echeckmatch {
	color:#006744;
}
.echecknomatch {
	color:#990000;
}
.echeckratewrap {
	text-align:center;
	margin:0 auto;
	display:inline-block;
}
/*Rating End*/
/*Animations Start*/
.ani-echeck-rs-up {
	opacity:1;
	-webkit-animation: ani-echeck-rs-up 0.65s linear both;
	        animation: ani-echeck-rs-up 0.65s linear both;
}
@-webkit-keyframes ani-echeck-rs-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(1.5) rotateZ(180deg);
            transform: scale(1.5) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@keyframes ani-echeck-rs-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(1.5) rotateZ(180deg);
            transform: scale(1.5) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}

.ani-echeck-rs-up2 {
	opacity:1;
	-webkit-animation: ani-echeck-rs-up2 0.65s linear both;
	        animation: ani-echeck-rs-up2 0.65s linear both;
}
@-webkit-keyframes ani-echeck-rs-up2 {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  30% {
    -webkit-transform: scale(1.3) rotateZ(20deg);
            transform: scale(1.3) rotateZ(20deg);
  }
  70% {
    -webkit-transform: scale(1.5) rotateZ(-20deg);
            transform: scale(1.5) rotateZ(-20deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(0deg);
            transform: scale(1) rotateZ(0deg);
  }
}
@keyframes ani-echeck-rs-up2 {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  30% {
    -webkit-transform: scale(1.3) rotateZ(20deg);
            transform: scale(1.3) rotateZ(20deg);
  }
  70% {
    -webkit-transform: scale(1.5) rotateZ(-20deg);
            transform: scale(1.5) rotateZ(-20deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(0deg);
            transform: scale(1) rotateZ(0deg);
  }
}


/*Animations End*/

/*head layout*/
.echeckheadpanel {
	/*background: rgb(180,214,203);
	background: linear-gradient(0deg, rgba(244,244,244,1) 0%, rgba(255,255,255,1) 80%);*/
	background: rgb(0,107,67);
	background: linear-gradient(80deg, rgba(0,107,67,1) 0%, rgba(100,153,51,1) 100%); 
	color:#fff;
}

.echeckheadpanel h1 {
	background-color: #fff;
	color: #006744;
	display:inline-block;
	padding:0.5rem;
	font-size:170%;
	margin:0px;
	margin-top:45px;
}
#echeckheadimgwrap {
		min-height:150px;
		margin-top:4rem;
}
#echeckheadimg  {
		text-align:center;	
}
#echeckheadimg img, #echeckheadimg object {
	width:150px;
	height:auto;
}

#echeckheadwrap {
	min-height:180px;
	background-color:#fff;
}
#echeckhead {
	font-size:220%;	
	padding-top:1rem;
	margin:0px;
	text-align:center;	
}
#echeckheadinner {
	z-index:1;
	display:block;
	/*background-color:rgba(255,255,255,0.5);*/
	margin:0px;
}
#echecksubhead {
	text-align:center;
	font-size:120%;	
	padding-top:1rem;
	margin:0px;
	min-height:80px;
}
#echeckbody {
	min-height:1600px; /*TODO*/
}	

/*Result Start*/
#echeckoverallres {
	margin:2rem auto;
	max-width:800px;
}

.echeckoverallpoints  {
	font-size:150%;	
}
.echeckoverallinfo {
	margin:2rem 0;	
	font-size:120%;
}
.echeckres3, .echeckres2, .echeckres1 {
	display:block;
	margin:0rem auto 0rem auto;
	background-color:#fff;
	text-align:center;
	border-bottom:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	color:#888;
	z-index:0;
	background-color:#eee;
}
.echeckres1 {

	margin-bottom:3rem;
}
.echeckres3 {
	border-top:1px solid #ccc;	
}
.echeckoverallpoints {
	text-align:center;
	margin:0 auto;
	padding-top:52px;
	width:180px;
	height:180px;
	border-radius:50% 50%;
	color:#fff;
	margin-bottom:1rem;
	z-index:1;
	background: rgb(0,107,67);
	background: linear-gradient(80deg, rgba(0,107,67,1) 0%, rgba(100,153,51,1) 100%); 
	
}

.echeckresactive {
	padding:2rem;	
	font-size:150%;
	min-height:140px;
}
.echeckres1.echeckresactive {
	background-color:#fff;
	color:#000;
}
.echeckres2.echeckresactive {
/*	background-color:#006744;*/
	background: rgb(0,107,67);
	background: linear-gradient(80deg, rgba(0,107,67,1) 0%, rgba(100,153,51,1) 100%); 
	color:#fff;
}
.echecksectionprogresswrap {
	margin-bottom:3rem;
}
	
.echeckres3.echeckresactive {
	background-color:#990000;
	color:#fff;
}
.echeckres2.echeckresactive span, .echeckres3.echeckresactive span  {
	color:#fff;
}

#echeckscontacteaser {
margin-bottom:8rem;
}
/*Result end*/

/*Question Layout Start*/
.echeckquestion {
	text-align:center;
	padding:2rem;
	border:1px solid #ccc;
	min-height:150px;
	max-width:800px;
	margin:2rem auto 8rem auto;
}
.echeckjudgehint {
	color:#666;
	line-height:90%;
}
.echeckjudgehint i {
	color:#ccc;
}
	
.echeckquestiontitle {
	font-size:150%;	
}
.echeckquestionhint {
	color:#666;
}
.echeckqimg img, .echeckqimgwrap  {
	width:100%;
	height:auto;
	max-width:200px;
	max-height:200px;
	
	text-align:center;
}
.echeckqimgwrap {
	
	padding-top:40px;
	margin:0 auto;
	border-radius:50% 50%;
	border: 3px solid #ccc;
	background: rgb(0,107,67);
	background: linear-gradient(80deg, rgba(0,107,67,1) 0%, rgba(100,153,51,1) 100%);
	color:#fff;
}
/*Question Layout end */
/*Prev next container Start*/
#echeckprevnextcontainer a {
	display:inline-block;
	min-width:120px;
	background-color:#cc0000;
	color:#fff;
	padding:1rem;
	margin:0.5rem;
}
#echeckprevnextcontainer a:hover, #echeckprevnextcontainer a:active, #echeckprevnextcontainer a:focus {
	background-color:#990000;
	color:#fff !important;		
}
/*Prev next container end */
/*Progress bars*/

#echeckprogresstitle, .echeckprogresstitle {
	margin:0px;
	margin-top:2rem;
	font-weight:bold;
}
#echeckprogressbarwrap {
	padding:1rem 0;
	min-height:100px;
}

#echeckprogressbar, .echeckprogressbar {
	height:20px;
	border:1px solid #ccc;
	border-radius:10px;
	background-color:#fff;
}
#echeckprogressbarinner, .echeckprogressbarinner  {
	height:20px;
	background: rgb(0,107,67);

	transition: width 2s;
	border-radius:10px;
	width:0%;
	overflow:hidden;
}
#echeckprogressbarlabel, .echeckprogressbarlabel {
	color:#fff;
	padding-top:2px;
	text-align:center;
	font-weight:bold;
}
.echeckheadpanel #echeckprogresstitle {	
	color:#fff;
}
.echeckheadpanel #echeckprogressbarinner {	
	background-color:#b2f177;
	height:29px;
}
.echeckheadpanel #echeckprogressbarlabel {	
	color:#000;
}
.echeckheadpanel #echeckprogressbar {
	height:29px;
	border:none;
	background-color:#333;
		
}
/*Progress bars end*/


/*ultra big cta*/
.ultracta {
	padding:2rem;
	color:#fff;
	font-weight:bold;
	background-color:#cc0000;
	font-size:120%;
	margin:3rem auto 3rem auto;
}
body .ultracta:hover, body .ultracta:active,  body .ultracta:focus {
	background-color:#990000;
	color:#fff !important;
	font-weight:bold;
}

@media (min-width: 992px) {

}

/*PowerMail Form */
.echeckmailcontact {
padding:4rem;
font-size:130%;
}

.powermail_fieldwrap_type_input label, .powermail_fieldwrap_type_check > label {
font-size:130%;
text-align:right;
padding-right:2rem;
}
.powermail_fieldwrap_type_check .checkbox label {
width:50%;
font-size:130%;
}
.powermail_fieldwrap_type_input input[type=text], .powermail_fieldwrap_type_check input[type=check] {
border:1px solid #000;
padding:1rem;
}
.powermail_legend, .powermail_form > h3 {display:none;}
.tx-powermail {display:none;border:1px solid #ccc;background-color:#f4f4f4;}


/*
	VNM Confetti Button
	Basic styles - edit these classes as you wish
*/
.confetti-wrap {
	padding-top:2rem;
	padding-bottom:2rem;
	position:relative;
	z-index:1;
	
}
.vnm-confetti-button {
	position:				relative;
}
.vnm-confetti {
	position:				absolute;
	top:					50%;
	left:					50%;
	width:					0;
	height:					0;
	z-index: 				-1;	/* To ensure it appears _behind_ your button rather than on top */
	pointer-events:			none;	/* To ensure it doesn't interfere with any other click events */
}
.vnm-confetti .confetto {
	position:				absolute;
	width:					0.250rem;
	height:					0.250rem;
}
.vnm-confetti .confetto:not(.only-hover),
.vnm-confetti-button:hover .vnm-confetti .confetto.only-hover {
	display:				block;
	-webkit-animation:		reset 1s ease-out infinite;	/* Note that this duration is overridden by the inline duration set by the plugin */
	animation:				reset 1s ease-out infinite;
	-webkit-animation-name:	reset, fade;
	animation-name:			reset, fade;
}
.vnm-confetti-button .vnm-confetti .confetto.only-hover {
	display:				none;
}
@-webkit-keyframes reset {
	0% { transform: translate(0, 0); }
}
@keyframes reset {
	0% { transform: translate(0, 0); }
}
@-webkit-keyframes fade { to { opacity: 0 } }
@keyframes fade { to { opacity: 0 } }


@media print {
	#search, #navbar-btnsearch, button.navbar-toggle {display:none;}
	
	#radiohint, a.radiolink {display:none;}
	#echeckprogressbarwrap {display:none;}

	#echeckbody {min-height:auto !important}
	.echeckheadpanel h1 {margin:0px;}
	#echeckheadwrap {display:bock;min-height:auto !important;padding-top:0px;}
	.subnavigation  {display:none;}
	.echeckheadpanel {min-height:auto !important;margin:0px;padding:0px;}
	.echeckqimg img {width:150px;height:auto;}
	.powermail_submit {color:#000 !important;background-color:#fff !important;}
	.echeckoverallpoints {padding-top: 42px;width:150px;height:150px;border:3px solid rgb(0,107,67);border-radius:50% 50%;color:#000 !important;background-color:#fff !important;}
	#echeckheadimg img, #echeckheadimg object {width:60px;height:auto;}
	.echeckoverallresultwrap {display:table;width:100%;}
	.echeckoverallresultwrap .col-sm-4, .echeckoverallresultwrap .col-sm-8 {display:table-cell;width:40%;padding:0px;margin:0px;vertical-align:top;}
	.echeckoverallresultwrap .col-sm-8 {width:60%;}
	#echeckheadimgwrap {margin:0px;min-height:10px !important;}
	#echeckscontacteaser {display:none;}
	#echecksectionprogresswrap1 {clear:both;}
	#echeckprevnextcontainer {display:none;}
	#echecksubhead {min-height:auto;}
	.echeckprogressbarinner {border:10px solid rgb(0,107,67);}
	.echecksectionprogresswrap a {display:none;margin-bottom:5px;}
	#echeckmailcontact {padding:0px;margin:0px;}
	.navbar-default, .breadcrumb {height:auto !important;min-height:10px !important;padding:0px !important;margin:0px !important;}
	.echeckres1 {margin-bottom:0px;}
	.vnm-confetti {display:none}
}

