/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/



@import url('https://s3.eu-west-2.amazonaws.com/f8cdn/assets/css/reset.css');


/* -------------------------------------------------------------------------------
			Default Layout: 1200px.
------------------------------------------------------------------------------- */

html, body {width: 100%; font-size: 16px; background: #FFFFFF; line-height: 160%; font-family: 'Rubik', sans-serif; font-weight: 300; color: #727272; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */-webkit-text-size-adjust: 100%; padding: 0; height: 100%;}


h1, h2, h3, h4, h5, h6 {color: #122347; display: block; clear: both; font-weight: 500; font-family: 'Rubik', sans-serif; line-height: 130%;}
h1 {font-size: 52px; color: #FFFFFF; margin: 0; text-align: left; padding: 0; position: relative; letter-spacing: 0; position: relative; z-index: 250;}
h1 span {display: block; clear: both; font-size: 30px; font-weight: 300; padding: 20px 0 0 0; line-height: 160%;}
section.thank-you h1 span {font-size: 30px; display: block; clear: both; line-height: 160%; font-weight: 300; padding: 15px 0 0 0;}
section.thank-you h1 span em {font-style: normal;}
section.thank-you h1 em.tick {width: 50px; height: 50px; display: inline-block; vertical-align: middle; background: url(../img/tick-round.png) no-repeat 0 0; background-size: contain; margin: 0 0 5px 0;}
section.hero div.right form div.success h2 {color: #06d6a0; margin: 0 0 30px 0; text-align: center; font-size: 30px; font-weight: 300;}
section.hero div.right form.block div.success h2 {color: #122347;}
section.hero div.right form div.success h2:before {content: ''; width: 60px; height: 60px; display: block; background: url(../img/smile.png) no-repeat 0 0; background-size: contain; margin: 0 auto 10px auto;}
section.hero div.right form.block div.success h2:before {background: url(../img/tick-round.png) no-repeat 0 0; background-size: contain;}
section.hero div.right form.block div.success.step-2 h2:before {display: none;}
section.hero div.right form div.success h2 em {font-weight: 500; font-style: normal;}
section.hero div.right form div.fail h2 {color: red; margin: 0 0 30px 0; text-align: center; font-size: 30px;}
section.hero div.right form div.fail h2:before {content: ''; width: 60px; height: 60px; display: block; background: url(../img/frown.png) no-repeat 0 0; background-size: contain; margin: 0 auto 5px auto;}
h2 {font-size: 35px; margin: 0 0 50px 0;}
h2 span {display: block; clear: both; font-size: 18px; color: #727272; font-weight: 300; line-height: 160%; padding: 10px 0 0 0;}
.center {text-align: center;}


p {padding: 0 0 20px 0;}
a {color: #35b6b2; -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; -webkit-transition: .2s; transition: .2s;}
.button, .btn {display: block; padding: 0 5%; height: 70px; line-height: 70px; color: #FFFFFF; background: #06d6a0; font-weight: 500; font-size: 24px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: center; cursor: pointer; font-family: 'Rubik', sans-serif;}
.button.sized {display: table; margin: 40px auto 0 auto; padding: 0 20px; clear: both;}
.back {display: table; position: absolute; top: 0; right: 0; padding: 5px 10px; color: #FFFFFF!important; text-decoration: none!important; background: #06d6a0; font-weight: 500; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: center; cursor: pointer; clear: both; z-index: 999;}
.left {float: left; position: relative;}
.right {float: right; position: relative;}
div, section, footer, header, a {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.hidden {display: none!important;}


.msf-view {display: none;}
.msf-navigation {text-align: center; display: block; clear: both; width: 100%; padding: 20px 0;}
.msf-nav-button {display: none; border: 0; outline: none; -webkit-appearance: none;}
.msf-nav-button.submit, .msf-nav-button.back {display: none!important;}


div.wrap {width: 1400px; padding: 0; margin: 0 auto; display: block; clear: both; position: relative;}
div.wrap::after {content: ""; display: table; clear: both;}


header {background: #4267b2; padding: 40px 0;}
header div.logo {width: 158px; height: 40px; background: url(../img/logo.png) no-repeat 0 0; background-size: contain; display: block; margin: 0; float: left;}
header div.logo a, section.hero div.left div.logo a {display: block; width: 158px; height: 40px;}
header span.tagline {float: right; width: auto; display: block; font-weight: 300; color: #FFFFFF;}
header span.tagline em {color: #06d6a0; font-style: normal; font-weight: 500;}


section.main {padding: 100px 0;}
section.main h1 {color: #122347; margin: 0 0 20px 0;}
section.main h2 {margin: 0 0 30px 0; padding: 20px 0 0 0;}
section.main h3 {margin: 0 0 20px 0; padding: 20px 0 0 0;}
section.main table {border-width: 1px; border-collapse: collapse; width: 100%; margin: 0 0 20px 0;}
section.main table tr {border-width: 1px; padding: 10px 15px; border-style: solid;}
section.main table td, section.main thead, section.main th {border-width: 1px; padding: 10px 15px; border-style: solid; border-color: #cecece;}
section.main strong, section.main thead {font-weight: 500; color: #122347;}
section.main a {color: #06d6a0; font-weight: 500; text-decoration: underline;}
section.main ul.guides {margin: 0;}
section.main ul.guides li {padding: 0; background: none;}
section.main ul.guides li:last-of-type {border-bottom: 0;}
section.main a.button {color: #FFFFFF; text-decoration: none; margin: 20px 0 0 0; display: table;}


section.four-col-highlights {display: none;}
section.four-col-highlights {padding: 60px 0; background: #f9f9f9; text-align: center; font-size: 0;}
section.four-col-highlights ul li {width: 25%; display: inline-block; font-size: 16px; vertical-align: top; padding: 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
section.four-col-highlights ul li span.icon {width: 80px; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px; background: #FFFFFF; clear: both; margin: 0 auto 20px auto; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 1px solid #4267b2;}
section.four-col-highlights ul li span.icon img {display: block; width: 100%;}
section.four-col-highlights.larger ul li h3 {font-size: 24px;}
section.four-col-highlights ul li p {padding: 0;}


section.examples {display: none;}
section.examples {padding: 60px 0; background: #FFFFFF;}
section.examples h2 {text-align: center;}
section.examples ul {text-align: center; font-size: 0; overflow: hidden;}
section.examples ul li {display: inline-block; width: auto; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 18px; font-weight: 500; padding: 10px 20px; background: #FFFFFF; color: #122347; margin: 0 5px 10px 5px; border: 1px solid #cecece; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
section.examples ul li em {display: inline-block; background: url(../img/tick-round.png) no-repeat 0 0; width: 20px; height: 20px; vertical-align: middle; background-size: contain; margin: 0 10px 0 0;}
section.examples ul li span {display: inline-block; vertical-align: middle;}


section.iva-example {display: none;}
section.iva-example {padding: 60px 0; background: #4267b2; color: #FFFFFF;}
section.iva-example div.content {background: #FFFFFF url(../img/next-arrow-blue.png) no-repeat center center; background-size: 70px; float: left; padding: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block; width: 100%;}
section.iva-example div.left, section.iva-example div.right {width: 40%; float: left;}
section.iva-example div.right {float: right;}
section.iva-example h2, section.iva-example h2 span, section.iva-example p {text-align: center; color: #FFFFFF;}
section.iva-example ul {text-align: left;}
section.iva-example h3 {margin: 0 0 20px 0; display: block; padding: 15px; background: #4267b2; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #FFFFFF; text-align: center;}
section.iva-example ul li {color: #122347; font-size: 18px; margin: 0 0 10px 0; display: block; clear: both; overflow: hidden; border-bottom: 1px solid #ececec; }
section.iva-example ul li span {display: block; float: left; width: 75%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 5px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
section.iva-example ul li span.total {display: block; float: right; background: #ececec; width: 25%; text-align: center;}
section.iva-example div.right ul li span {background: url(../img/tick.png) no-repeat 0 5px; background-size: 25px; padding: 5px 5px 5px 30px; width: 100%;}
section.iva-example div.right ul li span strong, section.iva-example ul li.total span {font-weight: 500;}
section.iva-example ul li.total span.total {background: red; color: #FFFFFF; }
section.iva-example div.right ul li.total span {background: none; padding: 5px; width: 75%;}
section.iva-example div.right ul li.total span.total {background: #06d6a0; color: #FFFFFF; padding: 5px; width: 25%;}
section.iva-example p.caveat {font-size: 13px; line-height: 160%; padding: 20px 5% 0 5%; display: block; clear: both;}


section.message {display: none;}
section.message {padding: 60px 0; background: #4267b2;}
section.message h2, section.message h3, section.message p {text-align: center; color: #FFFFFF;}
section.message h2 em {border-bottom: 2px solid #FFFFFF; font-style: normal;}
section.message h2 {margin: 0 0 30px 0;}
section.message h3 {margin: 0 0 20px 0; font-size: 22px; line-height: 150%;}


body.extra-content section.hero {min-height: 100%;}
body.extra-content section.message, body.extra-content section.iva-example, body.extra-content section.examples, body.extra-content section.four-col-highlights {display: block;}
body.extra-content section.faqs div.mas {display: none;}


section.thank-you {padding: 60px 0 100px 0; background: #4267b2; min-height: 100%;}
section.thank-you h1 {margin: 0 10% 40px 0;}
section.thank-you h1 em {padding: 5px 10px; font-weight: 500; background: #06d6a0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: inline-block; vertical-align: middle; font-style: normal; line-height: 100%;}
section.thank-you h1 a {color: #FFFFFF;}
section.thank-you p {color: #FFFFFF;}


section.feefo {padding: 60px 0; background: #f9f9f9;}
section.feefo div#feefo-service-review-carousel-widgetId {margin: 0 auto; width: 1000px; float: none;}
section.feefo h2, section.faqs h2 {text-align: center;}
section.feefo h2 {border-bottom: 1px solid #cecece; padding: 0 0 10px 0;}
section.feefo div.feefo-logo {width: 150px; margin: 0 auto 15px auto; display: block;}
section.feefo div.feefo-logo img {width: 100%; display: block;}
section.feefo div.container {overflow-x: hidden;}


section.faqs {padding: 60px 0;}
section.faqs h2 {margin: 0 0 20px 0;}
section.faqs h4 {text-align: center; margin: 0 0 30px 0; line-height: 160%; font-size: 16px; font-weight: 300; padding: 0 10%; color: #727272;}
section.faqs div.mas {margin: 0 0 50px 0;}
div.mas {margin: 50px 0 0 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: center;}
div.mas h3 {margin: 0 0 20px 0;}
div.mas a {font-weight: 500; text-decoration: underline;}
div.mas p {font-size: 13px; padding: 0 0 10px 0; font-weight: 500;}


.acc-container {margin:0 auto; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px; overflow:hidden; border-left: 1px solid #cecece; border-right: 1px solid #cecece; border-top: 1px solid #cecece; border-bottom: 1px solid #cecece;}
.acc-btn {width:100%; margin:0 auto; cursor:pointer;}
.acc-btn span {font-size: 18px; font-weight: 500; color: #122347; padding: 20px 30px; display: block; background: #f9f9f9;}
.acc-btn em.number {background: #122347; color: #FFFFFF; width: 30px; height: 30px; display: inline-block; line-height: 30px; text-align: center; vertical-align: middle; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; font-size: 16px; margin: 0 10px 0 0; font-style: normal;}
.acc-content {height:0px; width:100%; margin:0 auto; overflow:hidden; border-bottom: 1px solid #cecece;}
.acc-content:last-of-type {border-bottom:0; border-top: 0;}
.acc-content:first-of-type {border-top:0;}

.acc-content-inner {padding:30px 30px 10px 30px; border-top:1px solid #cecece; background: #FFFFFF;}
.acc-content ul, section.main ul {display: block; margin: 0 0 20px 0; clear: both;}
.acc-content ul li, section.main ul li {padding: 0 0 5px 25px; margin: 0 0 5px 0; border-bottom: 1px solid #ececec; background: url(../img/tick-round.png) no-repeat 0 6px; background-size: 12px;}
.open {height: auto;}


section.hero span.angie-gazing {width: 280px; float: right; display: block;}
section.hero span.angie-gazing img {display: block; width: 100%;}
section.hero div.left span.angie-tagline {display: none;}
section.hero span.angie-tagline {position: absolute; bottom: 20px; right: 150px; background: #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 12px; padding: 5px 10px;}
section.hero span.angie-tagline span {display: inline-block; vertical-align: middle;}
section.hero span.angie-tagline span.avatar {width: 30px; margin: 0 5px 0 0;}
section.hero span.angie-tagline span.avatar img {display: block; width: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}


section.hero {width: 100%; display: block; clear: both; background: #4267b2 url(../img/hero-bg.png) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: auto; max-width: 1920px; margin: 0 auto; position: relative; overflow: hidden; min-height: 100%;}
section.hero div.left, section.hero div.right {width: 50%; padding: 100px 10% 100px 0;}
section.hero div.right {padding: 100px 0 100px 10%;}


section.hero div.left span.right-arrow {width: 60px; height: 60px; position: absolute; top: 267px; right: -55px; display: block; background: url(../img/right-arrow-green.png) no-repeat center center; background-size: contain;}
section.hero div.left ul {display: block; clear: both; padding: 30px 0 0 0;}
section.hero div.left ul li {color: #FFFFFF; font-size: 18px; margin: 0 0 10px 0; padding: 0 0 5px 30px; border-bottom: 1px solid #718dc5; background: url(../img/tick.png) no-repeat 0 0; background-size: 20px;}
section.hero div.left ul li:last-child {padding: 0 0 0 30px; margin: 0; border-bottom: 0;}
section.hero div.left div.logo {width: 100%; height: 40px; background: url(../img/logo.png) no-repeat 0 0; background-size: contain; display: block; clear: both; margin: 0 0 60px 0;}
section.hero div.left p {padding: 30px 0 0 0; color: #FFFFFF;}
section.hero div.left span.angie-gazing {display: none; float: right; width: 200px; position: absolute; bottom: 0; right: 0;}


section.hero div.right span.tagline {font-weight: 300;}
section.hero div.right span.tagline em {color: #06d6a0; font-style: normal; font-weight: 500;}
section.hero div.right span.feefo-rating, section.hero div.left span.feefo-rating {width: 80px; height: 66px; position: absolute; top: 75px; right: 0; display: block; background: url(../img/feefo-rating.png) no-repeat 0 0; background-size: contain;}
section.hero div.right span.feefo-rating a, section.hero div.left span.feefo-rating a {display: block; text-indent: -99999px; width: 100%; height: 100%;}
section.hero div.right ul {padding: 100px 0 0 0;}
section.hero div.left span.feefo-rating {right: 5%; top: 30px; width: 60px; height: 50px; display: none;}
section.hero div.right ul li {width: 100%; float: left; display: block; clear: both; margin: 0 0 10px 0; position: relative;}
section.hero div.right ul li span.icon {width: 50px; height: 50px; background: #FFFFFF url(../img/sandra.png) no-repeat 0 0; background-size: 50px; border: 5px solid #FFFFFF; position: absolute; top: -25px; right:-25px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}
section.hero div.right ul li span.online {width: 20px; height: 20px; position: absolute; top: -10px; right: -10px; z-index: 300; display: block; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border-radius: 100%;}
section.hero div.right iframe {width: 100%; height: 650px; display: none; margin: 70px 0 0 0;}


section.hero div.right form {display: none; padding: 75px 0 0 0;}
section.hero div.right span.progress-bar {width: 100%; display: block; height: 30px; background: #f9f9f9; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: relative; overflow: hidden; margin: 0 0 30px 0;}
section.hero div.right span.progress-bar span {background: #28d49b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block; height: 30px; position: relative; z-index: 10; -o-transition: .2s; -ms-transition: .2s; -moz-transition: .2s; -webkit-transition: .2s; transition: .2s;}
section.hero div.right span.progress-bar:before {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%,-50%); text-align: center; display: block; content: "Final Step"; color: #FFFFFF; z-index: 20; font-weight: 500;}
section.hero div.right form.block {display: block;}
section.hero div.right div.field {width: 100%; display: block; clear: both; margin: 0 0 20px 0;}
section.hero div.right div.field.final-step {display: none;}
section.hero div.right div.field.final-step.negative {}
section.hero div.right form label {display: block; clear: both; margin: 0 0 30px 0; font-size: 24px; line-height: 130%; font-weight: 500; color: #122347;}
section.hero div.right form div.success label {font-size: 20px; margin: 0 0 5px 0;}
section.hero div.right form.block div.success label.margin {margin: 0 0 20px 0;}
section.hero div.right form div.success label em {font-size: 14px; font-style: normal; font-weight: 300; color: #727272;}
section.hero div.right form input[type="text"], section.hero div.right form input[type="email"], section.hero div.right form input[type="tel"], section.hero div.right form input[type="submit"], section.hero div.right form select {width: 100%; display: block; clear: both; border: 1px solid #cecece; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; outline: none; height: 50px; font-size: 16px; font-family: 'Rubik', sans-serif; padding: 0 0 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight: 300; -webkit-appearance: none; color: #727272;}
section.hero div.right form input[type="submit"] {display: block; border: 0; background: #06d6a0; height: 100px; font-size: 24px; color: #FFFFFF; font-weight: 500; cursor: pointer; -o-transition: 2s; -ms-transition: 2s; -moz-transition: 2s; -webkit-transition: 2s; transition: 2s; padding: 0;}
section.hero div.right form p {text-align: center;}
section.hero div.right form p a {text-decoration: underline;}
section.hero div.right form img.mas-image {margin: 0 auto 20px auto; display: block; width: 60px; clear: both;}
section.hero div.right form label.red {color: red;}
section.hero div.right form label.red span.number {background: red;}
section.hero div.right form label em {display: block; clear: both; color: red; font-size: 12px;}
section.hero div.right form label span.number {background: #122347; color: #FFFFFF; width: 35px; height: 35px; display: inline-block; line-height: 35px; text-align: center; vertical-align: middle; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; font-size: 16px; margin: 0 5px 0 0;}
section.hero div.right form #idpc_error_message, section.hero div.right form label.error {background: red; padding: 5px 10px; color: #FFFFFF; font-weight: 300; margin: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 13px!important;}
section.hero div.right form .q2, section.hero div.right form .q3, section.hero div.right form .q4, section.hero div.right form .q5, section.hero div.right form .q6, section.hero div.right form .q7, section.hero div.right form .q8 {display: none;}
section.hero div.right form .q3_1, section.hero div.right form .q4_1, section.hero div.right form .q5_1, section.hero div.right form .q6_1, section.hero div.right form .q6_2, section.hero div.right form .q7_2, section.hero div.right form .q8_2 {display: none;}
section.hero div.right form .custom-checkbox {display: none;}
section.hero div.right form .custom-checkbox + label {background: #28d49b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; cursor: pointer; outline: none; margin: 0; padding: 20px; width: 100%; clear: none; color: #FFFFFF; font-weight: 500; display: block; font-size: 18px; text-align: left; margin: 0; border: 0;}
section.hero div.right form .custom-checkbox:checked + label {background: #4267b2;}
section.hero div.right form ul.options {display: block; padding: 0; text-align: center;}
section.hero div.right form ul.options li {margin: 0 1% 1% 0; width: 49.5%; float: left; clear: none;}
section.hero div.right form ul.options li:nth-child(2n) {float: right; margin: 0 0 1% 0;}
section.hero div.right form button.next-button {background: none; border: 0; padding: 0 30px 0 0; color: #727272; font-size: 24px; background: url(../img/next-arrow.png) no-repeat right center; background-size: 20px; font-family: 'Rubik', sans-serif; font-weight: 300; margin: 30px 0 0 0; cursor: pointer; outline: none; clear: both; display: block; float: left;}
section.hero div.right form div.success {border: 1px solid #06d6a0; display: none; padding: 20px; clear: both; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
section.hero div.right form.block div.success {display: block; float: left;}
section.hero div.right form div.fail {border: 1px solid red; display: none; padding: 20px 20px 0 20px; clear: both; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
section.hero div.right form span.consent {padding: 10px 0 0 0; display: block; clear: both; text-align: center; font-size: 11px; line-height: 150%;}



section.hero div.right form .check {display: block; position: relative; padding-left: 45px; cursor: pointer; font-size: 16px!important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
section.hero div.right form .check input {position: absolute; opacity: 0; cursor: pointer;}
section.hero div.right form .check-mark {position: absolute; top: 0; left: 0; height: 25px; width: 25px; background: #FFFFFF; border: 1px solid #cecece; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;}
section.hero div.right form .check:hover input ~ .check-mark {background: #FFFFFF;}
section.hero div.right form .check input:checked ~ .check-mark {background: #06d6a0; border: 1px solid #06d6a0;}
section.hero div.right form .check-mark:after {content: ""; position: absolute; display: none;}
section.hero div.right form .check input:checked ~ .check-mark:after {display: block;}
section.hero div.right form .check .check-mark:after {left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}



.double-bounce1, .double-bounce2 {width: 100%; height: 100%; border-radius: 50%; background-color: #15df53; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out;}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


footer {padding: 30px 0; background: #f9f9f9;}
footer p {padding: 0; font-size: 12px;}
footer p a {color: #727272; text-decoration: underline;}


body.bot section.hero div.right iframe {display: block;}
body.manual section.hero div.right form {display: block;}


.cc_container {background: #FFFFFF!important; border-top: 1px solid #cecece; font-family: 'Roboto', sans-serif!important; font-weight: 300!important; padding: 10px 20px!important;}
.cc_container .cc_message {margin-top: 0.45em!important; line-height: 170%!important; font-size: 0.75em!important; color: #727272!important;}
.cc_container .cc_btn, .cc_container .cc_btn:visited {-webkit-border-radius: 5px!important; -moz-border-radius: 5px!important; border-radius: 5px!important; background: #4267b2!important; color: #FFFFFF!important; text-decoration: none!important;}
.cc_container a, .cc_container a:visited {color: #727272!important; text-decoration: underline!important;}
.cc_container a:hover {text-decoration: none!important}









/* -------------------------------------------------------------------------------
			WIDE
------------------------------------------------------------------------------- */

@media only screen and (min-width: 1200px) and (max-width: 1500px) {
div.wrap {width: 90%;}
	
h1 {font-size: 45px;}
h1 span {font-size: 24px;}
    
    
section.hero span.angie-gazing {width: 240px;}
section.hero span.angie-tagline {bottom: 20px; right: 100px;}
}





/* -------------------------------------------------------------------------------
			Tablet Landscape: 960px.
------------------------------------------------------------------------------- */

@media only screen and (min-width: 960px) and (max-width: 1199px) {
div.wrap {width: 90%;}
	
h1 {font-size: 40px;}
h1 span {font-size: 24px;}
section.thank-you h1 {padding: 0 0 20px 0;}
section.thank-you h1 span {font-size: 24px;}
section.thank-you h1 em.tick {width: 40px; height: 40px;}
h2 {font-size: 26px; margin: 0 0 30px 0;}
section.hero div.right form div.success h2:before, section.hero div.right form div.fail h2:before {width: 50px; height: 50px;}
	
	
.button, .btn {font-size: 20px;}
	

section.four-col-highlights ul li {width: 33.333333%; padding: 0 10px 30px 10px;}
section.four-col-highlights ul li:last-child {padding: 0 10px;}
	
	
section.message h3 {margin: 0 0 20px 0; font-size: 18px;}
	
	
section.examples ul li {font-size: 16px; padding: 5px 15px; margin: 0 5px 10px 5px;}
section.examples ul li em {width: 15px; height: 15px; }
	
	
section.iva-example div.content {background-size: 50px; padding: 20px;}
section.iva-example ul li {font-size: 16px;}
section.iva-example div.right ul li span {background-size: 20px; padding: 5px 5px 5px 25px;}
	
	
section.feefo div#feefo-service-review-carousel-widgetId {margin: 0 auto; float: none; display: block; width: 280px!important; overflow: hidden;}
section.feefo div.feefo-logo {width: 120px; margin: 0 auto 15px auto;}
section.feefo .feefowidget-icon-angle-left {display: none!important;}
	
	
section.faqs, section.feefo, section.main {padding: 60px 0;}
section.faqs div.mas {margin: 0 0 40px 0;}
div.mas {margin: 40px 0 0 0;}
.acc-content-inner {padding: 25px 25px 10px 25px;}
.acc-btn span {padding: 20px 25px;}
section.main h1 {margin: 0 0 15px 0;}
section.main h2 {margin: 0 0 25px 0; padding: 15px 0 0 0;}
section.main h3 {margin: 0 0 15px 0; padding: 15px 0 0 0;}
	
	
header div.logo {width: 139px; height: 35px; background: url(../img/logo.png) no-repeat 0 0; background-size: contain;}
header div.logo a, section.hero div.left div.logo a {display: block; width: 139px; height: 35px;}


section.main, section.thank-you {padding: 80px 0;}
section.thank-you {padding: 40px 0 80px 0;}
    
    
section.hero span.angie-gazing {width: 200px;}
section.hero span.angie-tagline {bottom: 20px; right: 20px;}

	
section.hero div.left div.logo {margin: 0 0 40px 0; height: 35px;}
section.hero div.left ul li {font-size: 16px; margin: 0 0 10px 0; padding: 0 0 5px 30px;}
section.hero div.left span.right-arrow {width: 30px; height: 30px; top: 225px; right: -28px;}
section.hero div.left ul {padding: 25px 0 0 0;}
	
	
section.hero div.right form {padding: 45px 0 0 0;}
section.hero div.right ul {padding: 80px 0 0 0;}
section.hero div.right ul li span.icon {width: 40px; height: 40px; background: #FFFFFF url(../img/sandra.png) no-repeat 0 0; background-size: 40px; border: 1px solid #FFFFFF; top: -20px; right: -20px;}
section.hero div.right ul li span.online {width: 15px; height: 15px; top: -5px; right: -10px;}
section.hero div.right iframe {margin: 40px 0 0 0;}
section.hero div.right form .custom-checkbox + label {padding: 20px; font-size: 16px;}
section.hero div.right form div.success label {font-size: 18px;}
section.hero div.right form div.success label em {font-size: 14px;}
section.hero div.right span.feefo-rating {top: 45px; width: 60px; height: 50px;}
section.hero div.right form div.success h2, section.hero div.right form div.fail h2 {font-size: 26px;}
	
	
section.hero div.left, section.hero div.right {padding: 60px 5% 60px 0;}
section.hero div.right {padding: 60px 0 60px 5%;}
}






/* -------------------------------------------------------------------------------
			Tablet Portrait: 640px.
------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 959px) {
div.wrap {width: 90%;}
	
h1 {font-size: 45px;}
h1 span {font-size: 26px; padding: 20px 0 10px 0;}
h2 {font-size: 26px; margin: 0 0 30px 0;}
section.thank-you h1 {padding: 0;}
section.thank-you h1 span {font-size: 24px;}
section.thank-you h1 em.tick {width: 40px; height: 40px;}
	
	
.button, .btn {font-size: 18px;}
.button.sized {margin: 30px auto 0 auto;}
	
	
	
section.four-col-highlights ul li {width: 50%; padding: 0 10px;}
section.four-col-highlights ul li:nth-child(1), section.four-col-highlights ul li:nth-child(2) {padding: 0 10px 30px 10px;}
	
	
section.message h3 {margin: 0 0 20px 0; font-size: 18px;}
	
	
section.examples ul li {font-size: 16px; padding: 5px 15px; margin: 0 5px 10px 5px;}
section.examples ul li em {width: 15px; height: 15px; }
	
	
section.iva-example div.content {background: #FFFFFF url(../img/next-arrow-blue.png) no-repeat center 30px; background-size: 25px; padding: 20px;}
section.iva-example div.content div.left, section.iva-example div.content div.right {width: 46%;}
section.iva-example ul li {font-size: 16px;}
section.iva-example div.right ul li span {background-size: 20px; padding: 5px 5px 5px 25px;}
section.iva-example p.caveat {padding: 15px 0 0 0;}
	
	
	
section.feefo div#feefo-service-review-carousel-widgetId {margin: 0 auto; float: none; display: block; width: 280px!important; overflow: hidden;}
section.feefo div.feefo-logo {width: 120px; margin: 0 auto 10px auto;}
section.feefo .feefowidget-icon-angle-left {display: none!important;}
	
	
section.faqs, section.feefo, section.main, section.four-col-highlights, section.examples, section.iva-example, section.message {padding: 50px 0;}
section.faqs div.mas {margin: 0 0 40px 0;}
section.faqs h4 {padding: 0;}
div.mas {margin: 40px 0 0 0;}
.acc-content-inner {padding: 25px 25px 5px 25px;}
.acc-btn span {padding: 20px 25px;}
section.main h1 {margin: 0 0 15px 0;}
section.main h2 {margin: 0 0 25px 0; padding: 15px 0 0 0;}
section.main h3 {margin: 0 0 15px 0; padding: 15px 0 0 0;}
	
	
header {padding: 25px 0;}
header div.logo {width: 139px; height: 35px; background: url(../img/logo.png) no-repeat 0 0; background-size: contain;}
header div.logo a, section.hero div.left div.logo a {display: block; width: 139px; height: 35px;}


section.main, section.thank-you {padding: 50px 0;}
section.thank-you {padding: 25px 0 50px 0;}
section.thank-you h1 {margin: 0 0 40px 0;}

	
section.hero {background: #FFFFFF;}
section.hero div.wrap {width: 100%;}
section.hero div.left span.right-arrow {display: none;}
section.hero div.left div.logo {margin: 0 0 30px 0; height: 35px;}
section.hero div.left span.right-arrow {width: 50px; height: 50px; top: 215px; right: -45px;}
section.hero div.left ul {padding: 15px 0 0 0;}
section.hero div.left span.angie-gazing{display: block; width: 180px;}
section.hero span.angie-gazing, section.hero span.angie-tagline {display: none;}
section.hero div.left span.angie-tagline {display: block; right: 20px; padding: 2px 10px;}
section.hero div.left span.angie-tagline span.avatar {width: 20px;}
	
	
section.hero div.right form {padding: 0;}
section.hero div.right ul {padding: 0;}
section.hero div.right ul li {width: 48%; float: left; clear: none;}
section.hero div.right ul li:nth-child(2) {float: right;}
section.hero div.right ul li span.icon {width: 30px; height: 30px; background: #FFFFFF url(../img/sandra.png) no-repeat 0 0; background-size: 30px; border: 1px solid #FFFFFF; top: -15px; right: -15px;}
section.hero div.right ul li span.online {width: 15px; height: 15px; top: -5px; right: -10px;}
section.hero div.right span.tagline {display: none;}
section.hero div.right iframe {margin: 0;}
section.hero div.right form input[type="submit"] {font-size: 24px;}
section.hero div.right span.feefo-rating {display: none;}
section.hero div.left span.feefo-rating {display: block;}
	
	
section.hero div.left, section.hero div.right {padding: 50px 5%; width: 100%; background: #4267b2;}
section.hero div.right {padding: 50px 5% 50px 5%; background: #FFFFFF;}
	
	
footer {padding: 25px 0;}
}





/* -------------------------------------------------------------------------------
			Wide Mobile Layout: 480px.
------------------------------------------------------------------------------- */

@media only screen and (min-width: 480px) and (max-width: 767px) {
html, body {font-size: 15px;}
div.wrap {width: 90%;}
	
h1 {font-size: 32px;}
h1 span {font-size: 22px; padding: 20px 0 10px 0;}
section.thank-you h1 {padding: 0;}
section.thank-you h1 span {font-size: 15px;}
section.thank-you h1 em.tick {width: 30px; height: 30px;}
h2 {font-size: 24px; margin: 0 0 25px 0;}
h2 span {font-size: 16px; padding: 5px 0 0 0;}
section.hero div.right form div.success h2:before, section.hero div.right form div.fail h2:before {width: 45px; height: 45px;}
	
	
.button, .btn {font-size: 18px; height: 60px; line-height: 60px;}
.button.sized {margin: 20px auto 0 auto;}
.back {font-size: 15px; top: -47px;}
	
	
section.four-col-highlights ul li {width: 50%; padding: 0 10px;}
section.four-col-highlights ul li:nth-child(1), section.four-col-highlights ul li:nth-child(2) {padding: 0 10px 30px 10px;}
section.four-col-highlights ul li span.icon {width: 70px; padding: 18px; margin: 0 auto 15px auto;}
section.four-col-highlights.larger ul li h3 {font-size: 20px;}
	
	
section.message h3 {margin: 0 0 20px 0; font-size: 15px;}
	
	
section.examples ul li {font-size: 15px; padding: 5px 10px; margin: 0 0 2% 0; width: 49%; float: left;}
section.examples ul li:nth-child(2n) {float: right;}
section.examples ul li em {width: 15px; height: 15px; }
	
	
section.iva-example div.content {background: #FFFFFF; padding: 20px 15px;}
section.iva-example div.content div.left {padding: 0 0 30px 0;}
section.iva-example h3 {margin: 0 0 15px 0; padding: 10px;}
section.iva-example div.content div.left, section.iva-example div.content div.right {width: 100%;}
section.iva-example ul li {font-size: 15px;}
section.iva-example div.right ul li span {background-size: 20px; padding: 5px 5px 5px 25px;}
section.iva-example p.caveat {padding: 15px 0 0 0;}
	
	
section.feefo div#feefo-service-review-carousel-widgetId {margin: 0 auto; float: none; display: block; width: 280px!important; overflow: hidden;}
section.feefo div.feefo-logo {width: 120px; margin: 0 auto 10px auto;}
section.feefo .feefowidget-icon-angle-left {display: none!important;}
	
	
section.faqs, section.feefo, section.main, section.four-col-highlights, section.examples, section.iva-example, section.message {padding: 30px 0;}
section.faqs div.mas {margin: 0 0 30px 0;}
section.faqs h4 {padding: 0; font-size: 15px;}
div.mas {margin: 30px 0 0 0;}
.acc-content-inner {padding: 20px 20px 0 20px;}
.acc-btn span {padding: 15px 20px; font-size: 16px;}
section.main h1 {margin: 0 0 10px 0;}
section.main h2 {margin: 0 0 20px 0; padding: 10px 0 0 0;}
section.main h3 {margin: 0 0 10px 0; padding: 10px 0 0 0;}
	
	
header {padding: 25px 0;}
header div.logo {width: 139px; height: 35px; background: url(../img/logo.png) no-repeat 0 0; background-size: contain;}
header div.logo a, section.hero div.left div.logo a {display: block; width: 139px; height: 35px;}
header span.tagline {display: block; clear: both; float: left; padding: 10px 0 0 0; font-size: 14px;}


section.main, section.thank-you {padding: 30px 0;}
section.thank-you {padding: 5px 0 30px 0;}
section.thank-you h1 {margin: 0 0 30px 0;}

	
section.hero {background: #FFFFFF; padding: 0 0 200px 0;}
body.extra-content section.hero {min-height: auto; padding: 0;}
section.hero div.wrap {width: 100%;}
section.hero div.left span.right-arrow {display: none;}
section.hero div.left div.logo {margin: 0 0 20px 0; height: 35px;}
section.hero div.left ul li {font-size: 16px; margin: 0 0 5px 0; padding: 0 0 2px 30px;}
section.hero div.left span.right-arrow {width: 50px; height: 50px; top: 215px; right: -45px;}
section.hero div.left ul {padding: 15px 0 5px 0;}
section.hero div.left span.angie-gazing {display: block; width: 25%;}
section.hero span.angie-gazing, section.hero span.angie-tagline {display: none;}
section.hero div.left span.angie-tagline {display: block; bottom: 0; right: 0; font-size: 10px; padding: 2px 10px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;}
section.hero div.left span.angie-tagline span.avatar {width: 15px;}
	
	
section.hero div.right ul {padding: 0;}
section.hero div.right ul li span.icon {width: 30px; height: 30px; background: #FFFFFF url(../img/sandra.png) no-repeat 0 0; background-size: 30px; border: 1px solid #FFFFFF; top: -10px; right: auto; left: 10px;}
section.hero div.right ul li span.online {width: 10px; height: 10px; top: -5px; right: auto; left: -5px;}
section.hero div.right span.tagline {display: none;}
section.hero div.right iframe {margin: 0;}
section.hero div.right form .custom-checkbox + label {padding: 15px; font-size: 16px;}
section.hero div.right form ul.options li {margin: 0 0 1% 0; width: 100%; clear: both; display: block;}
section.hero div.right form {padding: 0;}
section.hero div.right form label {font-size: 20px; margin: 0 0 20px 0;}
section.hero div.right form label span.number, .acc-btn em.number {width: 30px; height: 30px; line-height: 30px; font-size: 14px;}
section.hero div.right form div.success label {font-size: 16px;}
section.hero div.right form div.success label em {font-size: 14px;}
section.hero div.right form input[type="submit"] {height: 70px; font-size: 20px;}
section.hero div.right form .check {font-size: 14px!important;}
section.hero div.right span.feefo-rating {display: none;}
section.hero div.left span.feefo-rating {display: block; width: 50px; height: 41px; top: 25px;}
section.hero div.right form div.success h2, section.hero div.right form div.fail h2 {font-size: 24px;}
	
	
section.hero div.left, section.hero div.right {padding: 30px 5%; width: 100%; background: #4267b2;}
section.hero div.right {padding: 30px 5% 30px 5%; background: #FFFFFF;}
	
	
footer {padding: 25px 0;}
}





/* -------------------------------------------------------------------------------
			Mobile Layout: 320px.
------------------------------------------------------------------------------- */

@media only screen and (max-width: 479px) {
html, body {font-size: 15px; line-height: 160%;}
div.wrap {width: 90%;}
	
h1 {font-size: 32px;}
h1 span {font-size: 22px; padding: 20px 0 10px 0;}
section.thank-you h1 {padding: 0;}
section.thank-you h1 span {font-size: 15px;}
section.thank-you h1 em.tick {width: 25px; height: 25px; display: block; clear: both;}
h2 {font-size: 20px; margin: 0 0 25px 0;}
h2 span {font-size: 15px; padding: 5px 0 0 0; line-height: 160%;}
section.hero div.right form div.success h2:before, section.hero div.right form div.fail h2:before {width: 45px; height: 45px;}
	
	
.button, .btn {font-size: 16px; height: 60px; line-height: 60px;}
.button.sized {margin: 20px 0 0 0; display: block; float: left; width: 100%;}
.back {font-size: 15px;  top: -47px;}
	
	
section.four-col-highlights ul li {width: 100%; padding: 0 10px 20px 10px; display: block; clear: both;}
section.four-col-highlights ul li:last-child {padding: 0;}
section.four-col-highlights ul li span.icon {width: 70px; padding: 18px; margin: 0 auto 15px auto;}
section.four-col-highlights.larger ul li h3 {font-size: 20px;}
	
	
section.message h3 {margin: 0 0 20px 0; font-size: 15px;}
	
	
section.examples ul li {font-size: 15px; padding: 5px 10px; margin: 0 0 2% 0; width: 100%; float: left; display: block; clear: both;}
section.examples ul li:nth-child(2n) {float: right;}
section.examples ul li em {width: 15px; height: 15px; }
	
	
section.iva-example div.content {background: #FFFFFF; padding: 20px 15px;}
section.iva-example div.content div.left {padding: 0 0 30px 0;}
section.iva-example h3 {margin: 0 0 15px 0; padding: 10px;}
section.iva-example div.content div.left, section.iva-example div.content div.right {width: 100%;}
section.iva-example ul li {font-size: 15px;}
section.iva-example ul li span, section.iva-example div.right ul li.total span {width: 70%;}
section.iva-example ul li span.total, section.iva-example div.right ul li.total span.total {width: 30%;}
section.iva-example div.right ul li span {background-size: 20px; padding: 5px 5px 5px 25px;}
section.iva-example p.caveat {padding: 15px 0 0 0;}
	
	
section.feefo div#feefo-service-review-carousel-widgetId {margin: 0 auto; float: none; display: block; width: 280px!important; overflow: hidden;}
section.feefo div.feefo-logo {width: 100px; margin: 0 auto 10px auto;}
section.feefo .feefowidget-icon-angle-left {display: none!important;}
	
	
section.faqs, section.feefo, section.main, section.four-col-highlights, section.examples, section.iva-example, section.message {padding: 30px 0;}
section.faqs div.mas {margin: 0 0 30px 0;}
section.faqs h4 {padding: 0; font-size: 15px;}
div.mas {margin: 30px 0 0 0; clear: both; float: left; width: 100%;}
.acc-content-inner {padding: 20px 20px 0 20px;}
.acc-btn span {padding: 15px 20px; font-size: 16px;}
section.main h1 {margin: 0 0 10px 0;}
section.main h2 {margin: 0 0 20px 0; padding: 10px 0 0 0;}
section.main h3 {margin: 0 0 10px 0; padding: 10px 0 0 0;}
	
	
header {padding: 25px 0;}
header div.logo {width: 139px; height: 35px; background: url(../img/logo.png) no-repeat 0 0; background-size: contain;}
header div.logo a, section.hero div.left div.logo a {display: block; width: 139px; height: 35px;}
header span.tagline {display: block; clear: both; float: left; padding: 10px 0 0 0; font-size: 14px;}
	
	
section.main, section.thank-you {padding: 30px 0;}
section.thank-you {padding: 5px 0 30px 0;}
section.thank-you h1 {margin: 0 0 25px 0;}

	
section.hero div.right form {padding: 0;}
section.hero {background: #FFFFFF; padding: 0;}
body.extra-content section.hero {min-height: auto!important; padding: 0!important;}
section.hero div.wrap {width: 100%;}
section.hero div.left span.right-arrow {display: none;}
section.hero div.left div.logo {margin: 0 0 20px 0; height: 35px;}
section.hero div.left ul li {font-size: 14px; margin: 0 0 5px 0; padding: 0 0 2px 30px;}
section.hero div.left span.right-arrow {width: 50px; height: 50px; top: 215px; right: -45px;}
section.hero div.left ul {padding: 15px 0 5px 0;}
section.hero div.left span.angie-gazing {display: block; width: 20%;}
section.hero span.angie-gazing, section.hero span.angie-tagline {display: none;}
section.hero div.left span.angie-tagline {display: block; bottom: 0; right: 0; font-size: 10px; padding: 0 5px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;}
section.hero div.left span.angie-tagline span.avatar {width: 15px;}
section.hero div.right span.progress-bar {margin: 0 0 20px 0;}
	
	
section.hero div.right ul {padding: 0;}
section.hero div.right ul li span.icon {width: 25px; height: 25px; background: #FFFFFF url(../img/sandra.png) no-repeat 0 0; background-size: 25px; border: 1px solid #FFFFFF; top: -10px; right: auto; left: 10px;}
section.hero div.right ul li span.online {width: 10px; height: 10px; top: -5px; right: auto; left: -5px;}
section.hero div.right span.tagline {display: none;}
section.hero div.right iframe {margin: 0;}
section.hero div.right form .custom-checkbox + label {padding: 15px; font-size: 16px;}
section.hero div.right form ul.options li {margin: 0 0 1% 0; width: 100%; clear: both; display: block;}
section.hero div.right form {padding: 0;}
section.hero div.right form label {font-size: 20px; margin: 0 0 20px 0;}
section.hero div.right form label span.number, .acc-btn em.number {width: 30px; height: 30px; line-height: 30px; font-size: 14px;}
section.hero div.right form div.success, section.hero div.right form div.fail {padding: 20px 15px;}
section.hero div.right form div.fail {padding: 20px 15px 0 15px;}
section.hero div.right form div.success label {font-size: 16px;}
section.hero div.right form div.success label em {font-size: 14px;}
section.hero div.right form input[type="submit"] {height: 70px; font-size: 20px;}
section.hero div.right form .check {font-size: 14px!important;}
section.hero div.right span.feefo-rating {display: none;}
section.hero div.left span.feefo-rating {display: block; width: 50px; height: 41px; top: 25px;}
section.hero div.right form div.success h2, section.hero div.right form div.fail h2 {font-size: 20px; margin: 0 0 20px 0;}
	
	
section.hero div.left, section.hero div.right {padding: 30px 5%; width: 100%; background: #4267b2;}
section.hero div.right {padding: 40px 5% 30px 5%; background: #FFFFFF;}
	
	
footer {padding: 25px 0;}
}