@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cousine&display=swap');

html, body {

    font-size: 14px;

}

body {

    background-color: #F1F1F1; 

    font-family: Tahoma, Geneva, sans-serif;

}
#redirect-link{display:none;}
.wrapper {

                box-shadow: 1px 1px 8px rgba(0,0,0,0.5);                    }

@media only screen and (min-width: 1030px) {

    .wrapper {

        max-width: 980px;

    }

}

#headerBox{

    background-color: rgba(255,255,255,1);

}

#headerTitle {

    font-family: 'Shadows Into Light';

    color: #77add7;
    font-size:16px;
    text-align:center;

}

#headerText {

    font-family: Tahoma, Geneva, sans-serif;

    color: #000000;

}

.progress-wrapper {

    width: 90%;

    height: 20px;

    border: 2px solid #333333;

    background-color: #999999;

    margin: 10px auto;

    overflow: hidden;

}

.progress-bar{

    width: 0%;

    height: 20px;

    border: none;

    background-color: #2396F1;

    margin: 0;

    position: relative;

    left: 0;

    top: 0;

}

#surveyBox {

background-color: #2da8f6;
}

.questionStep header, .evalTitle, #surveyEnd header h4 {

    font-family: 'Trebuchet MS', Helvetica, sans-serif;

    font-size: 150%;

    color: #000000; // #ffc341

}

.questionStep h6, .evalText, #surveyEnd section {

    font-family: 'Trebuchet MS', Helvetica, sans-serif;

    color: #ffffff;

}

.yesBtn {

    font-family: 'Trebuchet MS', Helvetica, sans-serif;

    background-color: #ffc341;

    color: #000000;

}

.noBtn {

font-family:;

background-color: #ffc13c;

color: #000000;
}

.bold {

    font-weight: bold;

}

.checkMark, .decimal {
list-style: none;
text-align: left;
margin: 0;
padding: 0;
}

}

.decimal li.one {
background-position: 1px 8px;
}

.decimal li.two {
background-position: 1px -115px;
}

.decimal li.three {
background-position: 1px -240px;
}


.alignleft,img.alignleft {
	margin-right:1.5em;
	display:inline;
	float:left!important
	}

.alignright,img.alignright {
	margin-left:1.5em;
	display:inline;
	float:right!important
	}
.aligncenter,img.aligncenter {
	margin-right:auto!important;
	margin-left:auto!important;
	display:block!important;
	clear:both!important
	}
.wp-caption {
	margin-bottom:1.5em;
	text-align:center;
	padding-top:5px
	}
.wp-caption img {
	border:0 none;
	padding:0;
	margin:0
	}
.wp-caption p.wp-caption-text {
	line-height:1.5;
	font-size:10px;
	margin:0
	}
blockquote.left {
	margin-right:20px;
	text-align:right!important;
	margin-left:0;
	width:33%;
	float:left
	}
blockquote.right {
	margin-left:20px;
	text-align:left!important;
	margin-right:0;
	width:33%;
	float:right
	}
body,html {
	width:100%;
	padding:0;
	margin:0
	}
button,html,input,select,textarea {
	color:#222
	}
body {
	font-size:1em;
	line-height:1.4;
	margin:0;
	padding:0
	}
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #ccc;
	margin:1em 0;
	padding:0
	}
img {
	vertical-align:middle
	}
fieldset {
	border:0;
	margin:0;
	padding:0
	}
textarea {
	resize:vertical
	}
.chromeframe {
	margin:.2em 0;
	background:#ccc;
	color:#000;
	padding:.2em 0
	}
.wrapper {
	border-radius:16px;
	margin:5px auto 10px;
	overflow:hidden;
	position:relative
	}
#footer {
	margin:10px auto;
	text-align:center;
	font-size:.8em;
	position:relative
	}
.main article h1 {
	font-size:2em
	}
#headerBox {
	padding:1em 1.5em 2px
	}
#imageBox {
	float:left;
	position:relative;
	width:35%;
	margin-right:2%;
	bottom:0
	}
#imageBox img {
	max-width:100%;
	height:auto;
	position:relative;
	bottom:0
	}
#headerContent {
	float:right;
	position:relative;
	width:63%
	}
.noHeaderImage {
	float:none!important;
	width:auto!important;
	display:block!important
	}
#headerContent img,#headerTitle img {
	max-width:100%;
	height:auto
	}
#congratsBox,#surveyEval,.questionStep {
	padding:1em
	}
.questionStep header {
	font-size:1.6em;
	font-weight:700;
	text-align:center
	}
.questionStep h6 {
	font-size:1.5em;
	font-weight:400;
	text-align:center;
	margin:.3em auto .65em
	}
.stepButton {
	width:45%;
	margin-right:1.666666%;
	margin-left:3.333333%;
	padding:.5em .25em;
	text-align:center;
	font-size:1.5em;
	font-weight:700;
	border-radius:.5em;
	float:left;
	height:3em;
	border:0;
	box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.3),inset 0 10px rgba(255,255,255,.2),inset 0 10px 20px rgba(255,255,255,.25),inset 0 -15px 30px rgba(0,0,0,.3);
	cursor: pointer;
	}
.noBtn:hover{background-color:#ffc13c!important}
#progress-wrapper{max-width:800px;margin:20px auto}
.progress-bar {
    position: relative;
    top: -5px;
    width: 680px;
    height: 10px;
    background: rgb(58, 100, 132);
    border-radius:5px;
    animation: progress 25s ease-out infinite;
  }
  #analyzing{text-align:center}
  @keyframes progress {
    /* In these keyframes, the progress-bar is stationary */
    0%, 20%, 40%, 60%, 80%, 100% {
      width: 0%;
      opacity: 0;
    }
    /* In these keyframes, the progress-bar starts to come alive */
    4%, 24%, 44%, 64%, 84% {
      width: 0%;
      opacity: 0.7;
    }
    /* In these keyframes, the progress-bar moves forward for 3 seconds */
    16%, 36%, 56%, 76%, 96% {
      width: 100%;
      opacity: 1;
    }
    /* In these keyframes, the progress-bar has finished his path */
    17%, 37%, 57%, 77%, 97% {
      width: 100%;
      opacity: 0.7;
    }
    /* In these keyframes, the progress-bar will disappear and then resume the cycle */
    18%, 38%, 58%, 78%, 98% {
      width: 100%;
      opacity: 0;
    }
  }
.stepButton:active,.stepButton:hover,.stepButton:link {
	border:0;
	background-color:#ffc13c!important
}
.noBtn {
	margin-right:3.333333%;
	margin-left:1.666666%
	}
.noBtn:after {
	content:" ";
	display:table;
	clear:both;
	*zoom:1
	}
.radio-group {
	display:inline-block;
	text-align:left;
	margin:0 auto
	}
.radio-button {
	margin:0px;
	padding:3px
	}
.radio-button label {
	display:inline-block;
	font-size:1.5em;
	font-weight:700;
	cursor:pointer
	}
.radio-button input[type=radio] {
	display:none
	}

#surveyEval {
	text-align:center
	}
#surveyEval h3 {
	margin:0 auto .25em
	}
#surveyEval aside {
	margin:.25em auto 0;
	font-size:.95em;
	width:55%;
	text-align:center
	}
#congratsBox {
	text-align:center
	}
#surveyEnd header h4 {
	margin:0 auto .35em
	}
#surveyEnd section {
	margin:.25em auto 0;
	font-size:.95em;
	text-align:center
	}
#surveyAgree {
	width:auto;
	padding-left:1em;
	padding-right:1em;
    float:none;
    display:block;
	margin-left:auto;
	margin-right:auto
	}
#testimonialImages {
	text-align:center
	}
.testimonial-pic {
	max-width:100%;
	height:auto;
	text-align:center;
	margin:5px auto;
	margin-left:auto;
	margin-right:auto;
	display:inline-block
	}
.full-screen-image {
	min-height:100%;
	min-width:1024px;
	width:100%;
	height:auto;
	position:fixed;
	top:0;
	left:0
	}
.noise {
	position:relative;
	z-index:1
	}

@media only screen and (max-width:480px) {
	body,html {
	font-size:.9em
	}
.wrapper {
	max-width:100%;
	border-radius:0;
	overflow:hidden;
	box-shadow:none
	}
#surveyEnd section,#surveyEval aside {
	width:90%
	}

	}
@media only screen and (min-width:481px) {
	.wrapper {
	max-width:90%
	}

	}
@media only screen and (max-width:767px) {
	#imageBox {
	float:none;
	position:relative;
	width:50%;
	margin-right:auto;
	margin-left:auto;
	display:block
	}
#headerContent {
	float:none;
	display:block;
	position:relative;
	width:auto
	}
.stepButton {
	width:90%;
	margin:.5em auto;
	float:none;
	display:block;
	height:3em
	}
.noBtn {
	margin-right:auto;
	margin-left:auto
	}
#surveyAgree {
	width:90%
	}

	}
@media screen and (max-width:1024px) {
	.full-screen-image {
	left:50%;
	margin-left:-512px
	}

	}
.hidden {
	display:none!important;
	visibility:hidden
	}
.visuallyhidden {
	border:0;
	clip:rect(0 0 0 0);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px
	}
	.wrapper{max-width:980px;margin: 30px auto;}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {
	clip:auto;
	height:auto;
	margin:0;
	overflow:visible;
	position:static;
	width:auto
	}
	#step1.questionStep{display:block}
	.questionStep{display:none;}
.invisible {
	visibility:hidden
	}
.clearfix:after,.clearfix:before {
	content:" ";
	display:table
	}
.clearfix:after {
	clear:both
	}
.clearfix {
	*zoom:1
	}