* { margin:0; padding:0; outline:0; list-style: none; color: #222; }

html { scroll-behavior: smooth; }
body { background: #fff; font: 400 18px Arial, Sans-Serif; overflow: auto; color: #333; }
a { color: #173665; font-weight: 700; transition: all 0.2s ease-in-out; cursor: pointer; }

h1 { color: #111; font-weight: bold; font-size: 35px; margin: 0 0 35px; line-height: 1.3em; }
h2 { font-weight: 800; color: #222; font-size: 24px; padding: 15px 0 0; margin: 0 0 13px; line-height: 1.34em; }
h3 { font-weight: 800; color: #222; font-size: 32px; margin: 0 0 30px; line-height: 1.34em; }
h4 { font-weight: 800; color: #222; font-size: 18px; margin: 0 0 10px; }

p { line-height: 1.5em; }
strong { font-weight: 600; color: #111; }
strike {  }

.x:before, .x:after { content: " "; display: table; }  
.x:after { clear: both; }  

.text-center { text-align: center; }
b.text-center { display: block; }
.centered { margin: 0 auto; }
h5.media-caption { margin: -15px 0 0; font-style: italic; color: #666; }

.header { background: #173665; text-align: center; }

.logo { font-size: 30px; font-weight: 800; color: #fff; text-decoration: none; }
.logo img { display: block; width: 340px; margin: 0 auto; }

.subheader { border-bottom: 1px solid #999; padding: 15px 0 10px; color: #a0a0a0; font-size: 14px; }
.date { float: left; color: #a0a0a0; }
.subline { float: right; color: #a0a0a0; }

.c { clear: both; position: relative; margin: 0 auto; max-width: 910px; }

.main { line-height: 1.5em; }
.main img:not(blockquote img) { width: 100%; max-width: 100%; margin: 0 0 20px; }
.main img.inline { float: left; width: 49%; margin: 0 20px 15px 0; }


input[type=submit], .button { transform: perspective(0) translateZ(0); text-decoration: none; background: linear-gradient(195deg, #008c00 0%, #4ba614 100%); color: #fff; padding: 15px 15px 13px; border-radius: 4px; font-weight: 700; font-size: 16px; text-transform: uppercase; transition: all 0.2s ease-in-out; border: 0; border-bottom: 3px solid rgba(0,0,0, .2); cursor: pointer; }
input[type=submit]:hover, .button:hover { brightness(80%); }

.button.big { font-size: 23px; }
.button.full { display: inline-block; width: calc(100% - 40px); padding: 15px 20px 13px; text-align: center; }

.frame-caption { background: #008c00; margin: 0 !important; padding: 8px 10px; color: #fff !important; font-weight: 600; }
.page ul.frame { border: 2px solid #008c00; padding: 20px; margin: 0; font-weight: 600; }

.bullet { font-style: italic; margin: 0 0 8px !important; }
.bullet img { width: 25px !important; vertical-align: -6px; margin: 0 10px 0 0 !important; }

/* page */
.page { clear: both; padding: 40px 0; display: flex; justify-content: space-between; }
.thankyou { padding: 60px 0 150px; text-align: center; }
.main.thankyou img { width: auto; max-width: 100%; }
.page h3 { font-size: 20px; font-weight: 700; }
.page p { margin: 0 0 18px; }
.page ul { padding: 0 0; margin: 0 0 20px 15px; }
.page ul li { margin: 0 0 0 20px; list-style-type: square; line-height: 1.5em; }

.page-content { margin: 0 10%; width: 100%; }
.page-content h3 { padding: 15px 0 0; }
.page-content ol li { margin: 0 0 0 20px; list-style-type: decimal; line-height: 1.7em; }
.page-content ul li { line-height: 1.7em; }

.share img { width: 30px !important; height: 30px; float: left; margin: 0 5px 10px 0 !important; }

p.points { font-weight: 700; margin: 0 0 30px; font-size: 17px; text-align: center; }
p.points span { margin: 0 15px; }


/* footer */
.footer { clear: both; padding: 60px 0 40px; background: #f0f4f7; text-align: center; }
.footer p { font-size: 14px; color: #999; margin: 0 0 15px; }
.footer .logo { float: none; }
.footer .logo img { width: 150px; margin: 0 0 20px; }

.footer ul { margin: 0 0 20px; }
.footer ul li { display: inline-block; line-height: 40px; color: #000; margin: 0 15px 0 0; font-size: 14px; }
.footer ul li a { color: #000; text-decoration: none; font-weight: 400; }
.footer .copy { font-size: 14px; color: #222; }

.hide { display: none; }
.show { display:  block; }
input, textarea, select { font-size: 17px; }
label { display: block; margin: 0 0 7px; color: #333; font-size: 16px; font-weight: 500; }
.form-group label:after { content: ' *'; color: red; }
input[type=text], input[type=number], input[type=tel], input[type=email], textarea, select { box-sizing: content-box; padding: 12px; border: 1px solid #ccc; background: #fff; width: calc(100% - 24px); margin: 0 0 25px; border-radius: 5px; box-shadow: 2px 2px 0 0 rgba(0,0,0, .05); }
textarea { height: 250px; width: 96%; }
input[type=text]:focus, input[type=number]:focus, input[type=tel]:focus, textarea:focus, select.text:focus { outline: 3px solid lightblue; }
input[type=submit] { white-space: normal; background: linear-gradient(195deg, #008c00 0%, #4ba614 100%) padding: 15px 0; width: 100%; cursor: pointer; color: #fff; border: 0; border-radius: 5px; font-size: 16px; font-weight: 800; border-bottom: 5px solid #129f05; }
#phone::-webkit-inner-spin-button, #phone::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.error { display: none; color: red; font-size: 14px; font-weight: 500; margin: 0 0 30px; }
.error.show { display: block; }
.checkbox { font-size: 14px; }
.checkbox a { color: #555; }
.checkbox input { float: left; margin: 4px 10px 10px 0; }
.secure { font-size: 13px; font-weight: 600; color: #777; padding: 15px 0 0; margin: 0 0 10px !important; }
.secure span { background: #129f05 url(../images/lock.svg) no-repeat 10px 5px; color: #fff; background-size: 9px; padding: 3px 10px 3px 25px; border-radius: 12px; margin: 0 8px 0 0; }

/* thank you */
.thank-you { background: #00c249; padding: 40px; margin: 0 0 40px; border-radius: 5px; border-bottom: 5px solid #129f05; color: #fff; font-weight: 600; }

.down { }
.down img { width: 80px; height: 80px; }

.bounce { animation: bounce 2s infinite; }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}


.quiz { position: relative; background: #f6f6f6; padding: 50px 0; border-radius: 10px; box-shadow: hsla(0, 0%, 0%, 0.14) 0px 20px 40px 0px; margin: 0 0 50px; }
.quiz h2 { text-align: center; margin: 0 30px 45px; }
.op { position: relative; overflow: hidden; }
.quiz fieldset { background: transparent; border: 0 none; border-radius: 0px; padding: 20px 0; box-sizing: border-box; width: 80%; margin: 0 10%; }
.quiz fieldset:not(:first-of-type) { display: none; }
.quiz .inputing, .quiz textarea { padding: 15px; border: 1px solid #ccc; margin-bottom: 10px; width: 100%; box-sizing: border-box; color: #2c3e50; font-size: 13px; font-weight: 800; border-radius: 5px; }
.quiz .inputing:focus, .quiz textarea:focus { border: 1px solid #173665; outline-width: 0; transition: All 0.5s ease-in; -webkit-transition: All 0.5s ease-in; -moz-transition: All 0.5s ease-in; -o-transition: All 0.5s ease-in; }
.quiz button { font-weight: bold; border: 0 none; border-radius: 15px; cursor: pointer; margin: 10px 25px 10px 0; background: #173665; padding: 15px 35px; color: #fff; box-shadow: hsla(0, 0%, 0%, 0.14) 0px 10px 20px 0px; }
.quiz button.previous { clear: left; box-shadow: none; color: #222; background: url(../images/arrow.svg) no-repeat left -4px; background-size: 24px; padding: 0 0 0 30px; }

.quiz h2.fs-title { font-size: 18px; font-weight: 800; text-align: center; color: #173665; margin: 0 0 35px; }
.fs-subtitle { font-weight: normal; font-size: 13px; color: #666; margin-bottom: 20px; }
.progress { float: left; height: 8px; background: rgba(109, 206, 113, .4); border-radius: 10px; margin: 0 10%!important; width: 80%; }
.caption { font-size: 13px; color: #5f5f68; position: absolute; bottom: 10px; right: -30px; white-space: nowrap; }
.num { color: #5f5f68; }
.bar { position: relative;  background: rgba(109, 206, 113); height: 8px; width: 10%; float: left; box-shadow: inset 0 5px 3px 0 rgba(0,0,0, .1);  transition: all .5s ease-in; border-radius: 10px; }
.bar svg { border-radius: 50%; position: absolute; width: 16px; z-index: 1000; top: -4px; right: 0; fill: red; box-shadow: 0 1px 3px 0 rgba(0,0,0, .3);}

.double { float: left; width: 49%; }
.double:nth-child(even) { clear: left; }
.double:nth-child(odd) { float: right; }

@media only screen and (max-width : 640px)
{
	.double, .double:nth-child(odd) { float: none; width: 100%; }
}

.center { text-align: center; }

input[type="radio"] { opacity: 0; float: left; width: 1px; margin: 0; }
input[type="radio"] + label { position: relative; margin: 0 0 20px; display: block; width: calc(100% - 40px); padding: 22px 20px 20px; color: #222; background: #fff; border-radius: 10px; box-shadow: 0 20px 20px 0 rgba(0,0,0, .05); transition: all 0.2s ease-in-out; }
input[type="radio"]:checked + label { background: #173665; color: #fff; }
input[type="radio"]:checked + label:before { background: #20bdb0; color: #fff; }
input[type="radio"]:disabled + label { color: #ccc; }
input[type="radio"]:focus + label { box-shadow: inset 0 0 3px #eee; }
input[type="radio"] + label:before { display: none; content: ""; position: absolute; border-radius: 0%; top: 50%; background: white; border: 1px solid #222; height: 20px; width: 20px; margin-top: -11px; left: 10px; border-radius: 100%; }
input[type="radio"] + label:hover { background: #173665; color: #fff; cursor: pointer; }

input[type="radio"] + label img.icon { height: 34px; width: auto; margin: -4px 15px 0 0; float: left; }
input[type="radio"] + label img.big-icon { text-align: center; height: 74px; width: auto; margin: 5px 0 15px; transition: all 0.2s ease-in-out; }
input[type="radio"] + label img.big-icon:after { clear: both; }
input[type="radio"] + label:hover img.big-icon { margin: 0 0 20px 0; }
input[type="radio"] + label:hover img.big-icon.hover-invert { filter: invert(1); }
input[type="radio"]:checked + label img.big-icon.hover-invert { filter: invert(1); }

/* MOBILE UI */
@media only screen and (max-width : 640px)
{  
	html { width: 100%; }
	.c { width: 90%; padding: 0 4%; }
	h1 { font-size: 32px; }
	h2 { font-size: 26px; margin: 0 0 20px; }
	h3 {  }
	h4 { font-size: 20px; margin: 0 0 10px; }
	.hide-mobile { display: none; }
	.header { margin: 0 0 10px; }
	.header .logo { font-size: 30px; }
	.header .logo img { width: 100%; transition: all .5s ease .2s; }
	.subheader { padding: 15px 0; }
	.page { display: block; }
	.page-content { margin: 0; }
	.main img.inline { float: none; width: 100%; }
	.extract { font-size: 22px; padding: 20px 0; }
	.button.big { font-size: 20px; }
	p.points span { display: block; margin: 0 0 15px; font-size: 20px; }
	.main, .side { float: none; width: 100%; }
	
	.quiz h2 { font-size: 24px; }
	
	.footer { background-size: 180%; background-position: left bottom; text-align: center; }
}