.staw { width: 100% } .staw__holder { display: block; overflow: hidden; position: relative } .staw__roller { -webkit-transform: translateX(0); transform: translateX(0); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .staw__slide { -ms-flex-negative: 0; flex-shrink: 0 } .staw__dots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .staw__dot { width: 7px; height: 7px; border-radius: 50%; background-color: #fff; margin: 0 4px; cursor: pointer } .staw__dot--active { background-color: #000 } .staw__arrow { position: absolute; top: 0; bottom: 0; margin: auto 0; width: 12px; height: 12px; border-top: 3px solid #979797; border-left: 3px solid #979797; opacity: 1; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; cursor: pointer } .staw__arrow--disabled { opacity: 0; pointer-events: none } .staw__arrow--prev { left: 7px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .staw__arrow--next { right: 7px; -webkit-transform: rotate(135deg); transform: rotate(135deg) } .iq-header { position: fixed; left: 0; top: 0; width: 100%; padding: 15px; height: auto; z-index: 999999; text-align: center; -webkit-transition: height .3s ease .2s, -webkit-box-shadow .3s ease; transition: height .3s ease .2s, -webkit-box-shadow .3s ease; transition: box-shadow .3s ease, height .3s ease .2s; transition: box-shadow .3s ease, height .3s ease .2s, -webkit-box-shadow .3s ease } .iq-header__title { text-align: center; padding-left: 5px; font-size: 21px; line-height: 1; color: #fff; display: inline-block; margin: 0 auto } .iq-header__title>a { color: #fff; text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; font-size: 16px; font-family: Poppins, sans-serif } .iq-header__logo { width: 40px; margin-right: 5px; -webkit-transform: translateY(2px); transform: translateY(2px) } .iq-header__logo svg { fill: #fff } .iq-header--loan { background-color: #197180 } .iq-header--investments { background-color: #28bd67 } .iq-header--cards { background-color: #306bcd } .iq-header--auto { background-color: #8439bb } .iq-header--luck { background-color: #9ec336 } .iq-header--insurance { background-color: #41b0de } .iq-header--personal-finances { background-color: #ff6638 } .iq-header__open { position: absolute; left: 30px; top: 50%; margin-top: -11px; text-indent: -9999px; width: 21px; height: 23px; background-color: transparent; border: none; color: #fff; border-top: 3px solid currentColor; padding: 0; cursor: pointer; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; -webkit-animation: openButton .3s ease both; animation: openButton .3s ease both; -webkit-transform-origin: center left; transform-origin: center left } .iq-header__open:focus, .iq-header__open:hover { opacity: .5 } .iq-header__open:after, .iq-header__open:before { content: ""; height: 3px; left: 0; background-color: #fff; position: absolute } .iq-header__open:before { top: calc(50% - 3px); width: 115% } .iq-header__open:after { bottom: 0; width: 75% } .iq-header__text { font-weight: 700 } @media only screen and (max-width:768px) { .iq-header { padding: 10px } } .iq-side-menu { position: fixed; opacity: 0; left: -9999px; top: -9999px; z-index: -9999; height: 0; width: 0 } .iq-side-menu>nav { position: fixed; left: 0; top: 0; height: 100%; background-color: #fff; width: 310px; -webkit-transform: translateX(-100%); transform: translateX(-100%) } .iq-side-menu.is-visible { z-index: 100; width: 100%; height: 100%; opacity: 1; left: 0; top: 0; -webkit-animation: fadeIn .3s ease both; animation: fadeIn .3s ease both; background-color: rgba(0, 0, 0, .35) } .iq-side-menu.is-visible--inverted { z-index: 0 } .iq-side-menu.is-visible>nav { -webkit-animation: slideFromLeft .3s ease .15s both; animation: slideFromLeft .3s ease .15s both; overflow-y: auto } .iq-side-menu.is-visible .iq-side-menu__link { -webkit-animation: fadeIn .45s ease both, slideIn .45s ease both; animation: fadeIn .45s ease both, slideIn .45s ease both } .iq-side-menu.is-visible .iq-side-menu__link:first-child { -webkit-animation-delay: .08s; animation-delay: .08s } .iq-side-menu.is-visible .iq-side-menu__link:nth-child(2) { -webkit-animation-delay: .16s; animation-delay: .16s } .iq-side-menu.is-visible .iq-side-menu__link:nth-child(3) { -webkit-animation-delay: .24s; animation-delay: .24s } .iq-side-menu.is-visible .iq-side-menu__link:nth-child(4) { -webkit-animation-delay: .32s; animation-delay: .32s } .iq-side-menu.is-visible .iq-side-menu__link:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s } .iq-side-menu.is-visible .iq-side-menu__link:nth-child(6) { -webkit-animation-delay: .48s; animation-delay: .48s } .iq-side-menu.is-visible .iq-side-menu__link:nth-child(7) { -webkit-animation-delay: .56s; animation-delay: .56s } .iq-side-menu__close { position: absolute; right: 20px; top: 15px; border: none; cursor: pointer; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; width: 25px; height: 20px; overflow: hidden; background-color: transparent } .iq-side-menu__close:focus, .iq-side-menu__close:hover { opacity: .5 } .iq-side-menu__list { font-size: 13px; color: #333; margin-top: 55px } .iq-side-menu__list--sub { color: #666; font-size: 12px; font-family: Open Sans, sans-serif; max-height: 0; overflow: hidden; -webkit-transition: max-height .5s ease-in-out; transition: max-height .5s ease-in-out; font-weight: 100 } .iq-side-menu__list--sub a { color: #666 } .iq-side-menu__list--is-open { max-height: 800px } .iq-side-menu__link { display: block; font-family: Poppins, sans-serif; border-top: 1px solid #ebebeb; padding: 10px 10px 10px 20px; border-left: 6px solid #000; position: relative; text-align: left } .iq-side-menu__link--button-plus { text-align: center; width: 50px; height: 36px; display: block; position: absolute; right: 6px; top: 10px; color: #979797; font-size: 22px; font-family: Open Sans, sans-serif; border-right: 0; border-top: 0; border-bottom: 0; border-left: 1px solid #ebebeb; cursor: pointer; background-color: transparent } .iq-side-menu__link a { display: inline-block; cursor: pointer; padding: 8px 0; width: 100%; -webkit-transition: color .3s ease; transition: color .3s ease } .iq-side-menu__link>a { color: #000; font-weight: 600 } .iq-side-menu__link>a:focus, .iq-side-menu__link>a:hover { color: #666 } .iq-side-menu__link-colors--cartoes { border-left-color: #306bcd } .iq-side-menu__link-colors--cartoes a:focus, .iq-side-menu__link-colors--cartoes a:hover { color: #306bcd } .iq-side-menu__link-colors--investimentos { border-left-color: #28bd67 } .iq-side-menu__link-colors--investimentos a:focus, .iq-side-menu__link-colors--investimentos a:hover { color: #28bd67 } .iq-side-menu__link-colors--auto { border-left-color: #8439bb } .iq-side-menu__link-colors--auto a:focus, .iq-side-menu__link-colors--auto a:hover { color: #8439bb } .iq-side-menu__link-colors--seguros { border-left-color: #41b0de } .iq-side-menu__link-colors--seguros a:focus, .iq-side-menu__link-colors--seguros a:hover { color: #41b0de } .iq-side-menu__link-colors--emprestimos { border-left-color: #197180 } .iq-side-menu__link-colors--emprestimos a:focus, .iq-side-menu__link-colors--emprestimos a:hover { color: #197180 } .iq-side-menu__link-colors--sorteios { border-left-color: #9ec336 } .iq-side-menu__link-colors--sorteios a:focus, .iq-side-menu__link-colors--sorteios a:hover { color: #9ec336 } .iq-side-menu__link-colors--financas-pessoais { border-left-color: #ff6638 } .iq-side-menu__link-colors--financas-pessoais a:focus, .iq-side-menu__link-colors--financas-pessoais a:hover { color: #ff6638 } .iq-side-menu .logo__image { position: absolute; left: 30px; top: 10px; width: 45px } .iq-side-menu .logo__image img, .iq-side-menu .logo__image svg { max-width: 100% } .iq-footer { margin-top: 50px } .iq-footer a { color: #282827 } .iq-footer__container { padding-top: 50px; padding-bottom: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 12px; color: #999; width: 100%; max-width: 1280px; margin: 0 auto; border-top: 1px solid #efefef } .iq-footer__logo { width: 60px; height: 41px; -webkit-transition: opacity .3s ease; transition: opacity .3s ease } .iq-footer__logo:focus, .iq-footer__logo:hover { opacity: .75 } .iq-footer__social-item { display: inline-block; width: 25px; vertical-align: middle; margin: 0 12px } .iq-footer__social-item a { -webkit-transition: opacity .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, transform .3s ease; transition: opacity .3s ease, transform .3s ease, -webkit-transform .3s ease; display: block; text-align: center } .iq-footer__social-item a:focus, .iq-footer__social-item a:hover { opacity: .75; -webkit-transform: scale(1.05); transform: scale(1.05) } .iq-footer__social-item a>div { width: 25px; max-height: 40px; display: block } .iq-footer--dark { background-color: #3e3e3e } .iq-footer--dark .iq-footer__container { color: #fff; border-top: none } @media only screen and (max-width:600px) { .iq-footer { margin-top: 25px } .iq-footer__container { -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 25px; padding-bottom: 25px } .iq-footer__copyright { width: 100%; padding: 0 0 20px } .iq-footer__social-item:first-child { margin-left: 0 } } @media only screen and (max-width:1280px) { .iq-footer__container { padding-left: 20px; padding-right: 20px } } .container { -webkit-box-sizing: border-box; box-sizing: border-box; margin: auto; max-width: 100%; padding: 30px 12px; width: 1240px } .container--small { width: 1080px } .container--smaller { width: 838px } .container--extrasmall { width: 630px } .container--large { width: 1280px } .container--auto { width: auto } @media only screen and (max-width:768px) { .container { max-width: 95%; padding: 27px 2% } } .brand-header { position: absolute; width: 100%; z-index: 9999; left: 0; top: 0 } .brand-header__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 1280px; width: 100%; margin-left: auto; margin-right: auto } .brand-header__title { margin-right: auto; line-height: 1; padding-top: 15px; padding-bottom: 15px } .brand-header__logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: opacity .3s ease; transition: opacity .3s ease } .brand-header__logo:focus, .brand-header__logo:hover { opacity: .8 } .brand-header__icon { margin-right: 5px; height: 30px; width: 40px; fill: #fff } .brand-header__logo-text { color: #fff; font-size: 20px; font-weight: 700; text-transform: capitalize; display: inline-block; vertical-align: middle } .brand-header__social { margin-top: 2px; margin-left: 20px } .brand-header__social li { display: inline-block; margin: 0 5px; vertical-align: middle; width: 20px; height: 20px } .brand-header__social li a { -webkit-transition: opacity .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, transform .3s ease; transition: opacity .3s ease, transform .3s ease, -webkit-transform .3s ease; display: block; text-align: center; width: 100%; height: 100% } .brand-header__social li a:focus, .brand-header__social li a:hover { opacity: .75; -webkit-transform: scale(1.05); transform: scale(1.05) } .brand-header__social li img { height: 100% } .brand-header .hamburger-menu { position: relative; height: 20px; width: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0; border: 0; outline: none; cursor: pointer; z-index: 2 } .brand-header .hamburger-line { display: inline-block; height: 3px; width: 100%; background: #fff } .brand-header .hamburger-line--one { -webkit-transition: -webkit-transform .75s cubic-bezier(1, -.4, 0, 1.41); transition: -webkit-transform .75s cubic-bezier(1, -.4, 0, 1.41); transition: transform .75s cubic-bezier(1, -.4, 0, 1.41); transition: transform .75s cubic-bezier(1, -.4, 0, 1.41), -webkit-transform .75s cubic-bezier(1, -.4, 0, 1.41); width: 20px; will-change: transform } .brand-header .hamburger-line--two { width: 25px } .brand-header .hamburger-line--three { width: 13px } .brand-header .hamburger-line--three, .brand-header .hamburger-line--two { -webkit-transition: .9s cubic-bezier(.38, .52, .11, 1.2); transition: .9s cubic-bezier(.38, .52, .11, 1.2); will-change: transform, width } .brand-header.is-open .hamburger-line--one { -webkit-transform: translateX(80px); transform: translateX(80px) } .brand-header.is-open .hamburger-line--two { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .brand-header.is-open .hamburger-line--three { -webkit-transform: rotate(-45deg) translate(6px, -5px); transform: rotate(-45deg) translate(6px, -5px); width: 25px } .brand-header__menu-nav-wrapper { position: relative; width: 100%; height: 100%; z-index: 1 } .brand-header__menu-list { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100% } .brand-header__menu-sublist { max-height: 0; visibility: hidden; opacity: 0; will-change: opacity, max-height } .brand-header__menu-link { position: relative; cursor: pointer; padding: 15px 0 } .brand-header__menu-link>a, .brand-header__menu-link>button, .brand-header__menu-link>span { color: #fff; font-size: 15px; font-weight: 900; text-transform: capitalize; border: none; background: none } .brand-header__menu-link:last-child { margin-right: 0 } .brand-header__menu-link.has-children:after { content: ""; display: inline-block; position: absolute; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 2px; border-left-width: 0; border-top-width: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); will-change: transform; -webkit-transition: border .4s ease-in-out, -webkit-transform .4s ease-in-out; transition: border .4s ease-in-out, -webkit-transform .4s ease-in-out; transition: transform .4s ease-in-out, border .4s ease-in-out; transition: transform .4s ease-in-out, border .4s ease-in-out, -webkit-transform .4s ease-in-out } .brand-header__menu-sublink { -webkit-transform: translateY(-10px); transform: translateY(-10px); opacity: 0; will-change: transform, opacity; -webkit-transition: 0s cubic-bezier(.99, .01, .04, .98) .1s; transition: 0s cubic-bezier(.99, .01, .04, .98) .1s } .brand-header__menu-sublink:first-child { -webkit-transition-duration: .1s; transition-duration: .1s } .brand-header__menu-sublink:nth-child(2) { -webkit-transition-duration: .2s; transition-duration: .2s } .brand-header__menu-sublink:nth-child(3) { -webkit-transition-duration: .3s; transition-duration: .3s } .brand-header__menu-sublink:nth-child(4) { -webkit-transition-duration: .4s; transition-duration: .4s } .brand-header__menu-sublink:nth-child(5) { -webkit-transition-duration: .5s; transition-duration: .5s } .brand-header__menu-sublink:nth-child(6) { -webkit-transition-duration: .6s; transition-duration: .6s } .brand-header__menu-sublink:nth-child(7) { -webkit-transition-duration: .7s; transition-duration: .7s } .brand-header__menu-sublink:nth-child(8) { -webkit-transition-duration: .8s; transition-duration: .8s } .brand-header__menu-sublink:nth-child(9) { -webkit-transition-duration: .9s; transition-duration: .9s } .brand-header__menu-sublink:nth-child(10) { -webkit-transition-duration: 1s; transition-duration: 1s } .brand-header__menu-sublink>a { display: block; font-size: 14px; text-align: left; will-change: color; -webkit-transition: color .3s ease-in-out; transition: color .3s ease-in-out } .brand-header__menu-sublink>a:active, .brand-header__menu-sublink>a:hover { color: #9b9b9b } .brand-header--simple .brand-header__container { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .brand-header--simple .brand-header__title { margin-right: 0 } .brand-header--simple:after { display: none } @media only screen and (max-width:800px) { .brand-header.is-open { position: fixed } .brand-header.is-open .brand-header__container { overflow: hidden } .brand-header__title { position: relative; padding: 10px 0; z-index: 2 } .brand-header__logo:not(.brand-header--simple) .brand-header__logo { display: inline-block } .brand-header__icon:not(.brand-header--simple .brand-header__icon) { height: 22px; width: 32px } .brand-header__logo-text { display: none } .brand-header__social { position: absolute; top: -999999px; left: -999999px; padding-top: 10px; opacity: 0; z-index: 2; -webkit-transition: opacity .3s ease, left .01s .3s, top .01s .3s; transition: opacity .3s ease, left .01s .3s, top .01s .3s } .brand-header__social li { margin: 0 10px } .brand-header.is-open .brand-header__social { opacity: 1; top: 60px; left: -10px; -webkit-transition: opacity .3s ease .4s; transition: opacity .3s ease .4s } .brand-header__menu-nav-wrapper { overflow-y: auto; overflow-x: hidden } .brand-header__menu-nav { position: fixed; width: 100%; height: 100vh; top: 0; left: 0; padding: 120px 10px 0 20px; z-index: 1; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: opacity .3s ease, -webkit-transform .3s ease; transition: opacity .3s ease, -webkit-transform .3s ease; transition: transform .3s ease, opacity .3s ease; transition: transform .3s ease, opacity .3s ease, -webkit-transform .3s ease } .brand-header.is-open .brand-header__menu-nav { -webkit-transform: translateX(0); transform: translateX(0) } .brand-header__menu-nav:before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; z-index: 0 } .brand-header__menu-list { height: auto; padding-right: 10px; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100% } .brand-header__menu-sublist { width: 100%; font-weight: 700; -webkit-transition: opacity .2s ease-out, max-height .1s ease-out; transition: opacity .2s ease-out, max-height .1s ease-out } .brand-header__menu-link.is-active .brand-header__menu-sublist { max-height: 500px; padding-top: 20px; opacity: 1; visibility: visible; -webkit-transition: opacity .4s ease-out, max-height .3s ease-out; transition: opacity .4s ease-out, max-height .3s ease-out } .brand-header__menu-link { width: 100%; text-align: left; border-bottom: 1px solid gray; padding: 20px 0; -webkit-transform: translateY(-15px); transform: translateY(-15px); opacity: 0; will-change: transform, opacity; -webkit-transition: 0s cubic-bezier(.99, .01, .04, .98) .2s; transition: 0s cubic-bezier(.99, .01, .04, .98) .2s } .brand-header__menu-link:first-child { -webkit-transition-duration: .15s; transition-duration: .15s } .brand-header__menu-link:nth-child(2) { -webkit-transition-duration: .3s; transition-duration: .3s } .brand-header__menu-link:nth-child(3) { -webkit-transition-duration: .45s; transition-duration: .45s } .brand-header__menu-link:nth-child(4) { -webkit-transition-duration: .6s; transition-duration: .6s } .brand-header__menu-link:nth-child(5) { -webkit-transition-duration: .75s; transition-duration: .75s } .brand-header__menu-link:nth-child(6) { -webkit-transition-duration: .9s; transition-duration: .9s } .brand-header__menu-link:nth-child(7) { -webkit-transition-duration: 1.05s; transition-duration: 1.05s } .brand-header__menu-link:nth-child(8) { -webkit-transition-duration: 1.2s; transition-duration: 1.2s } .brand-header__menu-link:nth-child(9) { -webkit-transition-duration: 1.35s; transition-duration: 1.35s } .brand-header__menu-link:nth-child(10) { -webkit-transition-duration: 1.5s; transition-duration: 1.5s } .brand-header.is-open .brand-header__menu-link { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } .brand-header__menu-link:last-child { border-bottom: 0 } .brand-header__menu-link.has-children:after { top: 20px; right: 0 } .brand-header__menu-link.is-active .brand-header__menu-sublink { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } .brand-header__menu-sublink>a { padding: 15px 0; color: #a7a7a7 } .brand-header--simple .brand-header__logo-text { display: inline-block; margin-top: 3px } } @media only screen and (max-width:1280px) { .brand-header__container { padding-left: 20px; padding-right: 20px } } @media only screen and (min-width:800px) { .brand-header .hamburger-menu { display: none } .brand-header__menu-nav { display: -webkit-box; display: -ms-flexbox; display: flex } .brand-header__menu-sublist { border-radius: 5px; background-color: #fff; position: absolute; right: 0; margin-top: 10px; width: 300px; -webkit-transition: opacity .05s ease-out, max-height .15s ease-out; transition: opacity .05s ease-out, max-height .15s ease-out } .brand-header__menu-link:active .brand-header__menu-sublist, .brand-header__menu-link:focus .brand-header__menu-sublist, .brand-header__menu-link:hover .brand-header__menu-sublist { max-height: 500px; opacity: 1; visibility: visible; -webkit-transition: opacity .4s ease-out, max-height .3s ease-out; transition: opacity .4s ease-out, max-height .3s ease-out } .brand-header__menu-link>a, .brand-header__menu-link>button, .brand-header__menu-link>span { padding-left: 20px; display: block; height: 100% } .brand-header__menu-link.has-children>a, .brand-header__menu-link.has-children>span { padding-right: 30px } .brand-header__menu-link.has-children:after { top: 0; bottom: 0; margin: auto; right: 10px } .brand-header__menu-link:active:after, .brand-header__menu-link:hover:after { -webkit-transform: rotate(225deg) translate(-3px, -3px); transform: rotate(225deg) translate(-3px, -3px) } .brand-header__menu-link:focus .brand-header__menu-sublink, .brand-header__menu-link:hover .brand-header__menu-sublink { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } .brand-header__menu-sublink>a { padding: 10px 15px; color: #000 } .brand-header__menu-sublink:first-child>a { padding-top: 25px } .brand-header__menu-sublink:last-child>a { padding-bottom: 25px } } @-moz-keyframes rotation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @-o-keyframes rotation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @keyframes rotation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @-moz-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @-o-keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @-moz-keyframes slideFromLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } to { -webkit-transform: translateX(0); transform: translateX(0) } } @-webkit-keyframes slideFromLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } to { -webkit-transform: translateX(0); transform: translateX(0) } } @-o-keyframes slideFromLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } to { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes slideFromLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%) } to { -webkit-transform: translateX(0); transform: translateX(0) } } @-moz-keyframes slideIn { 0% { -webkit-transform: translateX(-40px); transform: translateX(-40px) } to { -webkit-transform: translateX(0); transform: translateX(0) } } @-webkit-keyframes slideIn { 0% { -webkit-transform: translateX(-40px); transform: translateX(-40px) } to { -webkit-transform: translateX(0); transform: translateX(0) } } @-o-keyframes slideIn { 0% { -webkit-transform: translateX(-40px); transform: translateX(-40px) } to { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes slideIn { 0% { -webkit-transform: translateX(-40px); transform: translateX(-40px) } to { -webkit-transform: translateX(0); transform: translateX(0) } } @-moz-keyframes openButton { 0% { -webkit-transform: scaleX(0); transform: scaleX(0) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @-webkit-keyframes openButton { 0% { -webkit-transform: scaleX(0); transform: scaleX(0) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @-o-keyframes openButton { 0% { -webkit-transform: scaleX(0); transform: scaleX(0) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } @keyframes openButton { 0% { -webkit-transform: scaleX(0); transform: scaleX(0) } to { -webkit-transform: scaleX(1); transform: scaleX(1) } } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } body { margin: 0 } * { box-sizing: border-box } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block } audio, canvas, progress, video { display: inline-block; vertical-align: baseline } audio:not([controls]) { display: none; height: 0 } [hidden], template { display: none } a { background: transparent; text-decoration: none; cursor: pointer } abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: 700 } dfn { font-style: italic } mark { background: #ff0; color: #000 } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sup { top: -.5em } sub { bottom: -.25em } img { border: 0 } svg:not(:root) { overflow: hidden } dl, ol, ul { margin: 0; padding: 0 } li { list-style: none } hr { box-sizing: content-box; height: 0 } pre { overflow: auto } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0 } button { overflow: visible } button, select { text-transform: none } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; -moz-appearance: button; cursor: pointer } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } input { line-height: normal } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0 } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto } input[type=search] { -webkit-appearance: textfield; -moz-appearance: textfield; box-sizing: content-box } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; -moz-appearance: none } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em } legend { border: 0; padding: 0 } textarea { overflow: auto } optgroup { font-weight: 700 } table { border-collapse: collapse; border-spacing: 0 } td, th { padding: 0 } .current-insurance-stage, .main-driver-stage, .other-owner-stage { animation: SliceIn 1s ease forwards; will-change: transform } .congratulations .container, .loading-page .container { animation: fadeIn 1s ease forwards; text-align: center; will-change: transform; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: space-evenly; justify-content: space-evenly; min-height: calc(100vh - 300px) } .fade { animation: fade .3s ease both } .all-brands__images, .animation-top-reset, .brands-hold .brands__item, .depoiment-section .staw, .discounts-box, .doubts__info, .faq__hold, .hold-video .video-help, .iq-media__list, .posts__hold, .renovation__form, .steps__list, .why-porto-auto__list, .why-porto-auto__sidebar { opacity: 0; transform: translateY(45px) } .all-brands.is-active .all-brands__images, .animation-top-to, .brands-hold.is-active .brands__item, .doubts.is-active .doubts__info, .faq.is-active .faq__hold, .hold-video.is-active .video-help, .iq-media.is-active .iq-media__list, .is-active .depoiment-section .staw, .is-active .discounts .discounts-box, .posts.is-active .posts__hold, .renovation.is-active .renovation__form, .steps.is-active .steps__list, .why-porto-auto.is-active .why-porto-auto__list, .why-porto-auto.is-active .why-porto-auto__sidebar { opacity: 1; transform: translateY(0); transition-timing-function: cubic-bezier(.72, -.01, .14, 1.03) } *, :after, :before { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none } body { overflow-x: hidden } #icons-sprite { display: none!important } img, svg { max-width: 100% } button { background-color: transparent } body, html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: Open Sans, sans-serif; font-weight: 400 } input { outline: none } .overflow-hidden { overflow: hidden } .container { margin: 0 auto; max-width: 1280px; width: 100%; padding: 0 } .container--medium { max-width: 1060px } .container--small { max-width: 950px } .container--mini { max-width: 620px } .container--flex { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: start; align-items: flex-start } h1, h2, h3, h4 { font-family: Open Sans, sans-serif; font-weight: 700 } .full { width: 100%; max-width: 100%; padding-right: 20px; padding-left: 20px; margin: 90px auto } .full--spacing { margin-top: 0; margin-bottom: 0; padding-bottom: 90px; padding-top: 90px } .full--spacing.is-sibling { padding-top: 0 } .full--no-spacing { margin-top: 0; margin-bottom: 0 } .full__title { font-size: 30px; line-height: 1.4; text-align: center; font-weight: 700; margin-bottom: 10px; color: #333 } .full--dark .full__title, .full--primary .full__title { color: #fff } .full__title--large { font-size: 40px; line-height: 1.2 } .full__subtitle { color: #666; font-size: 18px; line-height: 1.4; text-align: center } .full--dark .full__subtitle { color: #d5d5d5 } .full--primary .full__subtitle { color: #fff } .full__subtitle:not(:last-child) { margin-bottom: 70px } .full--light { background-color: #f5f7f8 } .full--white { background-color: #fff } .full--dark { margin-top: 0 } .full--dark, .full--primary { background-color: #2c3d51 } @keyframes fadeOut { 0% { opacity: 1; transform: translateY(0) } to { opacity: 0; transform: translateY(4%) } } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(4%) } to { opacity: 1; transform: translateY(0) } } @keyframes fadeInReverse { 0% { opacity: 1; transform: translateY(0) } to { opacity: 0; transform: translateY(-4%) } } @keyframes fadeAndScale { 0% { opacity: 0; transform: scale(1.2) } to { opacity: 1; transform: scale(1) } } @keyframes dotsFade { 0% { background-color: inherit } to { background-color: #2c3d51 } } @keyframes dotsFade1 { 0% { background-color: inherit } 50% { background-color: #2c3d51 } 80% { background-color: #2c3d51 } to { background-color: inherit } } @keyframes dotsFade2 { 0% { background-color: inherit } 20% { background-color: inherit } 50% { background-color: #2c3d51 } 80% { background-color: #2c3d51 } to { background-color: inherit } } @keyframes dotsFade3 { 0% { background-color: inherit } 40% { background-color: inherit } 50% { background-color: #2c3d51 } 80% { background-color: #2c3d51 } to { background-color: inherit } } @keyframes customRotation { 0% { transform: rotate(0); z-index: 0; border: 1px solid transparent } 10%, 25% { z-index: -1 } 26% { z-index: 1 } to { z-index: 0; transform: rotate(359deg); border-color: transparent } } @keyframes fadeInNavigation { 0% { opacity: 0; transform: translateY(-45%); visibility: hidden } to { opacity: 1; visibility: visible; transform: translateY(-50%) } } @keyframes SliceIn { 0% { opacity: 0; transform: translateX(2%); visibility: hidden } to { opacity: 1; transform: translateX(0); visibility: visible } } @keyframes SliceInY { 0% { opacity: 0; transform: translateY(2%); visibility: hidden } to { transform: translateY(0); visibility: visible; opacity: 1 } } @keyframes MegaSliceInY { 0% { opacity: 0; transform: translateY(20%); visibility: hidden } to { opacity: 1; transform: translateY(0); visibility: visible } } @keyframes SliceInBrutalY { 0% { opacity: 0; transform: translateY(-100%); visibility: hidden } to { opacity: 1; transform: translateY(0); visibility: visible } } @keyframes SliceInBrutalBottomTopY { 0% { opacity: 0; transform: translateY(100%); visibility: hidden } to { opacity: 1; transform: translateY(0); visibility: visible } } @keyframes SliceInBrutalBottomTopYRemove { 0% { opacity: 1; transform: translateY(0); visibility: visible } to { opacity: 0; transform: translateY(100%); visibility: hidden } } @keyframes SliceInBrutalLeftRightX { 0% { opacity: 0; transform: translateX(-100%); visibility: hidden } to { opacity: 1; transform: translateX(0); visibility: visible } } @keyframes SliceInBrutalLeftRightXRemove { 0% { opacity: 1; transform: translateX(0); visibility: visible } to { opacity: 0; transform: translateX(-100%); visibility: hidden } } @keyframes SliceInBrutalRightLeftX { 0% { opacity: 0; transform: translateX(50%) } to { opacity: 1; transform: translateX(0) } } @keyframes SliceInBrutalRightLeftXRemove { 0% { opacity: 1; transform: translateX(0); visibility: visible } to { opacity: 0; transform: translateX(100%); visibility: hidden } } @keyframes borderTransition { 0% { transform: rotate(0deg) } to { transform: rotate(1turn) } } @keyframes fade { 0% { opacity: 0 } to { opacity: 1 } } @keyframes curtain { 0% { transform: translateY(100%) } to { transform: translateY(0) } } @keyframes check { 0% { opacity: 0; width: 0; height: 0 } 50% { opacity: 1; width: 0; height: 10px } to { width: 20px; height: 10px } } .car-search { z-index: 2; display: -ms-flexbox; display: flex } .car-search select { height: 64px } .car-search .select-highlight .-highlighted { background: none; color: #2c3d51; font-weight: 700 } .car-search .Select-option.is-focused .select-highlight { color: #2c3d51 } .car-search .Select { width: 73.5%; margin-left: auto } .car-search .box-radio__error { font-size: 12px; position: absolute; top: 100%; right: 0; color: #f52c4e; border-top: 2px solid; padding-top: 5px; width: 73.5% } .car-search .input-field:not(.radio-field) { margin-top: 0 } .car-search .Select { position: relative } .car-search .Select input::-webkit-contacts-auto-fill-button, .car-search .Select input::-webkit-credentials-auto-fill-button { display: none!important } .car-search .Select input::-ms-clear, .car-search .Select input::-ms-reveal { display: none!important } .car-search .Select, .car-search .Select div, .car-search .Select input, .car-search .Select span { box-sizing: border-box } .car-search .Select>.Select-control { background-color: #fff; padding: 13px 10px 10px } .car-search .Select.is-disabled .Select-arrow-zone { cursor: default; pointer-events: none; opacity: .35 } .car-search .Select.is-disabled>.Select-control { cursor: not-allowed } .car-search .Select.is-disabled>.Select-control:hover { box-shadow: none } .car-search .Select.is-open>.Select-control { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: #fff } .car-search .Select.is-open>.Select-control .Select-arrow { top: -2px; border-color: transparent transparent #999; border-width: 0 5px 5px } .car-search .Select.is-searchable.is-focused:not(.is-open)>.Select-control, .car-search .Select.is-searchable.is-open>.Select-control { cursor: text } .car-search .Select.is-focused>.Select-control { background: #fff } .car-search .Select.is-focused:not(.is-open)>.Select-control { border-color: #007eff; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 3px rgba(0, 126, 255, .1); background: #fff } .car-search .Select.has-value.is-clearable.Select--single>.Select-control .Select-value { padding-right: 42px } .car-search .Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label, .car-search .Select.has-value.Select--single>.Select-control .Select-value .Select-value-label { color: #999 } .car-search .Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label, .car-search .Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label { cursor: pointer; text-decoration: none } .car-search .Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:focus, .car-search .Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:hover, .car-search .Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label:focus, .car-search .Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label:hover { color: #007eff; outline: none; text-decoration: underline } .car-search .Select.has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:focus, .car-search .Select.has-value.Select--single>.Select-control .Select-value a.Select-value-label:focus { background: #fff } .car-search .Select.has-value.is-pseudo-focused .Select-input { opacity: 0 } .car-search .Select.is-open .Select-arrow, .car-search .Select .Select-arrow-zone:hover>.Select-arrow { border-top-color: #666 } .car-search .Select.Select--rtl { direction: rtl; text-align: right } .car-search .Select-control { background-color: #fff; border-radius: 2px; border: 1px solid #d4dcdf; color: #333; cursor: default; display: table; border-spacing: 0; border-collapse: separate; height: 64px; outline: none; overflow: hidden; position: relative; width: 100% } .car-search .has-value .Select-control { border-color: #16c3da } .car-search .Select-control:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, .06) } .car-search .Select-control .Select-input:focus { outline: none; background: #fff } .car-search .Select--single>.Select-control .Select-value, .car-search .Select-placeholder { background-color: #fff; bottom: 0; color: #aaa; left: 0; line-height: 34px; padding: 23px 10px 10px; position: absolute; right: 0; top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .car-search .Select.is-disabled .Select-placeholder { background-color: #f7f7f7 } .car-search .Select-input { height: 34px; padding-left: 10px; padding-right: 10px; vertical-align: middle } .car-search .Select-input>input { width: 100%; background: none transparent; border: 0 none; box-shadow: none; cursor: default; display: inline-block; font-size: inherit; margin: 0; outline: none; line-height: 17px; padding: 8px 0 12px; -webkit-appearance: none } .car-search .is-focused .Select-input>input { cursor: text } .car-search .has-value.is-pseudo-focused .Select-input { opacity: 0 } .car-search .Select-control:not(.is-searchable)>.Select-input { outline: none } .car-search .Select-loading-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 16px } .car-search .Select-loading { animation: Select-animation-spin .4s infinite linear; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid #ccc; border-right-color: #333; display: inline-block; position: relative; vertical-align: middle } .car-search .Select-clear-zone { animation: Select-animation-fadeIn .2s; color: #999; cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 17px } .car-search .Select-clear-zone:hover { color: #d0021b } .car-search .Select-clear { display: inline-block; font-size: 18px; line-height: 1 } .car-search .Select--multi .Select-clear-zone { width: 17px } .car-search .Select-arrow-zone { cursor: pointer; display: table-cell; position: relative; text-align: center; vertical-align: middle; width: 25px; padding-right: 5px } .car-search .Select--rtl .Select-arrow-zone { padding-right: 0; padding-left: 5px } .car-search .Select-arrow { border-color: #999 transparent transparent; border-style: solid; border-width: 5px 5px 2.5px; display: inline-block; height: 0; width: 0; position: relative } .car-search .Select-control>:last-child { padding-right: 5px } .car-search .Select--multi .Select-multi-value-wrapper { display: inline-block } .car-search .Select .Select-aria-only { position: absolute; display: inline-block; height: 1px; width: 1px; margin: -1px; clip: rect(0, 0, 0, 0); overflow: hidden; float: left } .car-search .Select-menu-outer { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: #fff; border: 1px solid #d4dcdf; border-top-color: #e6e6e6; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); box-sizing: border-box; margin-top: -1px; max-height: 200px; position: absolute; top: 100%; width: 100%; z-index: 1; -webkit-overflow-scrolling: touch } .car-search .Select-menu { max-height: 198px; overflow-y: auto } .car-search .Select-option { box-sizing: border-box; background-color: #fff; color: #666; cursor: pointer; display: block; padding: 8px 10px } .car-search .Select-option:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px } .car-search .Select-option.is-selected { background-color: #f5faff; background-color: rgba(0, 126, 255, .04); color: #333 } .car-search .Select-option.is-focused { background-color: #ebf5ff; background-color: rgba(0, 126, 255, .08); color: #333 } .car-search .Select-option.is-disabled { color: #ccc; cursor: default } .car-search .Select-noresults { box-sizing: border-box; color: #999; cursor: default; display: block; padding: 8px 10px } .car-search .Select-input { color: #888 } .car-search .Select--multi .Select-input { vertical-align: middle; margin-left: 10px; padding: 0 } .car-search .Select--multi.Select--rtl .Select-input { margin-left: 0; margin-right: 10px } .car-search .Select--multi.has-value .Select-input { margin-left: 5px } .car-search .Select--multi .Select-value { background-color: #ebf5ff; background-color: rgba(0, 126, 255, .08); border-radius: 2px; border: 1px solid #c2e0ff; border: 1px solid rgba(0, 126, 255, .24); color: #007eff; display: inline-block; font-size: .9em; line-height: 1.4; margin-left: 5px; margin-top: 5px; vertical-align: top } .car-search .Select--multi .Select-value-icon, .car-search .Select--multi .Select-value-label { display: inline-block; vertical-align: middle } .car-search .Select--multi .Select-value-label { border-bottom-right-radius: 2px; border-top-right-radius: 2px; cursor: default; padding: 2px 5px } .car-search .Select--multi a.Select-value-label { color: #007eff; cursor: pointer; text-decoration: none } .car-search .Select--multi a.Select-value-label:hover { text-decoration: underline } .car-search .Select--multi .Select-value-icon { cursor: pointer; border-bottom-left-radius: 2px; border-top-left-radius: 2px; border-right: 1px solid #c2e0ff; border-right: 1px solid rgba(0, 126, 255, .24); padding: 1px 5px 3px } .car-search .Select--multi .Select-value-icon:focus, .car-search .Select--multi .Select-value-icon:hover { background-color: #d8eafd; background-color: rgba(0, 113, 230, .08); color: #0071e6 } .car-search .Select--multi .Select-value-icon:active { background-color: #c2e0ff; background-color: rgba(0, 126, 255, .24) } .car-search .Select--multi.Select--rtl .Select-value { margin-left: 0; margin-right: 5px } .car-search .Select--multi.Select--rtl .Select-value-icon { border-right: none; border-left: 1px solid #c2e0ff; border-left: 1px solid rgba(0, 126, 255, .24) } .car-search .Select--multi.is-disabled .Select-value { background-color: #fcfcfc; border: 1px solid #e3e3e3; color: #333 } .car-search .Select--multi.is-disabled .Select-value-icon { cursor: not-allowed; border-right: 1px solid #e3e3e3 } .car-search .Select--multi.is-disabled .Select-value-icon:active, .car-search .Select--multi.is-disabled .Select-value-icon:focus, .car-search .Select--multi.is-disabled .Select-value-icon:hover { background-color: #fcfcfc } @keyframes Select-animation-fadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes Select-animation-spin { to { transform: rotate(1turn) } } .animated-wrapper.on { opacity: 1; transform: translateY(0) } .animated-wrapper.left-slide--off { transform: translateZ(0) } .animated-wrapper.left-slide--on { opacity: 1; transform: translateZ(0) } .badges { display: -ms-flexbox; display: flex } .badges__item { background-color: #fff; border: 1px solid #2c3d51; border-radius: 15px; color: #2c3d51; display: inline-block; padding: 1px 9px; font-size: 14px; text-align: center } .badges__item:not(:last-child) { margin-right: 8px } .badges__item.disabled { border-color: #d4dcdf; color: #d4dcdf } .box { border-radius: 5px; padding: 15px } .box.-shadow { box-shadow: 0 2px 15px rgba(0, 0, 0, .1) } .box.-big-shadow { box-shadow: 0 7px 19px rgba(0, 0, 0, .1) } .box-vehicle-usage { margin: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100% } .box-vehicle-usage>.main-text { width: 100% } .box-large { margin-top: 15px; width: 100% } .box-button-radio, .box-large { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .box-button-radio { -ms-flex-align: center; align-items: center } .box-button-radio>.main-text { margin-bottom: 15px; width: 100% } .box-button-radio>.radio-button:last-child { margin-left: 30px } .box-roommate-gender>.main-text, .box-roommate>.main-text { margin-bottom: 20px } .box-filter { margin: 20px 0; padding-bottom: 20px } .box-filter:not(.collapsed) { height: 45px; overflow-y: hidden } .box-filter__title { color: #333; font-size: 16px; font-weight: 700; line-height: 22px; position: relative; cursor: pointer } .box-filter__title:after { content: ""; display: block; border-left: 2px solid #2c3d51; border-bottom: 2px solid #2c3d51; position: absolute; transition: transform .5s cubic-bezier(1, -.49, .31, 1.65); transform: translate3d(0, -50%, 0) rotate(-45deg); right: 6px; top: 50%; height: 10px; width: 10px } .collapsed .box-filter__title:after { transform: translate3d(0, calc(-50% + 5px), 0) rotate(135deg) } .box-filter__title>.info { background-color: #16c3d9; border-radius: 50%; color: #fff; display: inline-block; text-align: center; line-height: 18px; font-size: 10px; font-weight: 700; margin-left: 8px; transform: translateY(-2px); height: 18px; width: 18px } .box-filter__subtitle { color: #333; font-size: 14px; font-weight: 700; line-height: 20px; margin-bottom: 10px; margin-top: 20px; height: 20px; width: 300px } .box-filter__item { opacity: 0; transition: opacity .5s ease } .collapsed .box-filter__item { opacity: 1 } .box-small-fields { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .box-titles { padding-left: 30px; position: relative; margin-left: auto; margin-right: auto; width: 100% } .breadcrumb { position: absolute; top: -28px } .breadcrumb>.item { display: inline; font-weight: 700; font-size: 12px } .breadcrumb>.item:not(:last-child) { margin-right: 20px; border-bottom: 1px solid #16c3d9; color: #16c3d9; cursor: pointer } .breadcrumb>.item:not(:last-child):after { content: ""; border-right: 1px solid #666; border-bottom: 1px solid #666; display: inline-block; transform: translate3d(5px, -1px, 0) rotate(-45deg); position: absolute; top: 50%; height: 6px; width: 6px } .breadcrumb>.item:last-child { color: #666 } .btn { -ms-flex-align: center; align-items: center; border: 1px solid; display: -ms-flexbox; display: flex; font-weight: 700; height: 58px; max-width: 280px; padding-left: 10px; padding-right: 10px; transition: background .3s, color .3s, border .3s; width: auto; -ms-flex-pack: center; justify-content: center; margin-left: auto; margin-right: auto; position: relative; width: 100%; outline: none; } .btn:not(.-square):not(.no-radius) { border-radius: 100px } .btn.has-icon>.icon { width: 30px; height: 30px; margin-right: 10px; display: inline-block; vertical-align: middle; fill: #fff } .btn.-small { height: 30px; max-width: 70px } .btn.-large, .btn.-small { font-size: 14px; font-weight: inherit } .btn.-large { height: 66px; max-width: 90px } .btn.-square { border-radius: 4px } .btn.no-radius { border-radius: 0 } .btn:disabled { background-color: #eee; border-color: #eee; color: #ccc; cursor: not-allowed } .btn.loading { overflow: auto } .btn.loading:after { animation: loading 1s linear infinite; border-radius: 100%; border: 4px solid rgba(61, 42, 155, .4); border-right-color: #2c3d51; content: ""; position: absolute; right: 10px; transform-box: fill-box; height: 24px; width: 24px } .products-cards__item .btn.loading:before { background-color: #2c3d51; content: ""; height: 100%; left: 0; top: 0; width: 100%; position: absolute } .products-cards__item .btn.loading:after { animation: loading 1s linear infinite, loading-slide .8s cubic-bezier(.72, -.01, .14, 1.03) forwards; border: 4px solid #a941f5; border-right-color: #2c3d51; right: inherit; left: 50%; opacity: 1 } .btn.-primary:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-primary:not(:disabled):not(.-outline) { background-color: #2c3d51; border-color: #2c3d51; color: #fff } .btn.-primary:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-primary:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #2b1d6d; border-color: #2b1d6d } .btn.-primary:not(:disabled):not(.-outline).-darken { background-color: #2b1d6d; border-color: #2b1d6d; color: #fff } .btn.-primary:not(:disabled):not(.-outline).-darken:focus, .btn.-primary:not(:disabled):not(.-outline).-darken:hover { background-color: #342484; border-color: #342484 } .btn.-primary:not(:disabled).-outline { background-color: transparent; border-color: #2c3d51; color: #2c3d51 } .btn.-primary:not(:disabled).-outline .icon { stroke: #2c3d51 } .btn.-primary:not(:disabled).-outline:focus, .btn.-primary:not(:disabled).-outline:hover { background-color: #2c3d51; color: #fff } .btn.-primary:not(:disabled).-outline:focus .icon, .btn.-primary:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-primary:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-primary:not(:disabled).-outline.-no-border:focus, .btn.-primary:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #2c3d51 } .btn.-primary-dark:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-primary-dark:not(:disabled):not(.-outline) { background-color: #2c3d51; border-color: #2c3d51; color: #fff } .btn.-primary-dark:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-primary-dark:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #2b1d6d; border-color: #2b1d6d } .btn.-primary-dark:not(:disabled):not(.-outline).-darken { background-color: #2b1d6d; border-color: #2b1d6d; color: #fff } .btn.-primary-dark:not(:disabled):not(.-outline).-darken:focus, .btn.-primary-dark:not(:disabled):not(.-outline).-darken:hover { background-color: #342484; border-color: #342484 } .btn.-primary-dark:not(:disabled).-outline { background-color: transparent; border-color: #2c3d51; color: #2c3d51 } .btn.-primary-dark:not(:disabled).-outline .icon { stroke: #2c3d51 } .btn.-primary-dark:not(:disabled).-outline:focus, .btn.-primary-dark:not(:disabled).-outline:hover { background-color: #2c3d51; color: #fff } .btn.-primary-dark:not(:disabled).-outline:focus .icon, .btn.-primary-dark:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-primary-dark:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-primary-dark:not(:disabled).-outline.-no-border:focus, .btn.-primary-dark:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #2c3d51 } .btn.-secondary:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-secondary:not(:disabled):not(.-outline) { background-color: #a941f5; border-color: #a941f5; color: #fff } .btn.-secondary:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-secondary:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #7c0bce; border-color: #7c0bce } .btn.-secondary:not(:disabled):not(.-outline).-darken { background-color: #7c0bce; border-color: #7c0bce; color: #fff } .btn.-secondary:not(:disabled):not(.-outline).-darken:focus, .btn.-secondary:not(:disabled):not(.-outline).-darken:hover { background-color: #9515f3; border-color: #9515f3 } .btn.-secondary:not(:disabled).-outline { background-color: transparent; border-color: #a941f5; color: #a941f5 } .btn.-secondary:not(:disabled).-outline .icon { stroke: #a941f5 } .btn.-secondary:not(:disabled).-outline:focus, .btn.-secondary:not(:disabled).-outline:hover { background-color: #a941f5; color: #fff } .btn.-secondary:not(:disabled).-outline:focus .icon, .btn.-secondary:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-secondary:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-secondary:not(:disabled).-outline.-no-border:focus, .btn.-secondary:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #a941f5 } .btn.-error:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-error:not(:disabled):not(.-outline) { background-color: #f52c4e; border-color: #f52c4e; color: #fff } .btn.-error:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-error:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #c10928; border-color: #c10928 } .btn.-error:not(:disabled):not(.-outline).-darken { background-color: #c10928; border-color: #c10928; color: #fff } .btn.-error:not(:disabled):not(.-outline).-darken:focus, .btn.-error:not(:disabled):not(.-outline).-darken:hover { background-color: #eb0b31; border-color: #eb0b31 } .btn.-error:not(:disabled).-outline { background-color: transparent; border-color: #f52c4e; color: #f52c4e } .btn.-error:not(:disabled).-outline .icon { stroke: #f52c4e } .btn.-error:not(:disabled).-outline:focus, .btn.-error:not(:disabled).-outline:hover { background-color: #f52c4e; color: #fff } .btn.-error:not(:disabled).-outline:focus .icon, .btn.-error:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-error:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-error:not(:disabled).-outline.-no-border:focus, .btn.-error:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #f52c4e } .btn.-tertiary:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-tertiary:not(:disabled):not(.-outline) { background-color: #16c3d9; border-color: #16c3d9; color: #fff } .btn.-tertiary:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-tertiary:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #0f8898; border-color: #0f8898 } .btn.-tertiary:not(:disabled):not(.-outline).-darken { background-color: #0f8898; border-color: #0f8898; color: #fff } .btn.-tertiary:not(:disabled):not(.-outline).-darken:focus, .btn.-tertiary:not(:disabled):not(.-outline).-darken:hover { background-color: #13a6b8; border-color: #13a6b8 } .btn.-tertiary:not(:disabled).-outline { background-color: transparent; border-color: #16c3d9; color: #16c3d9 } .btn.-tertiary:not(:disabled).-outline .icon { stroke: #16c3d9 } .btn.-tertiary:not(:disabled).-outline:focus, .btn.-tertiary:not(:disabled).-outline:hover { background-color: #16c3d9; color: #fff } .btn.-tertiary:not(:disabled).-outline:focus .icon, .btn.-tertiary:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-tertiary:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-tertiary:not(:disabled).-outline.-no-border:focus, .btn.-tertiary:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #16c3d9 } .btn.-title:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-title:not(:disabled):not(.-outline) { background-color: #333; border-color: #333; color: #fff } .btn.-title:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-title:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #242424; border-color: #242424 } .btn.-title:not(:disabled):not(.-outline).-darken { background-color: #242424; border-color: #242424; color: #fff } .btn.-title:not(:disabled):not(.-outline).-darken:focus, .btn.-title:not(:disabled):not(.-outline).-darken:hover { background-color: #2b2b2b; border-color: #2b2b2b } .btn.-title:not(:disabled).-outline { background-color: transparent; border-color: #333; color: #333 } .btn.-title:not(:disabled).-outline .icon { stroke: #333 } .btn.-title:not(:disabled).-outline:focus, .btn.-title:not(:disabled).-outline:hover { background-color: #333; color: #fff } .btn.-title:not(:disabled).-outline:focus .icon, .btn.-title:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-title:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-title:not(:disabled).-outline.-no-border:focus, .btn.-title:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #333 } .btn.-text:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-text:not(:disabled):not(.-outline) { background-color: #666; border-color: #666; color: #fff } .btn.-text:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-text:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #474747; border-color: #474747 } .btn.-text:not(:disabled):not(.-outline).-darken { background-color: #474747; border-color: #474747; color: #fff } .btn.-text:not(:disabled):not(.-outline).-darken:focus, .btn.-text:not(:disabled):not(.-outline).-darken:hover { background-color: #575757; border-color: #575757 } .btn.-text:not(:disabled).-outline { background-color: transparent; border-color: #666; color: #666 } .btn.-text:not(:disabled).-outline .icon { stroke: #666 } .btn.-text:not(:disabled).-outline:focus, .btn.-text:not(:disabled).-outline:hover { background-color: #666; color: #fff } .btn.-text:not(:disabled).-outline:focus .icon, .btn.-text:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-text:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-text:not(:disabled).-outline.-no-border:focus, .btn.-text:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #666 } .btn.-textLight:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-textLight:not(:disabled):not(.-outline) { background-color: #444; border-color: #444; color: #fff } .btn.-textLight:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-textLight:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #303030; border-color: #303030 } .btn.-textLight:not(:disabled):not(.-outline).-darken { background-color: #303030; border-color: #303030; color: #fff } .btn.-textLight:not(:disabled):not(.-outline).-darken:focus, .btn.-textLight:not(:disabled):not(.-outline).-darken:hover { background-color: #3a3a3a; border-color: #3a3a3a } .btn.-textLight:not(:disabled).-outline { background-color: transparent; border-color: #444; color: #444 } .btn.-textLight:not(:disabled).-outline .icon { stroke: #444 } .btn.-textLight:not(:disabled).-outline:focus, .btn.-textLight:not(:disabled).-outline:hover { background-color: #444; color: #fff } .btn.-textLight:not(:disabled).-outline:focus .icon, .btn.-textLight:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-textLight:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-textLight:not(:disabled).-outline.-no-border:focus, .btn.-textLight:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #444 } .btn.-textBold:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-textBold:not(:disabled):not(.-outline) { background-color: #4e4e4e; border-color: #4e4e4e; color: #fff } .btn.-textBold:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-textBold:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #373737; border-color: #373737 } .btn.-textBold:not(:disabled):not(.-outline).-darken { background-color: #373737; border-color: #373737; color: #fff } .btn.-textBold:not(:disabled):not(.-outline).-darken:focus, .btn.-textBold:not(:disabled):not(.-outline).-darken:hover { background-color: #424242; border-color: #424242 } .btn.-textBold:not(:disabled).-outline { background-color: transparent; border-color: #4e4e4e; color: #4e4e4e } .btn.-textBold:not(:disabled).-outline .icon { stroke: #4e4e4e } .btn.-textBold:not(:disabled).-outline:focus, .btn.-textBold:not(:disabled).-outline:hover { background-color: #4e4e4e; color: #fff } .btn.-textBold:not(:disabled).-outline:focus .icon, .btn.-textBold:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-textBold:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-textBold:not(:disabled).-outline.-no-border:focus, .btn.-textBold:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #4e4e4e } .btn.-placeholder:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-placeholder:not(:disabled):not(.-outline) { background-color: #bbc3c6; border-color: #bbc3c6; color: #fff } .btn.-placeholder:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-placeholder:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #7c8c91; border-color: #7c8c91 } .btn.-placeholder:not(:disabled):not(.-outline).-darken { background-color: #7c8c91; border-color: #7c8c91; color: #fff } .btn.-placeholder:not(:disabled):not(.-outline).-darken:focus, .btn.-placeholder:not(:disabled):not(.-outline).-darken:hover { background-color: #9ca7ac; border-color: #9ca7ac } .btn.-placeholder:not(:disabled).-outline { background-color: transparent; border-color: #bbc3c6; color: #bbc3c6 } .btn.-placeholder:not(:disabled).-outline .icon { stroke: #bbc3c6 } .btn.-placeholder:not(:disabled).-outline:focus, .btn.-placeholder:not(:disabled).-outline:hover { background-color: #bbc3c6; color: #fff } .btn.-placeholder:not(:disabled).-outline:focus .icon, .btn.-placeholder:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-placeholder:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-placeholder:not(:disabled).-outline.-no-border:focus, .btn.-placeholder:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #bbc3c6 } .btn.-disabled:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-disabled:not(:disabled):not(.-outline) { background-color: #d4dcdf; border-color: #d4dcdf; color: #fff } .btn.-disabled:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-disabled:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #899fa7; border-color: #899fa7 } .btn.-disabled:not(:disabled):not(.-outline).-darken { background-color: #899fa7; border-color: #899fa7; color: #fff } .btn.-disabled:not(:disabled):not(.-outline).-darken:focus, .btn.-disabled:not(:disabled):not(.-outline).-darken:hover { background-color: #afbec3; border-color: #afbec3 } .btn.-disabled:not(:disabled).-outline { background-color: transparent; border-color: #d4dcdf; color: #d4dcdf } .btn.-disabled:not(:disabled).-outline .icon { stroke: #d4dcdf } .btn.-disabled:not(:disabled).-outline:focus, .btn.-disabled:not(:disabled).-outline:hover { background-color: #d4dcdf; color: #fff } .btn.-disabled:not(:disabled).-outline:focus .icon, .btn.-disabled:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-disabled:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-disabled:not(:disabled).-outline.-no-border:focus, .btn.-disabled:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #d4dcdf } .btn.-white:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-white:not(:disabled):not(.-outline) { background-color: #f7f7f7; border-color: #f7f7f7; color: #2c3d51 } .btn.-white:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-white:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #adadad; border-color: #adadad } .btn.-white:not(:disabled):not(.-outline).-darken { background-color: #adadad; border-color: #adadad; color: #fff } .btn.-white:not(:disabled):not(.-outline).-darken:focus, .btn.-white:not(:disabled):not(.-outline).-darken:hover { background-color: #d2d2d2; border-color: #d2d2d2 } .btn.-white:not(:disabled).-outline { background-color: transparent; border-color: #f7f7f7; color: #f7f7f7 } .btn.-white:not(:disabled).-outline .icon { stroke: #f7f7f7 } .btn.-white:not(:disabled).-outline:focus, .btn.-white:not(:disabled).-outline:hover { background-color: #f7f7f7; color: #fff } .btn.-white:not(:disabled).-outline:focus .icon, .btn.-white:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-white:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-white:not(:disabled).-outline.-no-border:focus, .btn.-white:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #f7f7f7 } .btn.-lightGray:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-lightGray:not(:disabled):not(.-outline) { background-color: #f5f7f8; border-color: #f5f7f8; color: #fff } .btn.-lightGray:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-lightGray:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #9eb1bb; border-color: #9eb1bb } .btn.-lightGray:not(:disabled):not(.-outline).-darken { background-color: #9eb1bb; border-color: #9eb1bb; color: #fff } .btn.-lightGray:not(:disabled):not(.-outline).-darken:focus, .btn.-lightGray:not(:disabled):not(.-outline).-darken:hover { background-color: #cad4da; border-color: #cad4da } .btn.-lightGray:not(:disabled).-outline { background-color: transparent; border-color: #f5f7f8; color: #f5f7f8 } .btn.-lightGray:not(:disabled).-outline .icon { stroke: #f5f7f8 } .btn.-lightGray:not(:disabled).-outline:focus, .btn.-lightGray:not(:disabled).-outline:hover { background-color: #f5f7f8; color: #fff } .btn.-lightGray:not(:disabled).-outline:focus .icon, .btn.-lightGray:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-lightGray:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-lightGray:not(:disabled).-outline.-no-border:focus, .btn.-lightGray:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #f5f7f8 } .btn.-porto:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-porto:not(:disabled):not(.-outline) { background-color: #5378cf; border-color: #5378cf; color: #fff } .btn.-porto:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-porto:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #2c4e9f; border-color: #2c4e9f } .btn.-porto:not(:disabled):not(.-outline).-darken { background-color: #2c4e9f; border-color: #2c4e9f; color: #fff } .btn.-porto:not(:disabled):not(.-outline).-darken:focus, .btn.-porto:not(:disabled):not(.-outline).-darken:hover { background-color: #365fc1; border-color: #365fc1 } .btn.-porto:not(:disabled).-outline { background-color: transparent; border-color: #5378cf; color: #5378cf } .btn.-porto:not(:disabled).-outline .icon { stroke: #5378cf } .btn.-porto:not(:disabled).-outline:focus, .btn.-porto:not(:disabled).-outline:hover { background-color: #5378cf; color: #fff } .btn.-porto:not(:disabled).-outline:focus .icon, .btn.-porto:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-porto:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-porto:not(:disabled).-outline.-no-border:focus, .btn.-porto:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #5378cf } .btn.-sematic:not(:disabled) .icon { width: 25px; height: 25px; margin-right: 12px; transition: stroke .3s } .btn.-sematic:not(:disabled):not(.-outline) { background-color: #ff4848; border-color: #ff4848; color: #fff } .btn.-sematic:not(:disabled):not(.-outline):focus:not(.no-hover), .btn.-sematic:not(:disabled):not(.-outline):hover:not(.no-hover) { background-color: #e50000; border-color: #e50000 } .btn.-sematic:not(:disabled):not(.-outline).-darken { background-color: #e50000; border-color: #e50000; color: #fff } .btn.-sematic:not(:disabled):not(.-outline).-darken:focus, .btn.-sematic:not(:disabled):not(.-outline).-darken:hover { background-color: #ff1717; border-color: #ff1717 } .btn.-sematic:not(:disabled).-outline { background-color: transparent; border-color: #ff4848; color: #ff4848 } .btn.-sematic:not(:disabled).-outline .icon { stroke: #ff4848 } .btn.-sematic:not(:disabled).-outline:focus, .btn.-sematic:not(:disabled).-outline:hover { background-color: #ff4848; color: #fff } .btn.-sematic:not(:disabled).-outline:focus .icon, .btn.-sematic:not(:disabled).-outline:hover .icon { stroke: #fff } .btn.-sematic:not(:disabled).-outline.-no-border { border-color: transparent } .btn.-sematic:not(:disabled).-outline.-no-border:focus, .btn.-sematic:not(:disabled).-outline.-no-border:hover { background-color: transparent; color: #ff4848 } .btn-link { color: #2c3d51; font-size: 14px; font-weight: 700; -ms-flex-align: center; align-items: center; border-radius: 100px; border: 0; display: -ms-flexbox; display: flex; max-width: 280px; margin-left: auto; margin-right: auto; height: 50px; width: 100%; -ms-flex-pack: center; justify-content: center; position: relative; transition: color .3s } .btn-link:hover { color: #a941f5 } .btn-link.-reverse { color: #fff } .link { color: #2c3d51; transition: opacity .5s ease; border: none } .link:hover { opacity: .7 } .btn-back { border: 0; border-left: 2px solid #16c3d9; border-bottom: 2px solid #16c3d9; position: absolute; left: 0; top: 49%; transform: translateY(-50%) rotate(45deg); height: 15px; width: 15px } .btn-back.-right { color: transparent; font-size: 0; position: inherit; transform: rotate(-135deg); margin-left: auto; margin-right: 6px; height: 30px; width: 30px } .button-options { color: #fff; margin-left: auto; border: none; font-size: 14px; font-weight: 600; text-transform: uppercase; position: relative; overflow: hidden } .button-options>.icon { width: 26px; height: 26px; stroke: #fff; display: inline-block; vertical-align: middle; margin-right: 10px; transition: transform .3s ease } .button-options:after { content: ""; bottom: 0; height: 5px; width: 100%; background-color: #a941f5; left: 0; position: absolute; transform: translateY(5px); transition: transform .3s ease } .button-options:focus:after, .button-options:hover:after { transform: translateY(0) } .button-options:focus>.icon, .button-options:hover>.icon { transform: rotate(90deg) } .back-textarrow { font-size: 14px; font-weight: 600; position: relative; padding-left: 30px } .back-textarrow:after, .back-textarrow:before { position: absolute; left: 0; top: 50%; content: "" } .back-textarrow:before { height: 2px; margin-left: 5px; margin-top: -1px; background-color: #2c3d51; width: 15px } .back-textarrow:after { margin-top: -4px; margin-left: 5px; width: 8px; height: 8px; border: 2px solid #2c3d51; transform: rotate(45deg); border-right: none; border-top: none } .back-arrow { font-size: 14px; font-weight: 600; position: relative; padding-left: 25px } .back-arrow:after, .back-arrow:before { position: absolute; left: 0; top: 50%; content: "" } .back-arrow:before { height: 2px; margin-top: -1px; background-color: #2c3d51; width: 15px } .back-arrow:after { margin-top: -4px; width: 8px; height: 8px; border: 2px solid #2c3d51; transform: rotate(45deg); border-right: none; border-top: none } .motion-button-icon { background-color: #16c3d9; border-radius: 8px; border: transparent; color: #fff; font-weight: 700; margin: 0; max-width: inherit; min-width: inherit; padding: 16px 40px; width: auto; -ms-flex-align: center; align-items: center; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; position: relative } .motion-button-icon[disabled] { opacity: .6; cursor: no-drop } .motion-button-icon:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; transform: translateX(-100%); background-color: #129cae; transition: transform .38s cubic-bezier(.72, -.01, .14, 1.03) } .motion-button-icon.primary-button { background-color: #2c3d51; color: #fff; transition: color .38s cubic-bezier(.72, -.01, .14, 1.03) } .motion-button-icon.primary-button:before { background-color: #4c34c0 } .motion-button-icon.gray-button { background-color: #d4dcdf; color: #2c3d51; transition: color .38s cubic-bezier(.72, -.01, .14, 1.03) } .motion-button-icon.gray-button:before { background-color: #2c3d51 } .motion-button-icon.gray-button>.icon { stroke: #2c3d51 } .motion-button-icon.gray-button:hover, .motion-button-icon.gray-button:hover>.icon { color: #fff } .motion-button-icon>.icon, .motion-button-icon>.text { display: block; position: relative; z-index: 1 } .motion-button-icon>.text { padding: 0 22px 0 0; transition: transform .44s cubic-bezier(.72, -.01, .14, 1.03) } .motion-button-icon>.icon { stroke-width: 0; height: 28px; width: 28px; transform: translateX(0); transition: .38s cubic-bezier(.72, -.01, .14, 1.03); stroke: #fff } .motion-button-icon>.loading { animation: borderTransition .8s linear infinite; border: 5px solid currentColor; border-bottom-color: transparent; border-radius: 50%; height: 28px; width: 28px } .motion-button-icon:hover:not([disabled]):after, .motion-button-icon:hover:not([disabled]):before { transform: translateX(0) } .motion-button-icon:hover:not([disabled])>.text { transform: translateX(22px) } .motion-button-icon:hover:not([disabled])>.icon { opacity: 0; transform: translateX(22px) } .toggle-button { height: 30px; width: 30px; background-color: #f7f7f7; border-radius: 50%; position: relative; border: 0 } .toggle-button:after { content: ""; height: 10px; width: 10px; border-left: 2px solid #2c3d51; border-bottom: 2px solid #2c3d51; transform: translate3d(-50%, calc(-50% - 2px), 0) rotate(-45deg); position: absolute; left: 50%; top: 50%; transition: transform .4s cubic-bezier(.72, -.01, .14, 1.03) } .active .toggle-button:after { transform: translate3d(-50%, calc(-50% - 0px), 0) rotate(135deg) } input[type=checkbox] { position: absolute; left: -9999px } input[type=checkbox]+.label-checkbox { color: #4e4e4e; cursor: pointer; display: block; padding: 0 0 0 30px; position: relative; text-align: left; font-size: 14px; width: 100% } .new-car input[type=checkbox]+.label-checkbox { border-top: 0; padding-bottom: 0 } .filter-page input[type=checkbox]+.label-checkbox { padding: 5px 0 5px 20px; border: 0; text-transform: lowercase } .plate-check input[type=checkbox]+.label-checkbox { border-top: 0; color: #fff; padding: 10px 0 10px 28px } input[type=checkbox]+.label-checkbox a { position: relative; color: #2c3d51; z-index: 1 } input[type=checkbox]+.label-checkbox a:after { content: ""; height: 1px; width: 100%; position: absolute; bottom: -2px; left: 0; transition: all .2s ease-in-out; background-color: #2c3d51; transform: scaleY(0) } input[type=checkbox]+.label-checkbox a:hover:after { transform: scaleX(1) } input[type=checkbox]+.label-checkbox:after, input[type=checkbox]+.label-checkbox:before { content: ""; position: absolute } input[type=checkbox]+.label-checkbox:before { background-color: #fff; border: 1px solid #d4dcdf; border-radius: 2px; transition: border-color .2s, background-color .2s; left: 0; top: 0; height: 21px; width: 21px } .filter-page input[type=checkbox]+.label-checkbox:before { top: 8px; height: 15px; width: 15px } .plate-check input[type=checkbox]+.label-checkbox:before { height: 20px; top: calc(50% - 10px); width: 20px; background-color: transparent } input[type=checkbox]+.label-checkbox:after { border-left: 2px solid #fff; border-bottom: 2px solid #fff; opacity: 0; left: 6px; top: 6px; transition: opacity .2s; transform: rotate(-45deg); height: 6px; width: 9px } .filter-page input[type=checkbox]+.label-checkbox:after { left: 3px; top: calc(50% - 4px); top: 11px } .plate-check input[type=checkbox]+.label-checkbox:after { top: calc(50% - 4px); left: 5px; width: 11px } input[type=checkbox]:checked+.label-checkbox:before { background-color: #2c3d51; border-color: #2c3d51 } .plate-check input[type=checkbox]:checked+.label-checkbox:before { background-color: #16c3d9; border-color: #16c3d9 } input[type=checkbox]:checked+.label-checkbox:after { opacity: 1 } input[type=checkbox]:disabled+.label-checkbox { opacity: .5; cursor: not-allowed } input[type=checkbox]+.label-checkicon { background-color: #fff; border-radius: 5px; color: #666; cursor: pointer; font-size: 12px; line-height: 1.4; text-align: center; transition: all .3s; padding: 20px 6px; position: relative; height: 100%; width: 100%; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center } input[type=checkbox]+.label-checkicon:before { border: 1px solid #dfe5e7; border-radius: 3px; content: ""; position: absolute; border-radius: 50%; top: 10px; right: 10px; height: 20px; width: 20px } .field-wrapper:not(.-current):not(.-completed) input[type=checkbox]+.label-checkicon { box-shadow: none } .box-home-type input[type=checkbox]+.label-checkicon { padding: 20px } input[type=checkbox]+.label-checkicon>.icon { margin-bottom: 10px; fill: #d4dcdf; stroke: #d4dcdf; transition: all .5s; height: 40px; width: 60px } input[type=checkbox]:checked+.label-checkicon { background-color: #2c3d51; box-shadow: 0 2px 15px rgba(0, 0, 0, .1); color: #fff } input[type=checkbox]:checked+.label-checkicon:before { border-color: #16c3d9; background-color: #16c3d9 } input[type=checkbox]:checked+.label-checkicon:after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; position: absolute; top: 16px; right: 15px; transform: rotate(-45deg) } input[type=checkbox]:checked+.label-checkicon>.icon { fill: #fff; stroke: #fff } input[type=checkbox]:disabled+.label-checkicon { opacity: .5; cursor: not-allowed } .choose-card { transition: box-shadow .5s ease, transform .5s ease; height: 100%; width: 100%; will-change: transform } .choose-card:focus, .choose-card:hover { box-shadow: 0 10px 18px 0 hsla(0, 0%, 69%, .1); transform: translateY(-6px) } .choose-card--animation { opacity: 0; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column } .choose-card--animation:first-child { animation: fadeIn .3s ease-in 1s forwards; animation-delay: .1s } .choose-card--animation:nth-child(2) { animation: fadeIn .3s ease-in 1s forwards; animation-delay: .2s } .choose-card--animation:nth-child(3) { animation: fadeIn .3s ease-in 1s forwards; animation-delay: .3s } .choose-card--animation:nth-child(4) { animation: fadeIn .3s ease-in 1s forwards; animation-delay: .4s } .choose-card--animation:nth-child(5) { animation: fadeIn .3s ease-in 1s forwards; animation-delay: .5s } .choose-card--animation:nth-child(6) { animation: fadeIn .3s ease-in 1s forwards; animation-delay: .6s } .choose-card--animation:nth-child(7) { animation: fadeIn .3s ease-in 1s forwards; animation-delay: .7s } .choose-card--animation:nth-child(8) { animation: fadeIn .3s ease-in 1s forwards; animation-delay: .8s } .choose-card--animation:nth-child(9) { animation: fadeIn .3s ease-in 1s forwards; animation-delay: .9s } .choose-card--animation:nth-child(10) { animation: fadeIn .3s ease-in 1s forwards; animation-delay: 1s } .choose-card .subtitle { font-weight: 400 } .choose-card .error { display: none } .comparation-modal { background-color: rgba(0, 0, 0, .85); display: -ms-flexbox; display: flex; height: 100vh; left: 0; opacity: 0; overflow-y: scroll; position: fixed; top: 0; transform: translateX(100%); transition: transform .4s ease, opacity .5s ease; width: 100vw; z-index: 9999999 } .comparation-modal.active { transform: translateX(0); opacity: 1 } .comparation-modal__content { background-color: #fff; border-radius: 4px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .83); margin: auto; opacity: 0; padding-bottom: 20px; position: relative; transform: translateX(100%); transition: transform .6s ease, opacity .8s ease; width: 100% } .active .comparation-modal__content { transform: translateX(0); opacity: 1 } .comparation-modal__close-btn { color: transparent; font-size: 0; height: 20px; position: absolute; right: 20px; top: 20px; transition: all .5s cubic-bezier(1, -.49, .31, 1.65); width: 20px; border: 0 } .comparation-modal__close-btn:after, .comparation-modal__close-btn:before { background-color: #c7c7c7; content: ""; display: inline-block; height: 20px; width: 3px; position: absolute; transition: all .5s cubic-bezier(1, -.49, .31, 1.65) } .comparation-modal__close-btn:after { transform: translate3d(-50%, -50%, 0) rotate(-45deg) } .comparation-modal__close-btn:before { transform: translate3d(-50%, -50%, 0) rotate(45deg) } .comparation-modal__close-btn:hover { transform: rotate(90deg) } .comparation-modal__title { color: #2c3d51; font-weight: 700; text-align: center; margin-bottom: 24px } .comparation-modal__trigger { border: 0; color: #2c3d51; display: block; font-size: 16px; font-weight: 600; line-height: 22px; text-align: center; margin: 0 auto 40px; text-decoration: underline; transition: color .3s ease } .comparation-modal__trigger:focus, .comparation-modal__trigger:hover { color: #2c3d51 } .comparation-desk__item { width: 100%; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .comparation-desk__item:not(:last-of-type) { border-bottom: 1px solid #e9e9e9 } .comparation-desk__item-block { -ms-flex: 1; flex: 1; width: 25%; -ms-flex-pack: start; justify-content: flex-start; padding: 33px 40px; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column } .comparation-desk__item-name { color: #000; font-size: 16px; line-height: 22px; margin-top: auto; margin-bottom: auto } .comparation-desk__item-text { color: #888; font-size: 14px; line-height: 21px; padding-left: 20px; position: relative } .comparation-desk__item-text+.comparation-desk__item-text { margin-top: 20px } .comparation-desk__item-text.false:after, .comparation-desk__item-text.false:before { content: ""; width: 10px; height: 2px; background-color: #9b9b9b; position: absolute; left: 0; top: 10px } .comparation-desk__item-text.false:before { transform: rotate(-45deg) } .comparation-desk__item-text.false:after { transform: rotate(45deg) } .comparation-desk__item-text.true:before { border-bottom: 2px solid #2c3d51; border-left: 2px solid #2c3d51; content: ""; height: 5px; left: 0; position: absolute; top: 7px; transform: rotate(-45deg); width: 9px } .comparation-mobile .staw__dot { background-color: #d4dcdf } .comparation-mobile .staw__dot--active { background-color: #16c3d9 } .comparation-mobile__item { background-color: #fff; border-radius: 2px; box-shadow: 0 2px 12px 0 hsla(0, 0%, 88%, .29); padding: 35px 30px; padding-top: 15px; margin: 0 auto; height: 100%; width: 80% } .comparation-mobile__item .logo { text-align: center } .comparation-mobile__item .logo img { max-height: 80px } .comparation-mobile__item-name { color: #000; font-size: 14px; line-height: 19px; margin-bottom: 5px; margin-top: 15px } .comparation-mobile__item-benefits { color: #888; font-size: 14px; line-height: 21px; padding-left: 20px; position: relative; margin-bottom: 5px } .comparation-mobile__item-benefits.false:after, .comparation-mobile__item-benefits.false:before { content: ""; width: 10px; height: 2px; background-color: #9b9b9b; position: absolute; left: 0; top: 10px } .comparation-mobile__item-benefits.false:before { transform: rotate(-45deg) } .comparation-mobile__item-benefits.false:after { transform: rotate(45deg) } .comparation-mobile__item-benefits.true:before { border-bottom: 2px solid #2c3d51; border-left: 2px solid #2c3d51; content: ""; height: 5px; left: 0; position: absolute; top: 7px; transform: rotate(-45deg); width: 9px } .copyright { width: 100%; color: #fff; background-color: #000; border-top: 1px solid #d1d1d1; padding-top: 15px; padding-bottom: 15px; margin: 0 auto; font-size: 13px } .copyright .wrapper { max-width: 1280px; margin: 0 auto; padding: 40px 0 } .coverages-step__question-block:not(:first-of-type) { margin-top: 40px } .coverages-step__tiele { color: #333; font-size: 16px; font-weight: 700; line-height: 22px } .coverages-step__text { color: #888; font-size: 14px; line-height: 21px } .coverages-step .box-large { margin-bottom: 28px } .coverages-step .disclaimer__disclaimer__icon-wrapper { margin-right: 30px } .coverages-step .disclaimer__title { color: #2c3d51 } .coverages-step .disclaimer__title:not(:first-of-type) { margin-top: 20px } .current-insurance-stage { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; z-index: 1 } .current-insurance-stage .box-radio { margin-top: 60px } .current-insurance-stage>.btn { margin-top: 50px } .current-insurance-stage>.main-text, .current-insurance-stage>.main-title--small { margin-top: 0; width: 100% } .current-insurance-stage>.main-text { font-size: 16px } .deal-badge { background-color: #221755; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; color: #fff; display: -ms-flexbox; display: flex; font-size: 12px; font-weight: 700; padding: 10px 15px; position: absolute; right: 50%; text-align: center; top: 0; transform: translateX(50%); width: 60%; -ms-flex-pack: center; justify-content: center } .deal-badge .icon { border-radius: 50%; border: 1px solid #fff; fill: #fff; height: 16px; padding: 2px; width: 16px; margin-right: 5px } .disclaimer { background-color: #f0f0f0; max-width: 100%; -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; padding: 30px 20px } .box-button-radio .disclaimer { margin-top: 30px } .disclaimer.-small { padding-top: 20px; padding-bottom: 20px } .disclaimer__icon-wrapper { height: 70px; margin-right: 20px; -ms-flex-preferred-size: 75px; flex-basis: 75px } .disclaimer__message-area { color: #666; font-size: 14px; -ms-flex: 1; flex: 1 } .disclaimer .icon { width: 100%; height: 100%; stroke: #2c3d51 } .disclaimer__title { font-weight: 700; font-size: 16px } .disclaimer--dark { background-color: #2c3d51 } .disclaimer--dark .disclaimer__message-area { color: #fff } .disclaimer--dark .disclaimer__title { color: #f7f7f7 } .disclaimer--dark .icon { stroke: #f7f7f7 } .feedback-action { -ms-flex-align: center; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 950px; width: 100% } .feedback-action>.icon { min-height: 240px } .feedback-action__info { -ms-flex: 1; flex: 1; margin-left: 8.4% } .feedback-action__title { font-size: 30px; font-weight: 700; line-height: 1.4; margin-bottom: 15px; color: #2c3d51 } .feedback-action__text { font-size: 16px; color: #333; line-height: 1.4; font-weight: 600 } .feedback-action__text+.feedback-action__text { margin-top: 15px } .feedback-action__text a { color: #2c3d51 } .feedback-action__footer { display: -ms-flexbox; display: flex; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-align: center; align-items: center; padding-top: 45px } .feedback-action__footer .btn { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; min-width: 250px } .feedback-action__footer>div { font-size: 14px; margin-left: 20px; padding: 10px 0 10px 20px; border-left: 1px solid #d4dcdf; color: #333; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center } .feedback-action__footer>div>a { display: block; color: #2c3d51 } .field-wrapper:not(:first-of-type) { margin: 100px auto } .field-wrapper:not(.-current):not(.-completed) { position: relative } .field-wrapper:not(.-current):not(.-completed):after { content: ""; cursor: not-allowed; display: inline-block; width: 100%; height: 100%; background: hsla(0, 0%, 97%, .8); position: absolute; left: 0; top: 0; z-index: 100 } .field-wrapper:not(.-current):not(.-completed):before { background-image: linear-gradient(hsla(0, 0%, 97%, 0) 20%, #f7f7f7); content: ""; position: fixed; bottom: 0; left: 0; height: 100px; width: 100vw; z-index: 105 } .field-wrapper .btn { background-color: #e0e0e0; border-color: #e0e0e0; color: #9a9a9a; position: fixed; z-index: 110; left: 50%; transform: translateX(-50%) } .footer--default { background-color: #000 } .footer--default>.wrapper { max-width: 1280px; width: calc(100% - 40px); margin: 0 auto; padding: 40px 0; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between } .footer--default .logo { padding: 20px 0; max-width: 150px } .footer--default .list-social>li { text-align: right; margin-left: 20px; display: inline-block } .footer--default .list-social .icon { fill: #fff; width: 24px; height: 24px } .form-field { position: relative; width: 100%; margin-top: 30px; z-index: 1 } .box-home-type+.form-field { background: red } .box-three-card .form-field { -ms-flex: 1; flex: 1; margin: 0 14px } .box-three-card .form-field:first-child { margin-left: 0 } .box-three-card .form-field:last-child { margin-right: 0 } .box-half-card .form-field { margin-top: 0 } .form-field>.error-msg { background-color: #f52c4e; color: #fff; font-size: 10px; padding: 2px 4px; font-size: 11px; font-weight: 700; border-radius: 0 0 4px 4px } .form-field>.error-msg .error-container+.error-container { display: none } .car-search .form-field { margin-top: 0; -ms-flex: 1; flex: 1; margin-right: 10px } .header-alert { background-color: #2f2078; color: #fff; left: 0; position: fixed; top: 0; width: 100vw; z-index: 4 } .header-alert__bg { display: none } .header-alert__hold { -ms-flex-align: center; align-items: center; padding: 20px } .header-alert__text { line-height: 28px; font-size: 16px } .header-alert__text>.icon { width: 16px; height: 21px; stroke: #fff; display: inline-block; vertical-align: sub; margin-right: 15px } .header-alert__link { border: 0; margin: 0 10px; font-weight: 600; text-decoration: underline; color: #16c3d9 } .header-alert__link:focus, .header-alert__link:hover { text-decoration: none } .header-alert__close-btn { border: 0; border-radius: 15px; background: linear-gradient(to bottom right, hsla(0, 0%, 100%, 0) 48%, #fff 0, #fff 54%, hsla(0, 0%, 100%, 0) 0) no-repeat, linear-gradient(to bottom left, hsla(0, 0%, 100%, 0) 48%, #fff 0, #fff 54%, hsla(0, 0%, 100%, 0) 0) no-repeat; margin-left: auto; height: 22px; min-width: 22px } .header-alert--porto { background-color: #5378cf } .header-alert--porto ˆ[0]__link { color: #5378cf } .initial-form { width: 100%; position: relative } .initial-form__title { text-align: center; color: #e4c0ff; font-weight: 700; font-size: 16px } .initial-form .form-field { margin-top: 10px; width: 220px; display: inline-block } .initial-form .form-field+.form-field { margin-top: 20px } .initial-form .input-field>.label { color: #333 } .initial-form .input-field input[name="startForm.payload.zip_code"] { border-bottom-left-radius: 8px; border-top-left-radius: 8px } .initial-form .input-field .input[name="startForm.payload.license_plate"] { border-bottom-right-radius: 8px; border-top-right-radius: 8px } .initial-form .input-field.plate-check { max-width: 100%; margin-top: 10px; margin-bottom: 10px } .initial-form>.btn { padding-left: 0; padding-right: 0; width: 100%; text-transform: uppercase; font-weight: 700; position: absolute; top: 0; right: 0; max-width: 190px; margin-top: 20px; height: 64px } .initial-form__disclaimer { color: #fff; font-weight: 600; font-size: 12px; margin-top: 10px } .initial-form__disclaimer a { color: #16c3d9; text-decoration: underline } .initial-form__disclaimer a:focus, .initial-form__disclaimer a:hover { text-decoration: none } .initial-form__tooltip { position: relative } .initial-form__tooltip-icon, .initial-form__tooltip .plate-check { display: inline-block; vertical-align: middle } .initial-form__tooltip-icon { margin-left: 10px; margin-top: 5px; cursor: pointer } .initial-form__tooltip-icon .icon { fill: #16c3d9 } .initial-form__tooltip-icon:focus:after, .initial-form__tooltip-icon:focus:before, .initial-form__tooltip-icon:hover:after, .initial-form__tooltip-icon:hover:before { transition: opacity .3s ease; opacity: 1 } .initial-form__tooltip-icon:focus:before, .initial-form__tooltip-icon:hover:before { left: 225px; top: calc(100% - 6px) } .initial-form__tooltip-icon:focus:after, .initial-form__tooltip-icon:hover:after { top: 100%; left: 0 } .initial-form__tooltip-icon:after, .initial-form__tooltip-icon:before { top: -999999px; left: -999999px; opacity: 0 } .initial-form__tooltip-icon:before { position: absolute; content: ""; width: 14px; height: 14px; background-color: #333; transform: rotate(45deg); border-radius: 3px } .initial-form__tooltip-icon:after { position: absolute; content: attr(data-text); color: #fff; width: 280px; padding: 25px 30px; font-size: 14px; background-color: #333; z-index: 2; text-align: center } .initial-form__tooltip .icon { width: 16px; height: 16px } .initial-form--porto { background-color: #fff; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between; position: relative; margin-top: 50px; border-radius: 5px; padding: 15px } .initial-form--porto .btn { position: relative; margin-top: 0; max-width: 100% } .initial-form--porto .btn.loading:after { border: 4px solid rgba(83, 120, 207, .4); border-right-color: #5378cf } .initial-form--porto .btn, .initial-form--porto .form-field, .initial-form--porto .initial-form__tooltip { width: 47% } .initial-form--porto .form-field { margin: 0 0 25px } .initial-form--porto .form-field+.form-field { margin-top: 0 } .initial-form--porto .form-field input:focus { border-color: #5378cf } .initial-form--porto .form-field .input-field .input[name="startForm.payload.license_plate"], .initial-form--porto .form-field .input-field .input[name="startForm.payload.zip_code"] { border-radius: 2px } .initial-form--porto .initial-form__tooltip .plate-check .label-checkbox { color: #4e4e4e } .initial-form--porto .initial-form__tooltip .plate-check input[type=checkbox]:checked+.label-checkbox:before { background-color: #5378cf; border-color: #5378cf } .initial-form--porto .initial-form__tooltip-icon .icon { fill: #4e4e4e } .initial-form--porto .btn { margin-right: 0 } .initial-form--porto .btn.-tertiary:not(:disabled):not(.-outline) { background-color: #5378cf; border-color: #5378cf } .initial-form--porto .btn.-tertiary:not(:disabled):not(.-outline):focus, .initial-form--porto .btn.-tertiary:not(:disabled):not(.-outline):hover { background-color: #3c66c9; border-color: #3c66c9 } .initial-form--porto .initial-form__title { display: none } .initial-form--porto .initial-form__disclaimer { position: absolute; left: 0; top: 100% } .initial-form--porto .initial-form__disclaimer a { color: #fff } input:-moz-placeholder, input:-ms-input-placeholder, input::-moz-placeholder, input::-webkit-input-placeholder, textarea:-moz-placeholder, textarea:-ms-input-placeholder, textarea::-moz-placeholder, textarea::-webkit-input-placeholder { color: #d4dcdf; font-size: 14px; font-weight: 300 } input[type=date], input[type=email], input[type=number], input[type=tel], input[type=text], select, textarea { border-radius: 2px; border: 1px solid #d4dcdf; color: #666; outline: none; transition: border-color .4s; font-weight: 300; font-size: 16px; width: 100% } input[type=date]:focus, input[type=email]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=text]:focus, select:focus, textarea:focus { border-color: #16c3d9 } input[type=date]:disabled, input[type=email]:disabled, input[type=number]:disabled, input[type=tel]:disabled, input[type=text]:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed } select::-ms-expand { display: none } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff } .select { position: relative } .select:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #dadada; content: ""; position: absolute; right: 0; top: 50%; transform: translate3d(-15px, 5px, 0); z-index: 0 } .input-field { position: relative; width: 100% } .input-field.radio-field { margin-top: 15px } .input-field.plate-check { margin-top: 0; width: auto; max-width: 240px } .input-field>.label { color: #969494; font-weight: 700; position: absolute } .input-field.is-checkbox+.is-checkbox { margin-top: 15px } .input-field.has-error { transition: all .5s ease } .input-field.has-error:after, .input-field.has-error:before { border-radius: 50%; content: ""; display: block; transform: translate3d(-50%, -50%, 0); position: absolute; right: 10px; top: 50% } .input-field.has-error:before { background-color: #f52c4e; transform: translate3d(calc(-50% + 8px), -50%, 0); height: 20px; width: 20px } .input-field.has-error:after { background: linear-gradient(to bottom right, hsla(0, 0%, 100%, 0) 47%, #fff 0, #fff 58%, hsla(0, 0%, 100%, 0) 0) no-repeat, linear-gradient(to bottom left, hsla(0, 0%, 100%, 0) 47%, #fff 0, #fff 58%, hsla(0, 0%, 100%, 0) 0) no-repeat; border: 0; height: 12px; width: 12px } .input-field.has-error>input, .input-field.has-error input[type=checkbox]+.label-checkbox:before { border-color: #f52c4e } .input-field.has-error.is-checkbox:after, .input-field.has-error.is-checkbox:before { display: none } .input-field.input-valid { transition: all .5s ease } .input-field.input-valid:after, .input-field.input-valid:before { content: ""; display: block; position: absolute; right: 10px; top: 50% } .input-field.input-valid:before { border-radius: 50%; background-color: #16c3d9; transform: translate3d(calc(-50% + 8px), -50%, 0); height: 20px; width: 20px } .input-field.input-valid:after { border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate3d(-7px, -4px, 0) rotate(-45deg); height: 6px; width: 10px } .select.has-error>select { border-color: #f52c4e } .box-checkbox.has-error, .box-radio.has-error { position: relative } .box-checkbox.has-error .main-text, .box-radio.has-error .main-text { color: #f52c4e; font-weight: 700 } .box-checkbox.has-error .box-checkbox__error, .box-radio.has-error .box-radio__error { font-size: 12px; width: 100%; position: absolute; top: calc(100% + 10px); left: 0; color: #f52c4e; border-top: 2px solid; padding-top: 5px } .all-brands .full__subtitle, .all-brands .full__title { max-width: 785px; margin-left: auto; margin-right: auto } .all-brands__hold { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto } .all-brands__images { padding: 35px 0; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center } .all-brands__images img { margin: 0 10px } .all-brands__images .porto { max-width: 75px } .all-brands__images .itau { max-width: 76px } .all-brands__images .azul { max-width: 92px } .all-brands__images .bradesco { max-width: 89px } .all-brands__images .liberty { max-width: 135px } .all-brands__images .sulamerica { max-width: 138px } .all-brands__images .tokio { max-width: 94px; max-height: 82px } .all-brands__note { font-size: 26px } .all-brands .full__subtitle, .all-brands .full__title, .all-brands__note { opacity: 0 } .all-brands.is-active .full__title { animation: fadeAndScale .41s ease both } .all-brands.is-active .full__subtitle { animation: fadeAndScale .5s ease both } .all-brands.is-active .all-brands__images { transition-duration: .59s } .all-brands.is-active .all-brands__note { animation: fadeAndScale .77s ease both } .doubts { position: relative; margin-top: 100px; overflow: hidden } .doubts:after, .doubts:before { left: 0; content: ""; position: absolute } .doubts__icon { position: absolute; right: -50px; bottom: 0; width: 600px; height: 600px } .doubts__icon .icon { width: 100%; height: 100%; fill: #16c3d9 } .doubts__hold { -ms-flex-align: center; align-items: center; min-height: 590px } .doubts .full__subtitle, .doubts .full__title { text-align: left } .doubts__info { max-width: 440px } .doubts__image { position: relative; z-index: 1 } .doubts__image img { display: block } .doubts__image img:not(.fade) { width: 100% } .doubts__bg { width: 60%; height: 100%; position: absolute; right: 0; bottom: 0; background-size: cover; background-position: 50%; background-repeat: no-repeat; background-image: url("/betheme/images/fale-conosco.jpg") } .doubts .doubts-contact { padding-top: 50px } .doubts .doubts-contact__item { position: relative; padding-left: 35px; margin-bottom: 25px } .doubts .doubts-contact__item * { font-size: 14px; color: #333; font-style: normal; border: none } .doubts .doubts-contact__item .icon { position: absolute; left: 0; top: 4px } .doubts .doubts-contact__item--phone .icon { stroke: #2c3d51; width: 19px; height: 22px } .doubts .doubts-contact__item--whats .icon { fill: #2c3d51; width: 20px; height: 20px } .doubts .doubts-contact__item--address .icon { fill: #2c3d51; width: 19px; height: 26px } .doubts .doubts-contact__item--mail .icon { stroke: #2c3d51; width: 23px; height: 17px } .doubts .full__title, .doubts__icon { opacity: 0 } .doubts.is-active .full__title { animation: fadeAndScale .41s ease both } .doubts.is-active .doubts__info { transition-duration: .59s } .doubts.is-active .doubts__icon { animation: fadeIn .5s ease both } .faq .full__title { text-align: left } .faq__hold { margin-top: 20px } .faq .topic { border-bottom: 1px solid #979797 } .faq .topic+.faq .topic { margin-top: 25px } .faq .topic__title { font-size: 18px; color: #666; padding: 25px 50px 25px 0; position: relative; transition: opacity .3s ease, background .3s ease } .faq .topic__title:hover { opacity: .75; background-color: #f9f9f9 } .faq .topic__title:before { content: ""; width: 20px; height: 20px; border: 6px solid #666; border-radius: 4px; right: 5px; top: 50%; margin-top: -12px; position: absolute; border-left: none; border-top: none; transform: rotate(45deg); transition: transform .3s ease } .faq .topic__clickable { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: none; background: none } .faq .topic__clickable:focus { outline: none } .faq .topic__content { max-height: 0; overflow: hidden; transition: max-height .3s ease } .faq .topic__content p { color: #333; font-size: 14px; margin-bottom: 20px; opacity: 0; transition: opacity .5s ease } .faq .topic__content p:first-of-type { transition-duration: .52s } .faq .topic__content p:nth-of-type(2) { transition-duration: .72s } .faq .topic__content p:nth-of-type(3) { transition-duration: .92s } .faq .topic__content p:nth-of-type(4) { transition-duration: 1.12s } .faq .topic.is-open .topic__title:before { transform: rotate(225deg) } .faq .topic.is-open .topic__content { max-height: 500px } .faq .topic.is-open .topic__content p { opacity: 1 } .faq a { color: #2c3d51 } .faq .full__title { opacity: 0 } .faq.is-active .full__title { animation: fadeAndScale .41s ease both } .faq.is-active .faq__hold { transition-duration: .5s } .iq-media { padding-top: 50px } .iq-media__list { margin-top: 40px; -ms-flex-pack: justify; justify-content: space-between } .iq-media__list, .iq-media__thumb { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center } .iq-media__thumb { min-height: 80px; max-width: 20%; text-align: center } .iq-media__thumb>a { display: block; transition: transform .3s ease, opacity .3s ease } .iq-media__thumb>a:focus, .iq-media__thumb>a:hover { opacity: .75; transform: translateY(-2px) scale(1.03) } .iq-media .full__title { opacity: 0 } .iq-media.is-active .full__title { animation: fadeAndScale .41s ease both } .iq-media.is-active .iq-media__list { transition-duration: .5s } .posts .full__subtitle, .posts .full__title { max-width: 750px; margin-left: auto; margin-right: auto } .posts__hold { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; padding-top: 20px } .posts__hold>* { margin-right: 20px; -ms-flex-preferred-size: 320px; flex-basis: 320px; max-width: 33% } .posts__hold>:last-child { margin-right: 0 } .posts__note { background-color: #2c3d51; color: #fff; font-size: 18px; padding: 35px; margin-top: 35px; text-align: center } .posts__note a { text-decoration: underline; color: currentColor } .posts__note a:focus, .posts__note a:hover { text-decoration: none } .posts .full__subtitle, .posts .full__title { opacity: 0 } .posts.is-active .full__title { animation: fadeAndScale .41s ease both } .posts.is-active .full__subtitle { animation: fadeAndScale .5s ease both } .posts.is-active .posts__hold { transition-duration: .59s } .post-card { pointer-events: none; transition: transform .3s ease } .post-card:hover { transform: translateY(-2px) } .post-card__line { color: #999; font-size: 12px; margin-bottom: 5px } .post-card__thumb { display: block } .post-card__thumb a { display: block; pointer-events: auto } .post-card__thumb a:hover { opacity: .75; transition: opacity .3s ease } .post-card__title { color: #666; font-size: 16px; margin-bottom: 10px } .post-card__title a { color: #666; pointer-events: auto; transition: color .3s ease } .post-card__title a:focus, .post-card__title a:hover { color: #2c3d51 } .steps { counter-reset: steps } .steps .full__title { margin-left: auto; margin-right: auto; max-width: 700px } .steps__list { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between } .steps__list-item { -ms-flex-preferred-size: 25%; flex-basis: 25%; padding: 0 15px; position: relative } .steps__list-icon { position: relative; width: 75px; height: 75px; margin-bottom: 30px } .steps__list-icon .icon { height: 100%; position: relative } .steps__list-title { font-size: 18px; margin-bottom: 15px } .steps__list-title:before { counter-increment: steps; content: counter(steps) ". " } .steps__list p { font-size: 14px } .steps .full__subtitle, .steps .full__title { opacity: 0 } .steps.is-active .full__title { animation: fadeAndScale .41s ease both } .steps.is-active .full__subtitle { animation: fadeAndScale .5s ease both; font-size: 27px } .steps.is-active .steps__list { transition-duration: .59s } .why-iq-auto { position: relative; z-index: 1; overflow: hidden } .why-iq-auto:after { right: 0; bottom: 0; height: 280px; width: 220px; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%) } .why-iq-auto__bg { position: absolute; left: 0; top: 5%; width: 100%; height: 90%; background-color: #f9f9f9; z-index: -1; transform: skewY(-3deg) } .why-iq-auto>:not(.why-iq-auto__bg) { position: relative; z-index: 1 } .why-iq-auto__hold { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between } .why-iq-auto__list { max-width: 385px; padding-right: 20px } .why-iq-auto__list-item { position: relative; padding-left: 100px } .why-iq-auto__list-item .icon { position: absolute; left: 0; top: 0; width: 65px; height: 65px } .why-iq-auto__list-item+.why-iq-auto__list-item { margin-top: 50px } .why-iq-auto__list-item-title { font-size: 18px; margin-bottom: 5px } .why-iq-auto__list p { font-size: 14px } .why-iq-auto__image { position: relative; min-height: 500px } .why-iq-auto__image img { position: relative; z-index: 1; display: block; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .075) } .why-iq-auto .full__subtitle, .why-iq-auto .full__title, .why-iq-auto__list-item { opacity: 0 } .why-iq-auto.is-active .full__title { animation: fadeAndScale .41s ease both } .why-iq-auto.is-active .full__subtitle { animation: fadeAndScale .5s ease both } .why-iq-auto.is-active .why-iq-auto__list-item:first-child { animation-duration: .1s } .why-iq-auto.is-active .why-iq-auto__list-item:first-child, .why-iq-auto.is-active .why-iq-auto__list-item:first-child > * { animation-delay: .1s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .why-iq-auto.is-active .why-iq-auto__list-item:first-child > *:nth-child(1) { animation-duration: .15s } .why-iq-auto.is-active .why-iq-auto__list-item:first-child > *:nth-child(2) { animation-duration: .3s } .why-iq-auto.is-active .why-iq-auto__list-item:first-child > *:nth-child(3) { animation-duration: .45s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(2) { animation-duration: .2s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(2), .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(2)>* { animation-delay: .2s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(2)>:first-child { animation-duration: .15s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(2)>:nth-child(2) { animation-duration: .3s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(2)>:nth-child(3) { animation-duration: .45s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(3) { animation-duration: .3s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(3), .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(3)>* { animation-delay: .3s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(3)>:first-child { animation-duration: .15s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(3)>:nth-child(2) { animation-duration: .3s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(3)>:nth-child(3) { animation-duration: .45s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(4) { animation-duration: .4s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(4), .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(4)>* { animation-delay: .4s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(4)>:first-child { animation-duration: .15s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(4)>:nth-child(2) { animation-duration: .3s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(4)>:nth-child(3) { animation-duration: .45s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(5) { animation-duration: .5s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(5), .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(5)>* { animation-delay: .5s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(5)>:first-child { animation-duration: .15s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(5)>:nth-child(2) { animation-duration: .3s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(5)>:nth-child(3) { animation-duration: .45s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(6) { animation-duration: .6s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(6), .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(6)>* { animation-delay: .6s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(6)>:first-child { animation-duration: .15s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(6)>:nth-child(2) { animation-duration: .3s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(6)>:nth-child(3) { animation-duration: .45s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(7) { animation-duration: .7s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(7), .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(7)>* { animation-delay: .7s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(7)>:first-child { animation-duration: .15s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(7)>:nth-child(2) { animation-duration: .3s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(7)>:nth-child(3) { animation-duration: .45s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(8) { animation-duration: .8s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(8), .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(8)>* { animation-delay: .8s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(8)>:first-child { animation-duration: .15s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(8)>:nth-child(2) { animation-duration: .3s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(8)>:nth-child(3) { animation-duration: .45s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(9) { animation-duration: .9s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(9), .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(9)>* { animation-delay: .9s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(9)>:first-child { animation-duration: .15s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(9)>:nth-child(2) { animation-duration: .3s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(9)>:nth-child(3) { animation-duration: .45s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(10) { animation-duration: 1s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(10), .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(10)>* { animation-delay: 1s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(10)>:first-child { animation-duration: .15s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(10)>:nth-child(2) { animation-duration: .3s } .why-iq-auto.is-active .why-iq-auto__list-item:nth-child(10)>:nth-child(3) { animation-duration: .45s } .insurers-list { border-top: 1px solid #d4dcdf; padding: 20px 0 24px } .insurers-list__wait { color: #2c3d51; font-weight: 700; text-align: center; margin: 0 auto; max-width: 400px } .insurers-cards { background-color: #fff; border: 1px solid #d4dcdf; box-sizing: border-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; position: relative; cursor: pointer; transition: border-color .2s ease-in; transition: all .2s ease-in } .insurers-cards.loading { pointer-events: none; cursor: not-allowed } .insurers-cards:hover { border-color: #2c3d51 } .insurers-cards:after, .insurers-cards:before { content: ""; position: absolute } .insurers-cards:after { height: 6px; width: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); right: 25px; top: 25px; opacity: 0 } .insurers-cards:before { right: 20px; top: 20px; height: 20px; width: 20px; border: 1px solid #d4dcdf; border-radius: 50% } .insurers-cards.active { background-color: #2c3d51; border-color: #2c3d51; box-shadow: 0 6px 7px 0 rgba(0, 0, 0, .17); pointer-events: none; cursor: not-allowed } .insurers-cards.active:after { opacity: 1 } .insurers-cards.active:before { background-color: #16c3d9; border-color: #16c3d9 } .insurers-cards+.insurers-cards { margin-top: 20px } .insurers-cards__logo { background-color: #fff; border: 2px solid #fff; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; max-width: 170px; width: 100% } .active .insurers-cards__logo { border-color: #2c3d51 } .insurers-cards__logo .img { max-width: 60px; max-height: 100px; transition: all .2s ease-in } .loading .insurers-cards__logo .img { color: #d4dcdf; filter: grayscale(1); opacity: .5 } .insurers-cards__description { margin: 24px 0 33px; padding-left: 34px; position: relative } .insurers-cards__description>.name { color: #4e4e4e; font-size: 22px; line-height: 33px; transition: all .2s ease-in } .active .insurers-cards__description>.name { color: #fff } .loading .insurers-cards__description>.name { color: #d4dcdf } .insurers-cards__description>.description { color: #2c3d51; font-size: 12px; font-weight: 700; line-height: 17px; transition: all .2s ease-in } .active .insurers-cards__description>.description { color: #fff } .loading .insurers-cards__description>.description { color: #d4dcdf } .insurers-cards__description>.price { color: #2c3d51; font-size: 14px; font-weight: 800; line-height: 19px } .active .insurers-cards__description>.price { color: #fff } .insurers-cards__description>.price-full { color: #d4dcdf; position: relative; display: inline-block } .active .insurers-cards__description>.price-full { color: #6853d0 } .insurers-cards__description>.price-full:after { content: ""; background-color: #2c3d51; display: inline-block; height: 1px; left: 0; position: absolute; top: 50%; width: 100% } .active .insurers-cards__description>.price-full:after { background-color: #fff } .loading .insurers-cards__description>.price { color: #d4dcdf } .insurers-cards__description>.price-text { color: #888; font-size: 12px; line-height: 21px; margin-top: 11px } .active .insurers-cards__description>.price-text { color: #fff } .loading .insurers-cards__description>.price-text { color: #d4dcdf } .blackfriday-badge { border-radius: 4px; padding: 4px 8px 4px 4px; -ms-flex-align: center; align-items: center; background-color: #2c3d51; bottom: 33px; display: -ms-flexbox; display: flex; position: absolute; right: 40px; transform-style: preserve-3d; min-height: 38px } .blackfriday-badge__text { color: #fff } .blackfriday-badge .icon { height: 26px; width: 26px; margin-left: 10px; stroke: #fff; fill: #fff } .list__item { padding-left: 10px; position: relative; margin-top: 10px } .list__item:before { content: ""; border-radius: 50%; background-color: #d4dcdf; display: inline-block; position: absolute; left: 0; top: 6px; height: 6px; width: 6px } .list__item-title { color: #909090; font-size: 14px; line-height: 20px } .list__item-value { color: #666; font-size: 14px; line-height: 20px; font-weight: 700 } .loader { position: relative; margin: 0 auto; width: 100px } .loader>.circular { animation: rotate 2s linear infinite; height: 100%; transform-origin: center center; width: 100% } .loader>.circular>.path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round } @keyframes rotate { to { transform: rotate(1turn) } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0 } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px } to { stroke-dasharray: 89, 200; stroke-dashoffset: -124px } } .iq-loader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #f6f6f6 } .iq-loader__dots { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; margin-top: 25px } .iq-loader__dots--item { border-radius: 100%; width: 5px; height: 5px; background-color: #d8d8d8; margin: 5px } .iq-loader__dots--item:first-child { animation-name: dotsFade1; animation-duration: 2s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out } .iq-loader__dots--item:nth-child(2) { animation-name: dotsFade2; animation-duration: 2s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out } .iq-loader__dots--item:nth-child(3) { animation-name: dotsFade3; animation-duration: 2s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out } .iq-loader__text { color: #2c3d51; font-weight: 700; text-align: center; margin: 0 auto; max-width: 400px } .iq-loader__block { height: 170px; position: relative; margin-bottom: 0x } .iq-loader__hold { position: fixed; width: 120px; height: 120px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) } .iq-loader__hold .icon-iq-360-footer-desktop { fill: #2c3d51; height: 80px; animation: loading 2s infinite } .iq-loader__block .iq-loader__hold, .iq-loader__i { position: absolute } .iq-loader__i { left: 5px; top: 19px; background-color: #2c3d51; width: 20px; height: 79px; border-radius: 6px } .iq-loader__q { position: absolute; right: 3px; top: 17px; height: 82px; width: 82px; border: 21px solid #2c3d51; border-radius: 50% } .iq-loader__q:after { content: ""; position: absolute; right: -17px; bottom: -17px; width: 23px; height: 23px; background-color: #2c3d51; border-radius: 20% } .iq-loader__ico { width: 100%; height: 100% } .iq-loader__ico:after { width: 50%; height: 50%; position: absolute; left: 50%; top: 0; content: ""; animation: customRotation 2s ease infinite; background: radial-gradient(ellipse at center, #fff 70%, transparent 0), radial-gradient(ellipse at center, #8439bb 10px, transparent 0); background-position: 42px 4px, 18px -20px; background-size: 12px 12px, 60px 60px; background-repeat: no-repeat } .iq-loader .icon { fill:map-get( { "primary": "(#2c3d51)", "primary-dark": "(#2c3d51)", "secondary": "(#a941f5)", "error": "(#f52c4e)", "tertiary": "(#16c3d9)", "title": "(#333)", "text": "(#666)", "textLight": "(#444)", "textBold": "(#4e4e4e)", "placeholder": "(#bbc3c6)", "disabled": "(#d4dcdf)", "#fff": "(#f7f7f7)", "#d3d3d3": "(#f5f7f8)", "porto": "(#5378cf)", "sematic": "(#ff4848)" } , "primary"); height:100%; width:100%; left:0; top:0; opacity:.5; position:absolute; display:none } @keyframes loading { 0%, to { opacity: 0 } 50% { opacity: 1 } } .main-driver-stage .box-radio.has-error { margin-bottom: 30px } .current-insurance-stage, .form-insurance-form, .form-proponent-stage, .form-vehicle-form, .main-driver-stage { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .current-insurance-stage>:not(:first-child):not(.form-field), .form-insurance-form>:not(:first-child):not(.form-field), .form-proponent-stage>:not(:first-child):not(.form-field), .form-vehicle-form>:not(:first-child):not(.form-field), .main-driver-stage>:not(:first-child):not(.form-field) { margin-top: 50px; width: 100% } .current-insurance-stage>:nth-last-child(2) .box-radio__error.-sinister, .form-insurance-form>:nth-last-child(2) .box-radio__error.-sinister, .form-proponent-stage>:nth-last-child(2) .box-radio__error.-sinister, .form-vehicle-form>:nth-last-child(2) .box-radio__error.-sinister, .main-driver-stage>:nth-last-child(2) .box-radio__error.-sinister { margin-top: 10px; position: static } .current-insurance-stage>:nth-last-child(2).input-field, .form-insurance-form>:nth-last-child(2).input-field, .form-proponent-stage>:nth-last-child(2).input-field, .form-vehicle-form>:nth-last-child(2).input-field, .main-driver-stage>:nth-last-child(2).input-field { padding-bottom: 0 } .current-insurance-stage>:not(.box-home-type), .form-insurance-form>:not(.box-home-type), .form-proponent-stage>:not(.box-home-type), .form-vehicle-form>:not(.box-home-type), .main-driver-stage>:not(.box-home-type) { opacity: 0 } .current-insurance-stage>:not(.box-home-type):first-child, .form-insurance-form>:not(.box-home-type):first-child, .form-proponent-stage>:not(.box-home-type):first-child, .form-vehicle-form>:not(.box-home-type):first-child, .main-driver-stage>:not(.box-home-type):first-child { animation: SliceInY .3s ease-in forwards; animation-delay: .1s } .current-insurance-stage>:not(.box-home-type):nth-child(2), .form-insurance-form>:not(.box-home-type):nth-child(2), .form-proponent-stage>:not(.box-home-type):nth-child(2), .form-vehicle-form>:not(.box-home-type):nth-child(2), .main-driver-stage>:not(.box-home-type):nth-child(2) { animation: SliceInY .3s ease-in forwards; animation-delay: .2s } .current-insurance-stage>:not(.box-home-type):nth-child(3), .form-insurance-form>:not(.box-home-type):nth-child(3), .form-proponent-stage>:not(.box-home-type):nth-child(3), .form-vehicle-form>:not(.box-home-type):nth-child(3), .main-driver-stage>:not(.box-home-type):nth-child(3) { animation: SliceInY .3s ease-in forwards; animation-delay: .3s } .current-insurance-stage>:not(.box-home-type):nth-child(4), .form-insurance-form>:not(.box-home-type):nth-child(4), .form-proponent-stage>:not(.box-home-type):nth-child(4), .form-vehicle-form>:not(.box-home-type):nth-child(4), .main-driver-stage>:not(.box-home-type):nth-child(4) { animation: SliceInY .3s ease-in forwards; animation-delay: .4s } .current-insurance-stage>:not(.box-home-type):nth-child(5), .form-insurance-form>:not(.box-home-type):nth-child(5), .form-proponent-stage>:not(.box-home-type):nth-child(5), .form-vehicle-form>:not(.box-home-type):nth-child(5), .main-driver-stage>:not(.box-home-type):nth-child(5) { animation: SliceInY .3s ease-in forwards; animation-delay: .5s } .current-insurance-stage>:not(.box-home-type):nth-child(6), .form-insurance-form>:not(.box-home-type):nth-child(6), .form-proponent-stage>:not(.box-home-type):nth-child(6), .form-vehicle-form>:not(.box-home-type):nth-child(6), .main-driver-stage>:not(.box-home-type):nth-child(6) { animation: SliceInY .3s ease-in forwards; animation-delay: .6s } .current-insurance-stage>:not(.box-home-type):nth-child(7), .form-insurance-form>:not(.box-home-type):nth-child(7), .form-proponent-stage>:not(.box-home-type):nth-child(7), .form-vehicle-form>:not(.box-home-type):nth-child(7), .main-driver-stage>:not(.box-home-type):nth-child(7) { animation: SliceInY .3s ease-in forwards; animation-delay: .7s } .current-insurance-stage>:not(.box-home-type):nth-child(8), .form-insurance-form>:not(.box-home-type):nth-child(8), .form-proponent-stage>:not(.box-home-type):nth-child(8), .form-vehicle-form>:not(.box-home-type):nth-child(8), .main-driver-stage>:not(.box-home-type):nth-child(8) { animation: SliceInY .3s ease-in forwards; animation-delay: .8s } .current-insurance-stage>:not(.box-home-type):nth-child(9), .form-insurance-form>:not(.box-home-type):nth-child(9), .form-proponent-stage>:not(.box-home-type):nth-child(9), .form-vehicle-form>:not(.box-home-type):nth-child(9), .main-driver-stage>:not(.box-home-type):nth-child(9) { animation: SliceInY .3s ease-in forwards; animation-delay: .9s } .current-insurance-stage>:not(.box-home-type):nth-child(10), .form-insurance-form>:not(.box-home-type):nth-child(10), .form-proponent-stage>:not(.box-home-type):nth-child(10), .form-vehicle-form>:not(.box-home-type):nth-child(10), .main-driver-stage>:not(.box-home-type):nth-child(10) { animation: SliceInY .3s ease-in forwards; animation-delay: 1s } .current-insurance-stage>:not(.box-home-type):nth-child(11), .form-insurance-form>:not(.box-home-type):nth-child(11), .form-proponent-stage>:not(.box-home-type):nth-child(11), .form-vehicle-form>:not(.box-home-type):nth-child(11), .main-driver-stage>:not(.box-home-type):nth-child(11) { animation: SliceInY .3s ease-in forwards; animation-delay: 1.1s } .current-insurance-stage>:not(.box-home-type):nth-child(12), .form-insurance-form>:not(.box-home-type):nth-child(12), .form-proponent-stage>:not(.box-home-type):nth-child(12), .form-vehicle-form>:not(.box-home-type):nth-child(12), .main-driver-stage>:not(.box-home-type):nth-child(12) { animation: SliceInY .3s ease-in forwards; animation-delay: 1.2s } .current-insurance-stage>:not(.box-home-type):nth-child(13), .form-insurance-form>:not(.box-home-type):nth-child(13), .form-proponent-stage>:not(.box-home-type):nth-child(13), .form-vehicle-form>:not(.box-home-type):nth-child(13), .main-driver-stage>:not(.box-home-type):nth-child(13) { animation: SliceInY .3s ease-in forwards; animation-delay: 1.3s } .current-insurance-stage>:not(.box-home-type):nth-child(14), .form-insurance-form>:not(.box-home-type):nth-child(14), .form-proponent-stage>:not(.box-home-type):nth-child(14), .form-vehicle-form>:not(.box-home-type):nth-child(14), .main-driver-stage>:not(.box-home-type):nth-child(14) { animation: SliceInY .3s ease-in forwards; animation-delay: 1.4s } .current-insurance-stage>:not(.box-home-type):nth-child(15), .form-insurance-form>:not(.box-home-type):nth-child(15), .form-proponent-stage>:not(.box-home-type):nth-child(15), .form-vehicle-form>:not(.box-home-type):nth-child(15), .main-driver-stage>:not(.box-home-type):nth-child(15) { animation: SliceInY .3s ease-in forwards; animation-delay: 1.5s } .current-insurance-stage>:not(.box-home-type):nth-child(16), .form-insurance-form>:not(.box-home-type):nth-child(16), .form-proponent-stage>:not(.box-home-type):nth-child(16), .form-vehicle-form>:not(.box-home-type):nth-child(16), .main-driver-stage>:not(.box-home-type):nth-child(16) { animation: SliceInY .3s ease-in forwards; animation-delay: 1.6s } .current-insurance-stage>:not(.box-home-type):nth-child(17), .form-insurance-form>:not(.box-home-type):nth-child(17), .form-proponent-stage>:not(.box-home-type):nth-child(17), .form-vehicle-form>:not(.box-home-type):nth-child(17), .main-driver-stage>:not(.box-home-type):nth-child(17) { animation: SliceInY .3s ease-in forwards; animation-delay: 1.7s } .current-insurance-stage>:not(.box-home-type):nth-child(18), .form-insurance-form>:not(.box-home-type):nth-child(18), .form-proponent-stage>:not(.box-home-type):nth-child(18), .form-vehicle-form>:not(.box-home-type):nth-child(18), .main-driver-stage>:not(.box-home-type):nth-child(18) { animation: SliceInY .3s ease-in forwards; animation-delay: 1.8s } .current-insurance-stage>:not(.box-home-type):nth-child(19), .form-insurance-form>:not(.box-home-type):nth-child(19), .form-proponent-stage>:not(.box-home-type):nth-child(19), .form-vehicle-form>:not(.box-home-type):nth-child(19), .main-driver-stage>:not(.box-home-type):nth-child(19) { animation: SliceInY .3s ease-in forwards; animation-delay: 1.9s } .current-insurance-stage>:not(.box-home-type):nth-child(20), .form-insurance-form>:not(.box-home-type):nth-child(20), .form-proponent-stage>:not(.box-home-type):nth-child(20), .form-vehicle-form>:not(.box-home-type):nth-child(20), .main-driver-stage>:not(.box-home-type):nth-child(20) { animation: SliceInY .3s ease-in forwards; animation-delay: 2s } .form-proponent-stage>:nth-last-child(2) { border-bottom: none; padding-bottom: 0 } .form-actions { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; border-top: 1px solid #d4dcdf; padding-top: 30px } .form-actions .-primary { margin-right: 0 } .modal { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; transform: translateX(100%); transition: opacity .2s ease; opacity: 0; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; z-index: 120; opacity: 1; transform: translateY(0) } .modal.is-active { opacity: 1; transform: translateY(0) } .modal.is-active .modal__content { animation: SliceInBrutalY .8s cubic-bezier(1, -.49, .31, 1.65) forwards } .modal-enter .modal__overlay { opacity: 0 } .modal-enter .modal__content { opacity: 0; transform: translateY(-500px) } .modal-enter-active .modal__overlay { transition: opacity .35s cubic-bezier(.19, .57, .33, .96); opacity: 1; will-change: opacity } .modal-enter-active .modal__content { transform: translateY(0); opacity: 1; transition: transform .45s cubic-bezier(.54, .39, .49, 1.26), opacity .45s cubic-bezier(.54, .39, .49, 1.26) } .modal-enter-done .modal__overlay { opacity: 1 } .modal-enter-done .modal__content { opacity: 1; transform: translateY(0) } .modal-exit-active .modal__content, .modal-exit-active .modal__overlay { transition: opacity .25s cubic-bezier(.19, .57, .33, .96); opacity: 0; will-change: opacity } .modal__overlay { background-color: rgba(0, 0, 0, .75); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0 } .modal__content { background-color: #fff; border-radius: 5px; position: relative; text-align: center; padding: 40px; max-width: 600px; width: 90%; transform: translateY(-100%); opacity: 0 } .modal__title { color: #4e4e4e; font-size: 34px; font-weight: 800; padding-bottom: 20px; width: 100% } .modal__text { color: #333; font-size: 16px; font-weight: 700 } .modal__close { border: 0; right: 20px; top: 20px; height: 24px; width: 24px } .modal__close, .modal__close:after, .modal__close:before { position: absolute; transition: all .5s cubic-bezier(1, -.49, .31, 1.65) } .modal__close:after, .modal__close:before { background-color: #2c3d51; content: ""; display: inline-block; height: 20px; width: 3px } .modal__close:after { transform: translate3d(-50%, -50%, 0) rotate(-45deg) } .modal__close:before { transform: translate3d(-50%, -50%, 0) rotate(45deg) } .modal__close:hover { transform: rotate(90deg) } .modal__button { margin: 50px auto 20px } .modal--primary .modal__content { background-color: #2c3d51 } .modal--primary .modal__title { color: #3c0e5e } .modal--primary .modal__text { color: #fff } .modal--primary .modal__close:after, .modal--primary .modal__close:before { background-color: #fff } .feedback-textarea { resize: none; min-height: 150px; max-width: 100% } .personalization-progress { position: relative; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center } .personalization-progress-appear .personalization-progress__item, .personalization-progress-enter .personalization-progress__item { opacity: 0; transform: translateY(-40px) } .personalization-progress-appear-active .personalization-progress__item, .personalization-progress-enter-active .personalization-progress__item { opacity: 1; transform: translateY(0); transition-property: transform, opacity } .personalization-progress-appear-active .personalization-progress__item:first-child, .personalization-progress-enter-active .personalization-progress__item:first-child { transition-duration: .41s } .personalization-progress-appear-active .personalization-progress__item:nth-child(2), .personalization-progress-enter-active .personalization-progress__item:nth-child(2) { transition-duration: .5s } .personalization-progress-appear-active .personalization-progress__item:nth-child(3), .personalization-progress-enter-active .personalization-progress__item:nth-child(3) { transition-duration: .59s } .personalization-progress__item { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: 800; text-align: center; position: relative; z-index: 1; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 90px } .personalization-progress__item:not(:last-child):after, .personalization-progress__item:not(:last-child):before { content: ""; position: absolute; width: calc(100% + 5px); height: 4px; left: 50%; top: 17px } .personalization-progress__item:not(:last-child):before { background-color: #2c3d51 } .personalization-progress__item:not(:last-child):after { opacity: 0; background-color: #16c3d9 } .personalization-progress__item-icon { display: block; margin: 0 auto 5px; width: 35px; height: 35px; font-size: 14px; background-color: #2c3d51; text-align: center; border-radius: 50%; color: #fff; overflow: hidden; position: relative; z-index: 1; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center } .personalization-progress__item-icon:after { content: ""; width: 100%; height: 100%; left: 0; top: 0; background-color: #16c3d9; position: absolute; overflow: hidden; border-radius: 50%; z-index: -1; opacity: 0 } .personalization-progress__item+.personalization-progress__item { margin-left: 20px } .personalization-progress__item.is-finished .personalization-progress__item-icon:after { animation-name: completeStep; animation-fill-mode: both; animation-duration: .2s; opacity: 1; animation-timing-function: linear } .personalization-progress__item.is-finished:not(:last-child):after { transform-origin: left center; animation-name: completeStepBar; animation-timing-function: linear; animation-fill-mode: both; animation-duration: .2s; opacity: 1 } .personalization-progress__item.is-finished:first-child .personalization-progress__item-icon:after { animation-delay: 0s } .personalization-progress__item.is-finished:first-child:not(:last-child):after { animation-delay: .1s } .personalization-progress__item.is-finished:nth-child(2) .personalization-progress__item-icon:after { animation-delay: .2s } .personalization-progress__item.is-finished:nth-child(2):not(:last-child):after { animation-delay: .3s } .personalization-progress__item.is-finished:nth-child(3) .personalization-progress__item-icon:after { animation-delay: .4s } .personalization-progress__item.is-finished:nth-child(3):not(:last-child):after { animation-delay: .5s } .personalization-progress__item.is-active .personalization-progress__item-icon { animation-name: activeStep; animation-timing-function: linear; animation-fill-mode: both; animation-duration: .1s; border: 2px solid transparent } .personalization-progress__item.is-active:first-child .personalization-progress__item-icon { animation-delay: 0s } .personalization-progress__item.is-active:nth-child(2) .personalization-progress__item-icon { animation-delay: .2s } .personalization-progress__item.is-active:nth-child(3) .personalization-progress__item-icon { animation-delay: .4s } @keyframes completeStep { 0% { transform: translateX(-100%) } to { transform: translateX(0) } } @keyframes completeStepBar { 0% { transform: scaleX(0) } to { transform: scaleX(1) } } @keyframes activeStep { 0% { border-color: transparent } to { border-color: #16c3d9 } } .personalization-sidebar { background-color: #fff; max-width: 410px; transition: max-height .35s ease-in-out; width: 100%; position: -webkit-sticky; position: sticky; top: 30px; border-radius: 4px } .personalization-sidebar-appear, .personalization-sidebar-enter { opacity: 0; transform: translateY(-40px) } .personalization-sidebar-appear-active, .personalization-sidebar-enter-active { transition: opacity .45s ease .1s, transform .45s ease .1s; opacity: 1; transform: translateY(0); will-change: transform, opacity } .personalization-sidebar__hold { border: 1px solid #d4dcdf; padding: 15px } .personalization-sidebar__info { padding: 20px 0; border-bottom: 1px solid #d4dcdf; font-size: 14px; color: #888; text-align: center } .personalization-sidebar__info .sidebar-price { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; position: relative } .personalization-sidebar__info .sidebar-price__text strong { display: inline-block; margin: 0 6px } .personalization-sidebar__info .sidebar-price__full-price { color: #d4dcdf; font-size: 16px; font-weight: 700; line-height: 22px; text-align: center; display: inline-block; position: relative } .personalization-sidebar__info .sidebar-price__full-price:after { content: ""; background: #2c3d51; display: block; width: 120%; height: 2px; transform: translateY(-50%); position: absolute; left: -10%; top: 50% } .personalization-sidebar__info .sidebar-price__discount-msg { color: #2c3d51; font-size: 14px; line-height: 19px; text-align: center; font-weight: 700 } .personalization-sidebar__info .sidebar-price__box .loader { width: 28px; transition: all .5s ease; stroke: #2c3d51; padding: 12px 0; min-height: 55px } .personalization-sidebar__info .sidebar-price.is-loading .loader { right: 10%; opacity: 1 } .personalization-sidebar__info .sidebar-price__text { color: #d4dcdf; font-size: 16px; font-weight: 700 } .personalization-sidebar__info .sidebar-price__text.has-product { color: #333 } .personalization-sidebar__info .sidebar-price__prefix { color: #d4dcdf; display: -ms-flexbox; display: flex } .personalization-sidebar__info .sidebar-price__prefix.has-product { color: #2c3d51 } .personalization-sidebar__info .sidebar-price__prefix:nth-child(2) { font-weight: 700 } .personalization-sidebar__info .sidebar-price__value { color: #d4dcdf; font-size: 40px; margin-left: 10px; font-weight: 700; transition: filter .2s linear; will-change: filter } .personalization-sidebar__info .sidebar-price__value.has-product { color: #2c3d51 } .personalization-sidebar__info .sidebar-icon { height: 100px; width: 100%; margin-bottom: 15px } .personalization-sidebar__info .sidebar-icon .icon { height: 100% } .personalization-sidebar__details { padding-top: 20px; padding-bottom: 10px } .personalization-sidebar__details .sidebar-details { font-size: 14px; padding-left: 35px } .personalization-sidebar__details .sidebar-details__item { position: relative; padding-left: 50px } .personalization-sidebar__details .sidebar-details__item:not(:first-child) { margin-top: 30px } .personalization-sidebar__details .sidebar-details__item p { margin: 0; color: #4e4e4e; word-wrap: break-word } .personalization-sidebar__details .sidebar-details__item p:first-of-type { color: #333; font-weight: 700 } .personalization-sidebar__details .sidebar-details__item-text { transition: transform .3s ease, opacity .3s ease; opacity: 0 } .personalization-sidebar__details .sidebar-details__item-text-appear-active { transform: translateX(-20px); opacity: 0; color: #00f!important } .personalization-sidebar__details .sidebar-details__item-text-enter-done { opacity: 1; transform: translateX(0); color: red!important } .personalization-sidebar__details .sidebar-details .icon { stroke: #2c3d51; position: absolute; left: 0; top: 50%; width: 27px; height: 27px; margin-top: -13px } .personalization-sidebar.active .sidebar-details { opacity: 1; transform: translateX(0); transition: transform .3s ease, opacity .3s ease } .personalization-sidebar__coverages { padding-top: 20px; margin-top: 20px; border-top: 1px solid #d4dcdf } .personalization-sidebar__link { display: block; text-align: center; border: none; color: #888; margin: 15px auto 0; background: none; text-decoration: underline; font-weight: 700; transition: color .3s ease; font-size: 14px } .personalization-sidebar__link:focus, .personalization-sidebar__link:hover { color: #2c3d51 } .personalization-sidebar.active .personalization-sidebar__link { opacity: 1; transition: opacity .49s ease } .check-list { color: #4e4e4e; text-align: left; font-size: 14px; padding-top: 10px } .check-list li { padding: 7px 0 7px 20px; position: relative } .check-list li>span { font-weight: 700 } .check-list li:before { content: ""; border-bottom: 2px solid #2c3d51; border-left: 2px solid #2c3d51; display: inline-block; height: 5px; left: 0; position: absolute; top: 13px; transform: rotate(-45deg); width: 9px } .check-list li.has-value { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; position: relative; overflow: hidden } .check-list li.has-value:after { position: absolute; top: 50%; height: 1px; width: 100%; background-color: #ddd; left: inherit; content: "" } .check-list li.has-value div, .check-list li.has-value span { background-color: #fff; position: relative; z-index: 1 } .check-list li.has-value div:first-child, .check-list li.has-value span:first-child { padding-right: 10px } .check-list li.has-value div:last-child, .check-list li.has-value span:last-child { padding-left: 10px } .check-list+.check-title { margin-top: 25px } .check-title { text-align: left; color: #333; font-weight: 700; font-size: 14px } .loader-installmentprice { opacity: 1 } .loader-installmentprice__on-animation { transition: all .5s; transform: translateY(0); opacity: 1 } .loader-installmentprice__off-animation { transition: all .5s; transform: translateY(-10%); opacity: 0 } .loader-smallprice__full-price { opacity: 0 } .loader-smallprice__full-price-appear-active { animation: SliceInBrutalRightLeftX .3s cubic-bezier(.72, -.01, .14, 1.03) forwards } .loader-smallprice__full-price-enter-done { opacity: 1 } .loader-smallprice__full-price-exit { animation: SliceInBrutalRightLeftXRemove .3s cubic-bezier(.72, -.01, .14, 1.03) forwards } .loader-smallprice__full-price-exit-done, .loader-smallprice__low-price { opacity: 0 } .loader-smallprice__low-price-appear-active { animation: SliceInBrutalRightLeftX .3s cubic-bezier(.72, -.01, .14, 1.03) forwards } .loader-smallprice__low-price-enter-active { opacity: 1 } .loader-smallprice__low-price-exit { animation: SliceInBrutalRightLeftXRemove .3s cubic-bezier(.72, -.01, .14, 1.03) forwards } .loader-smallprice__low-price-exit-done { opacity: 0 } .loader-discountprice-enter { animation: SliceInBrutalRightLeftX .3s cubic-bezier(.72, -.01, .14, 1.03) forwards } .loader-discountprice-enter-done { animation: SliceInBrutalLeftRightX .3s cubic-bezier(.72, -.01, .14, 1.03) forwards } .loader-fullprice { visibility: hidden; max-height: 0; transition: max-height .3s linear } .loader-fullprice .sidebar-price__discount-msg, .loader-fullprice .sidebar-price__full-price, .loader-fullprice .sidebar-price__msg { opacity: 0 } .loader-fullprice .sidebar-price__full-price:after { width: 0!important; transition: width .3s cubic-bezier(.72, -.01, .14, 1.03) .3s } .loader-fullprice-enter { max-height: 200px } .loader-fullprice-enter-done { visibility: visible; max-height: 200px } .loader-fullprice-enter-done .sidebar-price__full-price { animation: SliceInBrutalLeftRightX .5s cubic-bezier(.72, -.01, .14, 1.03) forwards } .loader-fullprice-enter-done .sidebar-price__full-price:after { width: 120%!important } .loader-fullprice-enter-done .sidebar-price__discount-msg { animation: SliceInBrutalBottomTopY .3s cubic-bezier(.72, -.01, .14, 1.03) forwards } .loader-fullprice-enter-done .sidebar-price__msg { animation: SliceInBrutalBottomTopY .4s cubic-bezier(.72, -.01, .14, 1.03) forwards } .loader-fullprice-exit { visibility: visible; max-height: 200px } .loader-fullprice-exit .sidebar-price__full-price { opacity: 1; animation: SliceInBrutalLeftRightXRemove .5s cubic-bezier(.72, -.01, .14, 1.03) .3s forwards } .loader-fullprice-exit .sidebar-price__full-price:after { width: 0!important; transition: width .6s cubic-bezier(.72, -.01, .14, 1.03) } .loader-fullprice-exit .sidebar-price__discount-msg { animation: SliceInBrutalBottomTopYRemove .4s cubic-bezier(.72, -.01, .14, 1.03) forwards } .loader-fullprice-exit .sidebar-price__msg { animation: SliceInBrutalBottomTopYRemove .5s cubic-bezier(.72, -.01, .14, 1.03) forwards } .loader-fullprice-exit-done { transition-delay: .6s } .loader-fullprice-exit-done .sidebar-price__discount-msg, .loader-fullprice-exit-done .sidebar-price__full-price, .loader-fullprice-exit-done .sidebar-price__msg { opacity: 0 } .loader-fullprice-exit-done .sidebar-price__full-price:after { width: 0!important } .loader-price-exit { opacity: 1; transform: translateY(0) } .loader-price-exit-active { transition: opacity .45s ease .1s, transform .45s ease .1s; opacity: 0; transform: translateY(-40px); will-change: transform, opacity } .loader-price-enter { opacity: 0; transform: translateY(40px); position: absolute } .loader-price-enter-active { transition: opacity .45s ease .1s, transform .45s ease .1s; opacity: 1; transform: translateY(0); will-change: transform, opacity } .brand-benefits { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between } .brand-benefits__item { width: 22%; padding: 40px 30px; opacity: 0; transition: all .3s ease-in; background-color: #fff; text-align: center } .is-active .brand-benefits__item:first-child { animation-duration: .1s } .is-active .brand-benefits__item:first-child, .is-active .brand-benefits__item:first-child > * { animation-delay: .1s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .is-active .brand-benefits__item:first-child > *:nth-child(1) { animation-duration: .15s } .is-active .brand-benefits__item:first-child > *:nth-child(2) { animation-duration: .3s } .is-active .brand-benefits__item:first-child > *:nth-child(3) { animation-duration: .45s } .is-active .brand-benefits__item:nth-child(2) { animation-duration: .2s } .is-active .brand-benefits__item:nth-child(2), .is-active .brand-benefits__item:nth-child(2)>* { animation-delay: .2s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .is-active .brand-benefits__item:nth-child(2)>:first-child { animation-duration: .15s } .is-active .brand-benefits__item:nth-child(2)>:nth-child(2) { animation-duration: .3s } .is-active .brand-benefits__item:nth-child(2)>:nth-child(3) { animation-duration: .45s } .is-active .brand-benefits__item:nth-child(3) { animation-duration: .3s } .is-active .brand-benefits__item:nth-child(3), .is-active .brand-benefits__item:nth-child(3)>* { animation-delay: .3s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .is-active .brand-benefits__item:nth-child(3)>:first-child { animation-duration: .15s } .is-active .brand-benefits__item:nth-child(3)>:nth-child(2) { animation-duration: .3s } .is-active .brand-benefits__item:nth-child(3)>:nth-child(3) { animation-duration: .45s } .is-active .brand-benefits__item:nth-child(4) { animation-duration: .4s } .is-active .brand-benefits__item:nth-child(4), .is-active .brand-benefits__item:nth-child(4)>* { animation-delay: .4s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .is-active .brand-benefits__item:nth-child(4)>:first-child { animation-duration: .15s } .is-active .brand-benefits__item:nth-child(4)>:nth-child(2) { animation-duration: .3s } .is-active .brand-benefits__item:nth-child(4)>:nth-child(3) { animation-duration: .45s } .is-active .brand-benefits__item:nth-child(5) { animation-duration: .5s } .is-active .brand-benefits__item:nth-child(5), .is-active .brand-benefits__item:nth-child(5)>* { animation-delay: .5s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .is-active .brand-benefits__item:nth-child(5)>:first-child { animation-duration: .15s } .is-active .brand-benefits__item:nth-child(5)>:nth-child(2) { animation-duration: .3s } .is-active .brand-benefits__item:nth-child(5)>:nth-child(3) { animation-duration: .45s } .is-active .brand-benefits__item:nth-child(6) { animation-duration: .6s } .is-active .brand-benefits__item:nth-child(6), .is-active .brand-benefits__item:nth-child(6)>* { animation-delay: .6s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .is-active .brand-benefits__item:nth-child(6)>:first-child { animation-duration: .15s } .is-active .brand-benefits__item:nth-child(6)>:nth-child(2) { animation-duration: .3s } .is-active .brand-benefits__item:nth-child(6)>:nth-child(3) { animation-duration: .45s } .is-active .brand-benefits__item:nth-child(7) { animation-duration: .7s } .is-active .brand-benefits__item:nth-child(7), .is-active .brand-benefits__item:nth-child(7)>* { animation-delay: .7s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .is-active .brand-benefits__item:nth-child(7)>:first-child { animation-duration: .15s } .is-active .brand-benefits__item:nth-child(7)>:nth-child(2) { animation-duration: .3s } .is-active .brand-benefits__item:nth-child(7)>:nth-child(3) { animation-duration: .45s } .is-active .brand-benefits__item:nth-child(8) { animation-duration: .8s } .is-active .brand-benefits__item:nth-child(8), .is-active .brand-benefits__item:nth-child(8)>* { animation-delay: .8s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .is-active .brand-benefits__item:nth-child(8)>:first-child { animation-duration: .15s } .is-active .brand-benefits__item:nth-child(8)>:nth-child(2) { animation-duration: .3s } .is-active .brand-benefits__item:nth-child(8)>:nth-child(3) { animation-duration: .45s } .is-active .brand-benefits__item:nth-child(9) { animation-duration: .9s } .is-active .brand-benefits__item:nth-child(9), .is-active .brand-benefits__item:nth-child(9)>* { animation-delay: .9s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .is-active .brand-benefits__item:nth-child(9)>:first-child { animation-duration: .15s } .is-active .brand-benefits__item:nth-child(9)>:nth-child(2) { animation-duration: .3s } .is-active .brand-benefits__item:nth-child(9)>:nth-child(3) { animation-duration: .45s } .is-active .brand-benefits__item:nth-child(10) { animation-duration: 1s } .is-active .brand-benefits__item:nth-child(10), .is-active .brand-benefits__item:nth-child(10)>* { animation-delay: 1s; animation-fill-mode: both; animation-name: MegaSliceInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .is-active .brand-benefits__item:nth-child(10)>:first-child { animation-duration: .15s } .is-active .brand-benefits__item:nth-child(10)>:nth-child(2) { animation-duration: .3s } .is-active .brand-benefits__item:nth-child(10)>:nth-child(3) { animation-duration: .45s } .brand-benefits__item .icon { width: 65px; height: 65px; fill: #16c3d9 } .brand-benefits__item:nth-child(n+5) { margin-top: 40px } .brand-benefits__title { color: #333; font-size: 14px; padding: 10px 0 0; font-weight: 600 } .brand-benefits__link { display: block; max-width: 290px; margin: 80px auto 30px; color: #2c3d51; width: 100%; transition: opacity .3s ease; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; font-weight: 600 } .brand-benefits__link:focus, .brand-benefits__link:hover { opacity: .75 } .brand-benefits__link span { -ms-flex: 1; flex: 1 } .brand-benefits__link .icon { -ms-flex-preferred-size: 40px; flex-basis: 40px; max-height: 40px; vertical-align: middle; display: inline-block; stroke: #2c3d51; margin-right: 10px } .brand-benefits--porto .brand-benefits__item .icon { fill: #5378cf } .brand-benefits--porto+.brand-benefits__link { color: #5378cf } .brand-benefits--porto+.brand-benefits__link .icon { stroke: #5378cf } .hold-benefits .full__subtitle, .hold-benefits .full__title { opacity: 0 } .hold-benefits.is-active .full__title { animation: fadeAndScale .41s ease both } .hold-benefits.is-active .full__subtitle { animation: fadeAndScale .5s ease both } .discounts-hold { background-color: #f5f7f8 } .discounts { -ms-flex-align: center; align-items: center } .discounts__info { max-width: 440px; padding-right: 20px } .discounts__info p { font-size: 18px; color: #b1b1b1 } .discounts__title { color: #4a4a4a; font-size: 30px; line-height: 1.2; margin-bottom: 10px; font-weight: 700 } .discounts__numbers { max-width: 600px } .discounts-box { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; position: relative } .discounts-box__number { color: #5378cf; font-size: 80px; line-height: 1; font-weight: 800; transform: translateX(-10px) } .discounts-box__number span { font-size: 16px; display: block; text-align: left; font-weight: 600; position: relative } .discounts-box__number span:after { content: ""; left: 35px; width: calc(100% - 45px); height: calc(100% + 7px); position: absolute; background-image: radial-gradient(ellipse at center, #1e8fff 25%, transparent 0); background-size: 10px 10px; opacity: .4 } .discounts-box__info { background-color: #fff; padding: 25px 25px 25px 100px } .discounts-box__info p { color: #666; font-size: 16px } .discounts-box__info p:first-child { color: #000; margin-top: 5px } .discounts-box__icon { width: 40px; height: 40px; position: absolute; left: 30px; top: 50%; transform: translateY(-50%) } .discounts-box__icon:after { position: absolute; left: 10px; bottom: 0; width: 20px; height: 20px; background-color: #caf1f6; content: ""; border-radius: 50%; z-index: 0 } .discounts-box__icon .icon { z-index: 1; stroke: #000; width: 100%; position: relative } .discounts-box__icon--download .icon { height: 35px } .discounts-box__icon--ok .icon { height: 45px } .discounts-box+.discounts-box { margin-top: 20px } .discounts-box:nth-child(n) .discounts-box__info { position: relative; transform-style: preserve-3d } .discounts-box:nth-child(n) .discounts-box__info:before { position: absolute; height: 140px; width: 140px; content: ""; z-index: -1; background-size: 10px 10px; transform: translateZ(-1px) } .discounts-box:nth-child(n) .discounts-box__info:after { position: absolute; top: calc(100% - 24px); left: 50%; transform: translateX(-50%) translateZ(-1px); width: 95%; height: 60px; content: ""; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .05) -50%, transparent 75%); z-index: -1 } .discounts-box:first-child .discounts-box__info:before { left: 80px; top: -30px; background-image: radial-gradient(ellipse at center, #d4d3d6 25%, transparent 0) } .discounts-box:nth-child(2) .discounts-box__info:before { right: -27px; bottom: -27px; background-image: radial-gradient(ellipse at center, #1c85fd 25%, transparent 0) } .discounts__info { opacity: 0 } .is-active .discounts .discounts__info { animation: fadeAndScale .41s ease both } .is-active .discounts .discounts-box { transition-duration: .5s } .is-active .discounts .discounts-box:nth-child(2) { transition-duration: .59s } .hero-porto { width: 100%; min-height: 85vh; background: url("/betheme/images/group-people-hero.jpg") 100% no-repeat; background-size: cover; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; position: relative } .hero-porto.is-low { background-image: url("/betheme/images/group-people-hero-low.jpg"); background-size: 100% 100%; background-repeat: no-repeat } .hero-porto>.container { margin-top: auto; margin-bottom: auto } .hero-porto__info { max-width: 590px } .hero-porto__title { font-size: 40px; color: #fff; line-height: 1.4; margin-bottom: 15px; font-weight: 700; animation: fade .6s ease both } .hero-porto__note { color: #fff; font-size: 18px; animation: fade 1.2s ease both } .hero-porto__note strong { display: block; font-weight: 700 } .hero-porto__footer { width: 100%; background-color: #fff; color: #4e4e4e; padding: 25px 20px; text-align: center; font-size: 16px; font-weight: 600 } .hero-porto__footer-link { border: 0; font-weight: 700; color: #5378cf } .hero-porto__footer-link:focus, .hero-porto__footer-link:hover { text-decoration: underline } .hero-porto__form { animation: fadeIn 1s ease both } .hero-porto__arrow { width: 30px; height: 20px; position: absolute; bottom: 35px; left: 50%; margin-left: -15px; z-index: 1; animation: arrow 2s cubic-bezier(.72, -.01, .14, 1.03) 1s infinite; cursor: pointer; border: none } .hero-porto__arrow:after, .hero-porto__arrow:before { content: ""; width: 20px; height: 5px; background-color: #fff; border-radius: 28px; position: absolute } .hero-porto__arrow:before { transform-origin: right center; transform: translate(-5px, 17px) rotate(45deg); animation: arrow-left 2s cubic-bezier(.72, -.01, .14, 1.03) 1s infinite } .hero-porto__arrow:after { transform-origin: left center; transform: translate(13px, 16px) rotate(-45deg); animation: arrow-right 2s cubic-bezier(.72, -.01, .14, 1.03) 1s infinite } .why-porto-auto { position: relative; background-color: #f5f7f8 } .why-porto-auto__hold { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between } .why-porto-auto__list { font-size: 16px; width: 50% } .why-porto-auto__list-item { position: relative; transition: background-color .35s ease-in, box-shadow .35s ease-in; will-change: transintion, box-shadow } .why-porto-auto__item-label { display: inline-block; height: 33px; width: 33px; background-color: #5378cf; border-radius: 50%; text-align: center; color: #fff; line-height: 33px; margin: 20px 0 5px } .why-porto-auto__item-title { font-weight: 700 } .why-porto-auto__item-text { color: #666 } .why-porto-auto__sidebar { position: relative; width: 440px; height: 410px } .why-porto-auto__sidebar-image { transform-style: preserve-3d; display: inline-block; position: absolute } .why-porto-auto__sidebar-image img { display: block } .why-porto-auto__sidebar-image:first-child { box-shadow: 0 10px 29px 0 rgba(0, 0, 0, .17); left: 0; top: 0 } .why-porto-auto__sidebar-image:first-child:after { position: absolute; bottom: 0; left: 0; transform: translateX(-45%) translateY(-60%) translateZ(-1px); height: 138px; width: 138px; content: ""; background-image: radial-gradient(ellipse at center, #d4d3d6 25%, transparent 0); background-size: 10px 10px; z-index: -1 } .why-porto-auto__sidebar-image:last-child { box-shadow: 0 35px 35px -25px rgba(0, 0, 0, .1); right: 0; top: 125px; z-index: 1 } .why-porto-auto__sidebar-image:last-child:after { position: absolute; bottom: 0; right: 0; transform: translateX(35%) translateY(30%) translateZ(-1px); height: 138px; width: 138px; content: ""; background-image: radial-gradient(ellipse at center, #1c85fd 25%, transparent 0); background-size: 10px 10px; z-index: -1 } .why-porto-auto__sidebar-image:last-child:before { display: inline-block; position: absolute; top: 0; content: ""; width: 100%; height: 70px; box-shadow: 0 -35px 35px -25px rgba(0, 0, 0, .1) } .why-porto-auto .motion-wrapper-enter .why-porto-auto__sidebar-image { opacity: 0 } .why-porto-auto .motion-wrapper-enter .why-porto-auto__sidebar-image:first-child { transform: translateX(-50px) } .why-porto-auto .motion-wrapper-enter .why-porto-auto__sidebar-image:last-child { transform: translateX(50px) } .why-porto-auto .motion-wrapper-enter-active .why-porto-auto__sidebar-image:nth-child(n) { transition: opacity 1s ease, transform 1s ease; opacity: 1; transform: translateX(0) } .why-porto-auto .motion-wrapper-exit .why-porto-auto__sidebar-image { opacity: 1; transition: opacity .3s ease } .why-porto-auto .full__subtitle, .why-porto-auto .full__title, .why-porto-auto .motion-wrapper-exit-active .why-porto-auto__sidebar-image { opacity: 0 } .why-porto-auto.is-active .full__title { animation: fadeAndScale .41s ease both } .why-porto-auto.is-active .full__subtitle { animation: fadeAndScale .5s ease both } .why-porto-auto.is-active .why-porto-auto__list { transition-duration: .59s } .why-porto-auto.is-active .why-porto-auto__sidebar { transition-duration: .68s } .products-cards { max-width: 1060px; margin: 40px auto 0; width: 100% } .products-cards-appear .products-cards__item, .products-cards-enter .products-cards__item { transform: translateX(-40px); opacity: 0 } .products-cards-appear-active .products-cards__item, .products-cards-enter-active .products-cards__item { transition-timing-function: cubic-bezier(.71, .32, .1, .94); transform: translateX(0); opacity: 1 } .products-cards-appear-active .products-cards__item:first-child, .products-cards-enter-active .products-cards__item:first-child { transition-duration: .5s } .products-cards-appear-active .products-cards__item:nth-child(2), .products-cards-enter-active .products-cards__item:nth-child(2) { transition-duration: .41s } .products-cards-appear-active .products-cards__item:nth-child(3), .products-cards-enter-active .products-cards__item:nth-child(3) { transition-duration: .59s } .products-cards-exit .products-cards__item { transform: translateX(0); opacity: 1 } .products-cards-exit-active .products-cards__item { transition-timing-function: cubic-bezier(.71, .32, .1, .94); transform: translateX(40px); opacity: 0 } .products-cards-exit-active .products-cards__item:first-child { transition-duration: .5s } .products-cards-exit-active .products-cards__item:nth-child(2) { transition-duration: .41s } .products-cards-exit-active .products-cards__item:nth-child(3) { transition-duration: .59s } .products-cards__item { background-color: #fff; padding: 15px 35px 30px; max-width: 290px; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; height: auto; position: relative } .products-cards__item>.logo { padding-top: 10px; text-align: center; width: 100%; padding-bottom: 10px } .products-cards__item>.logo img { max-width: 90px; margin: 0 auto } .products-cards__item .box-price { text-align: center; width: 100% } .products-cards__item .box-price__description { border-top: 1px solid #d4dcdf; margin-top: 30px; padding-top: 30px } .products-cards__item .box-price__description-text { color: #888; font-size: 14px; line-height: 21px } .products-cards__item .box-price__price { color: #2c3d51; display: inline-block; font-size: 40px; font-weight: 800; line-height: 32px; position: relative; margin-bottom: 10px; padding-left: 30px; text-align: center } .products-cards__item .box-price__price span { font-size: 16px; left: 0; line-height: 16px; position: absolute; text-align: right; width: 25px } .products-cards__item .box-price__price .installment-number { content: attr(data-installmentNumber); font-weight: 400; top: 0 } .products-cards__item .box-price__price .installment-symble { bottom: 0; content: "R$" } .products-cards__item .box-price__price-franchise { color: #666; font-size: 14px; line-height: 19px; margin-top: 6px } .products-cards__item .box-price__price-franchise strong { color: #333 } .products-cards__item>.btn { max-width: 100%; margin-left: auto; margin-right: auto; margin-top: 30px; height: 50px } .products-cards__item>.btn .icon { stroke: #fff } .products-cards .staw { margin: 0 auto; width: 94% } .products-cards .staw__holder { padding-bottom: 0 } .products-cards .staw__arrow { margin-top: -11px; top: 50% } .products-cards .staw__arrow--next { right: -4% } .products-cards .staw__arrow--prev { left: -4% } .products-cards .staw__dots { margin-bottom: 30px; margin-top: 20px } .products-cards .staw__dot { background-color: #d4dcdf; height: 6px; width: 6px } .products-cards .staw__dot--active { background-color: #16c3d9 } .products-coverages { margin-bottom: 50px } .products-coverages>.container { padding-top: 40px } .products-coverages>.container>* { transition-property: all; transition-timing-function: cubic-bezier(.78, 0, .24, .99) } .products-coverages>.container>:first-child { transition-duration: .81s } .products-coverages>.container>:nth-child(2) { transition-duration: .88s } .products-coverages>.container>:nth-child(3) { transition-duration: .95s } .products-coverages__block { margin-top: 40px; padding: 60px 0; width: 100%; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .products-coverages__title { font-weight: 700; font-size: 20px } .products-coverages__item { -ms-flex: 1; flex: 1 } .products-coverages__item>.icon { fill: #888; height: 31px; margin-bottom: 10px; stroke: #d4dcdf; width: 34px } .products-coverages__item-header { margin-bottom: 15px; margin-top: 20px } .products-coverages__item-title { color: #333; font-size: 14px; line-height: 1.4; display: inline-block; vertical-align: middle } .products-coverages__item-text { color: #666; font-size: 14px; line-height: 20px; padding-left: 15px; position: relative; margin-bottom: 10px } .products-coverages__item-text:last-of-type { margin-bottom: 10px } .products-coverages__item-text:before { background-color: #16c3d9; border-radius: 50px; content: ""; position: absolute; left: 0; top: 6px; height: 7px; width: 7px } .products-coverages__item-text strong { color: #333; font-weight: 600 } .progressbar { display: -ms-flexbox; display: flex; position: relative; margin: 0 auto; max-width: 600px; width: 100%; margin-bottom: 25px } .progressbar__car { position: absolute; top: -8px; transition: all .8s cubic-bezier(1, -.09, .31, 1.15); z-index: 100; width: 45px; height: 40px; z-index: 3 } .progressbar__separator { -ms-flex: 1; flex: 1; background-color: #d4dcdf; height: 1px; margin-left: 5px; margin-right: 5px; transform: translateY(10px) } .progressbar__separator.active { background-color: #2c3d51 } .progressbar .icons { display: -ms-flexbox; display: flex; min-width: 45px; -ms-flex-align: center; align-items: center; cursor: pointer; -ms-flex-direction: column; flex-direction: column; position: relative; z-index: 3 } .progressbar .icons.completed>.icon-check { background-color: #2c3d51; border-color: #2c3d51; color: #2c3d51 } .progressbar .icons.completed>.icon-check:before { animation: completed-check .5s cubic-bezier(1, -.49, .31, 1.65) .6s forwards; background-color: transparent; border-bottom: 2px solid #fff; border-left: 2px solid #fff; content: ""; height: 6px; left: 50%; position: absolute; top: 50%; transform: translate3d(-5px, -4px, 0) rotate(-45deg) scale(0); width: 10px; z-index: 8 } .progressbar .icons.current>.icon-check { opacity: 0 } .progressbar .icons.current>.icon-label { color: #2c3d51; font-weight: 700; margin-top: 3px } .progressbar .icons.disabled { cursor: not-allowed } .progressbar .icons.disabled:after, .progressbar .icons.disabled:before { content: none } .progressbar .icons.disabled>.icon { fill: #d4dcdf; stroke: #d4dcdf } .progressbar .icons.disabled>.icon-label { color: #d4dcdf } .progressbar .icons>.icon-check { border-radius: 50%; border: 1px solid #d4dcdf; color: #d4dcdf; font-size: 14px; font-weight: 700; height: 20px; margin-bottom: 10px; position: relative; text-align: center; transition: background-color .6s ease, opacity .6s ease; width: 20px } .progressbar .icons>.icon-label { color: #666; font-size: 14px } .progressbar>.icon-click { cursor: pointer; width: 33.3%; height: 100%; z-index: 10; position: absolute; left: 0; top: 0 } .progressbar>.icon-click:nth-of-type(n+2) { margin-left: 33.3% } .progressbar>.icon-click:last-of-type { margin-left: 66.6% } .progressbar .icon { height: 30px; width: 25px; fill: #2c3d51; stroke: #2c3d51 } .progressbar-appear .progressbar__car, .progressbar-enter .progressbar__car { opacity: 0 } .progressbar-appear .progressbar__separator, .progressbar-enter .progressbar__separator { transform: translateY(10px) scaleX(0); transform-origin: left center } .progressbar-appear .icons, .progressbar-enter .icons { opacity: 0; transform: translateY(-40px) } .progressbar-appear-active .icons, .progressbar-enter-active .icons { transition-timing-function: cubic-bezier(.71, .32, .1, .94); opacity: 1; transform: translateY(0) } .progressbar-appear-active .icons:first-of-type, .progressbar-enter-active .icons:first-of-type { transition-duration: .41s } .progressbar-appear-active .icons:nth-of-type(2), .progressbar-enter-active .icons:nth-of-type(2) { transition-duration: .5s } .progressbar-appear-active .icons:nth-of-type(3), .progressbar-enter-active .icons:nth-of-type(3) { transition-duration: .59s } .progressbar-appear-active .icons:nth-of-type(4), .progressbar-enter-active .icons:nth-of-type(4) { transition-duration: .68s } .progressbar-appear-active .progressbar__separator, .progressbar-enter-active .progressbar__separator { transform: translateY(10px) scaleX(1) } .progressbar-appear-active .progressbar__separator:first-of-type, .progressbar-enter-active .progressbar__separator:first-of-type { transition-duration: .5s } .progressbar-appear-active .progressbar__separator:nth-of-type(2), .progressbar-enter-active .progressbar__separator:nth-of-type(2) { transition-duration: .59s } .progressbar-appear-active .progressbar__separator:nth-of-type(3), .progressbar-enter-active .progressbar__separator:nth-of-type(3) { transition-duration: .68s } .progressbar-appear-active .progressbar__car, .progressbar-enter-active .progressbar__car { opacity: 1; transition-duration: .86s } @keyframes backgroundAnimation { 0% { width: 0 } to { width: 100% } } @keyframes completed-circle { 0% { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: 1 } } @keyframes completed-check { 0% { transform: translate3d(-5px, -4px, 0) rotate(-45deg) scale(0) } to { transform: translate3d(-5px, -4px, 0) rotate(-45deg) scale(1) } } @keyframes completed-check-mobile { 0% { transform: translate3d(-5px, -4px, 0) rotate(-45deg) scale(0) } to { transform: translate3d(-5px, -4px, 0) rotate(-45deg) scale(1) } } .proposal-step .motion-button-icon { padding: 16px 30px } .proposal-step__on-animation:first-child { animation-duration: .1s } .proposal-step__on-animation:first-child, .proposal-step__on-animation:first-child > * { animation-delay: .1s; animation-fill-mode: both; animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__on-animation:first-child > *:nth-child(1) { animation-duration: .15s } .proposal-step__on-animation:first-child > *:nth-child(2) { animation-duration: .3s } .proposal-step__on-animation:first-child > *:nth-child(3) { animation-duration: .45s } .proposal-step__on-animation:first-child > *:nth-child(4) { animation-duration: .6s } .proposal-step__on-animation:first-child > *:nth-child(5) { animation-duration: .75s } .proposal-step__on-animation:first-child > *:nth-child(6) { animation-duration: .9s } .proposal-step__on-animation:first-child > *:nth-child(7) { animation-duration: 1.05s } .proposal-step__on-animation:first-child > *:nth-child(8) { animation-duration: 1.2s } .proposal-step__on-animation:nth-child(2) { animation-duration: .2s } .proposal-step__on-animation:nth-child(2), .proposal-step__on-animation:nth-child(2)>* { animation-delay: .2s; animation-fill-mode: both; animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__on-animation:nth-child(2)>:first-child { animation-duration: .15s } .proposal-step__on-animation:nth-child(2)>:nth-child(2) { animation-duration: .3s } .proposal-step__on-animation:nth-child(2)>:nth-child(3) { animation-duration: .45s } .proposal-step__on-animation:nth-child(2)>:nth-child(4) { animation-duration: .6s } .proposal-step__on-animation:nth-child(2)>:nth-child(5) { animation-duration: .75s } .proposal-step__on-animation:nth-child(2)>:nth-child(6) { animation-duration: .9s } .proposal-step__on-animation:nth-child(2)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__on-animation:nth-child(2)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__on-animation:nth-child(3) { animation-duration: .3s } .proposal-step__on-animation:nth-child(3), .proposal-step__on-animation:nth-child(3)>* { animation-delay: .3s; animation-fill-mode: both; animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__on-animation:nth-child(3)>:first-child { animation-duration: .15s } .proposal-step__on-animation:nth-child(3)>:nth-child(2) { animation-duration: .3s } .proposal-step__on-animation:nth-child(3)>:nth-child(3) { animation-duration: .45s } .proposal-step__on-animation:nth-child(3)>:nth-child(4) { animation-duration: .6s } .proposal-step__on-animation:nth-child(3)>:nth-child(5) { animation-duration: .75s } .proposal-step__on-animation:nth-child(3)>:nth-child(6) { animation-duration: .9s } .proposal-step__on-animation:nth-child(3)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__on-animation:nth-child(3)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__on-animation:nth-child(4) { animation-duration: .4s } .proposal-step__on-animation:nth-child(4), .proposal-step__on-animation:nth-child(4)>* { animation-delay: .4s; animation-fill-mode: both; animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__on-animation:nth-child(4)>:first-child { animation-duration: .15s } .proposal-step__on-animation:nth-child(4)>:nth-child(2) { animation-duration: .3s } .proposal-step__on-animation:nth-child(4)>:nth-child(3) { animation-duration: .45s } .proposal-step__on-animation:nth-child(4)>:nth-child(4) { animation-duration: .6s } .proposal-step__on-animation:nth-child(4)>:nth-child(5) { animation-duration: .75s } .proposal-step__on-animation:nth-child(4)>:nth-child(6) { animation-duration: .9s } .proposal-step__on-animation:nth-child(4)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__on-animation:nth-child(4)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__on-animation:nth-child(5) { animation-duration: .5s } .proposal-step__on-animation:nth-child(5), .proposal-step__on-animation:nth-child(5)>* { animation-delay: .5s; animation-fill-mode: both; animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__on-animation:nth-child(5)>:first-child { animation-duration: .15s } .proposal-step__on-animation:nth-child(5)>:nth-child(2) { animation-duration: .3s } .proposal-step__on-animation:nth-child(5)>:nth-child(3) { animation-duration: .45s } .proposal-step__on-animation:nth-child(5)>:nth-child(4) { animation-duration: .6s } .proposal-step__on-animation:nth-child(5)>:nth-child(5) { animation-duration: .75s } .proposal-step__on-animation:nth-child(5)>:nth-child(6) { animation-duration: .9s } .proposal-step__on-animation:nth-child(5)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__on-animation:nth-child(5)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__on-animation:nth-child(6) { animation-duration: .6s } .proposal-step__on-animation:nth-child(6), .proposal-step__on-animation:nth-child(6)>* { animation-delay: .6s; animation-fill-mode: both; animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__on-animation:nth-child(6)>:first-child { animation-duration: .15s } .proposal-step__on-animation:nth-child(6)>:nth-child(2) { animation-duration: .3s } .proposal-step__on-animation:nth-child(6)>:nth-child(3) { animation-duration: .45s } .proposal-step__on-animation:nth-child(6)>:nth-child(4) { animation-duration: .6s } .proposal-step__on-animation:nth-child(6)>:nth-child(5) { animation-duration: .75s } .proposal-step__on-animation:nth-child(6)>:nth-child(6) { animation-duration: .9s } .proposal-step__on-animation:nth-child(6)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__on-animation:nth-child(6)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__on-animation:nth-child(7) { animation-duration: .7s } .proposal-step__on-animation:nth-child(7), .proposal-step__on-animation:nth-child(7)>* { animation-delay: .7s; animation-fill-mode: both; animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__on-animation:nth-child(7)>:first-child { animation-duration: .15s } .proposal-step__on-animation:nth-child(7)>:nth-child(2) { animation-duration: .3s } .proposal-step__on-animation:nth-child(7)>:nth-child(3) { animation-duration: .45s } .proposal-step__on-animation:nth-child(7)>:nth-child(4) { animation-duration: .6s } .proposal-step__on-animation:nth-child(7)>:nth-child(5) { animation-duration: .75s } .proposal-step__on-animation:nth-child(7)>:nth-child(6) { animation-duration: .9s } .proposal-step__on-animation:nth-child(7)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__on-animation:nth-child(7)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__on-animation:nth-child(8) { animation-duration: .8s } .proposal-step__on-animation:nth-child(8), .proposal-step__on-animation:nth-child(8)>* { animation-delay: .8s; animation-fill-mode: both; animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__on-animation:nth-child(8)>:first-child { animation-duration: .15s } .proposal-step__on-animation:nth-child(8)>:nth-child(2) { animation-duration: .3s } .proposal-step__on-animation:nth-child(8)>:nth-child(3) { animation-duration: .45s } .proposal-step__on-animation:nth-child(8)>:nth-child(4) { animation-duration: .6s } .proposal-step__on-animation:nth-child(8)>:nth-child(5) { animation-duration: .75s } .proposal-step__on-animation:nth-child(8)>:nth-child(6) { animation-duration: .9s } .proposal-step__on-animation:nth-child(8)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__on-animation:nth-child(8)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__on-animation:nth-child(9) { animation-duration: .9s } .proposal-step__on-animation:nth-child(9), .proposal-step__on-animation:nth-child(9)>* { animation-delay: .9s; animation-fill-mode: both; animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__on-animation:nth-child(9)>:first-child { animation-duration: .15s } .proposal-step__on-animation:nth-child(9)>:nth-child(2) { animation-duration: .3s } .proposal-step__on-animation:nth-child(9)>:nth-child(3) { animation-duration: .45s } .proposal-step__on-animation:nth-child(9)>:nth-child(4) { animation-duration: .6s } .proposal-step__on-animation:nth-child(9)>:nth-child(5) { animation-duration: .75s } .proposal-step__on-animation:nth-child(9)>:nth-child(6) { animation-duration: .9s } .proposal-step__on-animation:nth-child(9)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__on-animation:nth-child(9)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__on-animation:nth-child(10) { animation-duration: 1s } .proposal-step__on-animation:nth-child(10), .proposal-step__on-animation:nth-child(10)>* { animation-delay: 1s; animation-fill-mode: both; animation-name: fadeIn; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__on-animation:nth-child(10)>:first-child { animation-duration: .15s } .proposal-step__on-animation:nth-child(10)>:nth-child(2) { animation-duration: .3s } .proposal-step__on-animation:nth-child(10)>:nth-child(3) { animation-duration: .45s } .proposal-step__on-animation:nth-child(10)>:nth-child(4) { animation-duration: .6s } .proposal-step__on-animation:nth-child(10)>:nth-child(5) { animation-duration: .75s } .proposal-step__on-animation:nth-child(10)>:nth-child(6) { animation-duration: .9s } .proposal-step__on-animation:nth-child(10)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__on-animation:nth-child(10)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__off-animation:first-child { animation-duration: .1s } .proposal-step__off-animation:first-child, .proposal-step__off-animation:first-child > * { animation-delay: .1s; animation-fill-mode: both; animation-name: fadeInReverse; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__off-animation:first-child > *:nth-child(1) { animation-duration: .15s } .proposal-step__off-animation:first-child > *:nth-child(2) { animation-duration: .3s } .proposal-step__off-animation:first-child > *:nth-child(3) { animation-duration: .45s } .proposal-step__off-animation:first-child > *:nth-child(4) { animation-duration: .6s } .proposal-step__off-animation:first-child > *:nth-child(5) { animation-duration: .75s } .proposal-step__off-animation:first-child > *:nth-child(6) { animation-duration: .9s } .proposal-step__off-animation:first-child > *:nth-child(7) { animation-duration: 1.05s } .proposal-step__off-animation:first-child > *:nth-child(8) { animation-duration: 1.2s } .proposal-step__off-animation:nth-child(2) { animation-duration: .2s } .proposal-step__off-animation:nth-child(2), .proposal-step__off-animation:nth-child(2)>* { animation-delay: .2s; animation-fill-mode: both; animation-name: fadeInReverse; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__off-animation:nth-child(2)>:first-child { animation-duration: .15s } .proposal-step__off-animation:nth-child(2)>:nth-child(2) { animation-duration: .3s } .proposal-step__off-animation:nth-child(2)>:nth-child(3) { animation-duration: .45s } .proposal-step__off-animation:nth-child(2)>:nth-child(4) { animation-duration: .6s } .proposal-step__off-animation:nth-child(2)>:nth-child(5) { animation-duration: .75s } .proposal-step__off-animation:nth-child(2)>:nth-child(6) { animation-duration: .9s } .proposal-step__off-animation:nth-child(2)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__off-animation:nth-child(2)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__off-animation:nth-child(3) { animation-duration: .3s } .proposal-step__off-animation:nth-child(3), .proposal-step__off-animation:nth-child(3)>* { animation-delay: .3s; animation-fill-mode: both; animation-name: fadeInReverse; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__off-animation:nth-child(3)>:first-child { animation-duration: .15s } .proposal-step__off-animation:nth-child(3)>:nth-child(2) { animation-duration: .3s } .proposal-step__off-animation:nth-child(3)>:nth-child(3) { animation-duration: .45s } .proposal-step__off-animation:nth-child(3)>:nth-child(4) { animation-duration: .6s } .proposal-step__off-animation:nth-child(3)>:nth-child(5) { animation-duration: .75s } .proposal-step__off-animation:nth-child(3)>:nth-child(6) { animation-duration: .9s } .proposal-step__off-animation:nth-child(3)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__off-animation:nth-child(3)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__off-animation:nth-child(4) { animation-duration: .4s } .proposal-step__off-animation:nth-child(4), .proposal-step__off-animation:nth-child(4)>* { animation-delay: .4s; animation-fill-mode: both; animation-name: fadeInReverse; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__off-animation:nth-child(4)>:first-child { animation-duration: .15s } .proposal-step__off-animation:nth-child(4)>:nth-child(2) { animation-duration: .3s } .proposal-step__off-animation:nth-child(4)>:nth-child(3) { animation-duration: .45s } .proposal-step__off-animation:nth-child(4)>:nth-child(4) { animation-duration: .6s } .proposal-step__off-animation:nth-child(4)>:nth-child(5) { animation-duration: .75s } .proposal-step__off-animation:nth-child(4)>:nth-child(6) { animation-duration: .9s } .proposal-step__off-animation:nth-child(4)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__off-animation:nth-child(4)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__off-animation:nth-child(5) { animation-duration: .5s } .proposal-step__off-animation:nth-child(5), .proposal-step__off-animation:nth-child(5)>* { animation-delay: .5s; animation-fill-mode: both; animation-name: fadeInReverse; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__off-animation:nth-child(5)>:first-child { animation-duration: .15s } .proposal-step__off-animation:nth-child(5)>:nth-child(2) { animation-duration: .3s } .proposal-step__off-animation:nth-child(5)>:nth-child(3) { animation-duration: .45s } .proposal-step__off-animation:nth-child(5)>:nth-child(4) { animation-duration: .6s } .proposal-step__off-animation:nth-child(5)>:nth-child(5) { animation-duration: .75s } .proposal-step__off-animation:nth-child(5)>:nth-child(6) { animation-duration: .9s } .proposal-step__off-animation:nth-child(5)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__off-animation:nth-child(5)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__off-animation:nth-child(6) { animation-duration: .6s } .proposal-step__off-animation:nth-child(6), .proposal-step__off-animation:nth-child(6)>* { animation-delay: .6s; animation-fill-mode: both; animation-name: fadeInReverse; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__off-animation:nth-child(6)>:first-child { animation-duration: .15s } .proposal-step__off-animation:nth-child(6)>:nth-child(2) { animation-duration: .3s } .proposal-step__off-animation:nth-child(6)>:nth-child(3) { animation-duration: .45s } .proposal-step__off-animation:nth-child(6)>:nth-child(4) { animation-duration: .6s } .proposal-step__off-animation:nth-child(6)>:nth-child(5) { animation-duration: .75s } .proposal-step__off-animation:nth-child(6)>:nth-child(6) { animation-duration: .9s } .proposal-step__off-animation:nth-child(6)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__off-animation:nth-child(6)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__off-animation:nth-child(7) { animation-duration: .7s } .proposal-step__off-animation:nth-child(7), .proposal-step__off-animation:nth-child(7)>* { animation-delay: .7s; animation-fill-mode: both; animation-name: fadeInReverse; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__off-animation:nth-child(7)>:first-child { animation-duration: .15s } .proposal-step__off-animation:nth-child(7)>:nth-child(2) { animation-duration: .3s } .proposal-step__off-animation:nth-child(7)>:nth-child(3) { animation-duration: .45s } .proposal-step__off-animation:nth-child(7)>:nth-child(4) { animation-duration: .6s } .proposal-step__off-animation:nth-child(7)>:nth-child(5) { animation-duration: .75s } .proposal-step__off-animation:nth-child(7)>:nth-child(6) { animation-duration: .9s } .proposal-step__off-animation:nth-child(7)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__off-animation:nth-child(7)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__off-animation:nth-child(8) { animation-duration: .8s } .proposal-step__off-animation:nth-child(8), .proposal-step__off-animation:nth-child(8)>* { animation-delay: .8s; animation-fill-mode: both; animation-name: fadeInReverse; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__off-animation:nth-child(8)>:first-child { animation-duration: .15s } .proposal-step__off-animation:nth-child(8)>:nth-child(2) { animation-duration: .3s } .proposal-step__off-animation:nth-child(8)>:nth-child(3) { animation-duration: .45s } .proposal-step__off-animation:nth-child(8)>:nth-child(4) { animation-duration: .6s } .proposal-step__off-animation:nth-child(8)>:nth-child(5) { animation-duration: .75s } .proposal-step__off-animation:nth-child(8)>:nth-child(6) { animation-duration: .9s } .proposal-step__off-animation:nth-child(8)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__off-animation:nth-child(8)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__off-animation:nth-child(9) { animation-duration: .9s } .proposal-step__off-animation:nth-child(9), .proposal-step__off-animation:nth-child(9)>* { animation-delay: .9s; animation-fill-mode: both; animation-name: fadeInReverse; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__off-animation:nth-child(9)>:first-child { animation-duration: .15s } .proposal-step__off-animation:nth-child(9)>:nth-child(2) { animation-duration: .3s } .proposal-step__off-animation:nth-child(9)>:nth-child(3) { animation-duration: .45s } .proposal-step__off-animation:nth-child(9)>:nth-child(4) { animation-duration: .6s } .proposal-step__off-animation:nth-child(9)>:nth-child(5) { animation-duration: .75s } .proposal-step__off-animation:nth-child(9)>:nth-child(6) { animation-duration: .9s } .proposal-step__off-animation:nth-child(9)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__off-animation:nth-child(9)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__off-animation:nth-child(10) { animation-duration: 1s } .proposal-step__off-animation:nth-child(10), .proposal-step__off-animation:nth-child(10)>* { animation-delay: 1s; animation-fill-mode: both; animation-name: fadeInReverse; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .proposal-step__off-animation:nth-child(10)>:first-child { animation-duration: .15s } .proposal-step__off-animation:nth-child(10)>:nth-child(2) { animation-duration: .3s } .proposal-step__off-animation:nth-child(10)>:nth-child(3) { animation-duration: .45s } .proposal-step__off-animation:nth-child(10)>:nth-child(4) { animation-duration: .6s } .proposal-step__off-animation:nth-child(10)>:nth-child(5) { animation-duration: .75s } .proposal-step__off-animation:nth-child(10)>:nth-child(6) { animation-duration: .9s } .proposal-step__off-animation:nth-child(10)>:nth-child(7) { animation-duration: 1.05s } .proposal-step__off-animation:nth-child(10)>:nth-child(8) { animation-duration: 1.2s } .proposal-step__title-box { margin-bottom: 25px } .proposal-step__text { color: #888; font-size: 16px; line-height: 25px } .proposal-step__text--bold { color: #333; font-weight: 700; margin-bottom: 15px } .proposal-step__text--last { margin-bottom: 40px } .proposal-step__text--large { font-size: 20px } .proposal-step__text .link { font-weight: 700; text-decoration: underline } .proposal-step__text strong { color: #333 } .proposal-step__whatsapp { font-size: 14px } .proposal-step__whatsapp-link { color: #2c3d51; font-weight: 800 } .proposal-step__button-box { margin-top: 36px; margin-bottom: 20px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center } .proposal-step__button-box .btn-link { margin: 0 30px 0 0; max-width: inherit; width: inherit } .proposal-step__button-box .motion-button-icon:first-of-type { margin-right: 12px } .proposal-step__question-box+.proposal-step__question-box { margin-top: 30px } .proposal-step__action-buttons .motion-button-icon { margin-top: 10px; width: 100%; -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; max-width: 365px } input[type=radio] { position: absolute; left: -9999px } input[type=radio]+.label-radio { color: #666; cursor: pointer; display: block; padding-left: 22px; position: relative; text-align: left; font-size: 14px; width: 100% } input[type=radio]+.label-radio+input[type=radio]+.label-radio { margin-top: 15px } input[type=radio]+.label-radio:after, input[type=radio]+.label-radio:before { border-radius: 50%; border-width: 1px; border-style: solid; content: ""; position: absolute } input[type=radio]+.label-radio:before { background-color: #fff; border-color: #d4dcdf; transition: border-color .2s; top: 0; left: 0; height: 18px; width: 18px } input[type=radio]+.label-radio:after { border-color: #2c3d51; background-color: #2c3d51; transform: scale(.7); opacity: 0; transition: opacity .3s ease; top: 0; left: 0; height: 18px; width: 18px } input[type=radio]:checked+.label-radio:before { border-color: #2c3d51 } input[type=radio]:checked+.label-radio:after { opacity: 1 } input[type=radio]:disabled+.label-radio { opacity: .5; cursor: not-allowed } input[type=radio]+.label-radioicon { background-color: #fff; border-radius: 5px; color: #666; cursor: pointer; font-size: 12px; line-height: 1.4; text-align: center; transition: all .3s; padding: 20px 6px; height: 100%; width: 100%; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center } .field-wrapper:not(.-current):not(.-completed) input[type=radio]+.label-radioicon { box-shadow: none } .box-home-type input[type=radio]+.label-radioicon { padding: 20px } input[type=radio]+.label-radioicon>.icon { margin-bottom: 10px; fill: #d4dcdf; stroke: #d4dcdf; transition: all .5s; height: 40px; width: 40px } input[type=radio]:checked+.label-radioicon { background-color: #2c3d51; box-shadow: 0 2px 15px rgba(0, 0, 0, .1); color: #fff } input[type=radio]:checked+.label-radioicon>.icon { fill: #fff; stroke: #fff } input[type=radio]:disabled+.label-radioicon { opacity: .5; cursor: not-allowed } input[type=radio]+.label-radio-button { -ms-flex-align: center; align-items: center; border-radius: 100px; border: 1px solid #2c3d51; color: #2c3d51; cursor: pointer; display: -ms-flexbox; display: flex; padding: 0 30px; font-size: 14px; transition: background .3s, color .3s, border .3s; -ms-flex-pack: center; justify-content: center; height: 30px; width: 100%; font-weight: 700; height: 70px; max-width: 100% } input[type=radio]+.label-radio-button:hover, input[type=radio]:checked+.label-radio-button { background-color: #2c3d51; color: #fff } input[type=radio]:disabled+.label-radio-button { opacity: .5; cursor: not-allowed } .range { color: #666; display: -ms-flexbox; display: flex; font-size: 14px; margin: 20px 0 0; position: relative; -ms-flex-align: center; align-items: center } .range.-small { font-size: 12px } .range-bonus { margin-top: 50px } .range-bonus .label { color: #4e4e4e; font-size: 14px; font-weight: 700; line-height: 19px } .range>.max-val, .range>.min-val { position: absolute; top: 140% } .range>.max-val.-small, .range>.min-val.-small { top: 102% } .range>.min-val { left: 0 } .range>.max-val { right: 0; text-align: right } .range+.current-val { color: #16c3d9; display: block; font-size: 36px; font-weight: 700; text-align: center } .filter-page .range+.current-val { color: #333 } .range+.current-val.-small { font-size: 14px } .range+.current-val:after { content: attr(data-per-month); color: #666; display: block; font-size: 14px; font-weight: 400; transform: translateY(-8px) } .range>.input[type=range] { -webkit-appearance: none; background: transparent; -ms-flex-positive: 1; flex-grow: 1; height: 10px; border-radius: 6px; margin: 0; position: relative; z-index: 2; margin-bottom: 15px } .range>.input[type=range]:focus { outline: none } .range>.input[type=range]::-webkit-slider-runnable-track { animate: .2s; border-radius: 5px; border: 0 solid #000; box-shadow: 0 0 0 #000; cursor: pointer; height: 10px; width: 100% } .range>.input[type=range].-small::-webkit-slider-runnable-track { height: 8px } .range>.input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background: #16c3d9; border-radius: 50px; border: 1px solid #16c3d9; box-shadow: 0 0 0 rgba(22, 195, 217, .4); transition: all .2s ease; cursor: pointer; height: 25px; margin-top: -8px; width: 25px; will-change: transform, box-shadow; position: relative } .range>.input[type=range]::-webkit-slider-thumb:active { transform: scale(1.5); box-shadow: 0 0 0 5px rgba(22, 195, 217, .4) } .range>.input[type=range].-small::-webkit-slider-thumb { background: #2c3d51; border-color: #2c3d51; margin-top: -7px; height: 22px; width: 22px } .range>.input[type=range].-small::-webkit-slider-thumb:active { transform: scale(1.2); box-shadow: 0 0 0 5px rgba(61, 42, 155, .4) } .range>.input[type=range]::-moz-range-track { border-radius: 5px; cursor: pointer; height: 0; width: 100% } .range>.input[type=range]::-moz-range-thumb { background: #16c3d9; border-radius: 50px; border: 1px solid #16c3d9; box-shadow: 0 0 0 #000; cursor: pointer; height: 30px; width: 30px } .range>.input[type=range]::-ms-thumb { background: #16c3d9; border-radius: 50px; border: 1px solid #16c3d9; box-shadow: 0 0 0 #000; cursor: pointer; height: 30px; margin-top: 1px; width: 30px } .range-numbers { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .range-numbers>.input[type=range] { width: 100%; background: #dadde5 } .numbers-list { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; margin-top: 15px; width: 100% } .numbers-list__item { color: #888; font-size: 14px; line-height: 19px } .numbers-list__item.active { color: #16c3d9; font-size: 36px; font-weight: 700 } .related { -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin: 0 auto; max-width: 950px } .related, .related__item { display: -ms-flexbox; display: flex } .related__item { padding: 30px; background-color: #fff; -ms-flex-preferred-size: 27%; flex-basis: 27%; -ms-flex-direction: column; flex-direction: column } .related__title { font-weight: 700; font-size: 16px; margin-bottom: 10px; color: #333; line-height: 1.4 } .related__text { font-size: 14px; color: #666; margin-bottom: 25px } .related__link { color: #2c3d51; font-size: 14px; font-weight: 600; position: relative; z-index: 1; margin-top: auto } .related__link:focus, .related__link:hover { color: #2c3d51; opacity: .8 } .related__link-icon { display: inline-block; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 50%; vertical-align: middle; margin-right: 10px; position: relative } .related__link-icon:after { position: absolute; width: 7px; height: 7px; content: ""; border: 2px solid currentColor; left: 5px; top: 5px; transform: rotate(45deg); border-left: none; border-bottom: none } .renovation { background-color: #2c3d51 } .renovation .full__subtitle { max-width: 515px; margin-left: auto; margin-right: auto } .renovation__form { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center } .renovation__form-field+.renovation__form-field { margin-left: 5px } .renovation__form-field--date, .renovation__form-field:last-child { width: 160px } .renovation__form-field--email { -ms-flex: 1; flex: 1 } .renovation__form-field .form-field { margin-top: 0 } .renovation__form-field input[type=email], .renovation__form-field input[type=tel] { padding: 17px 15px; border-radius: 2px } .renovation__form-field input[type=email]:focus, .renovation__form-field input[type=tel]:focus { border-color: #2c3d51 } .renovation__form-message { text-align: center; color: #fff; display: block; font-weight: 700; animation: fadeIn .45s ease both; width: 100%; font-size: 18px } .renovation .full__subtitle, .renovation .full__title { opacity: 0 } .renovation.is-active .full__title { animation: fadeAndScale .41s ease both } .renovation.is-active .full__subtitle { animation: fadeAndScale .5s ease both } .renovation.is-active .renovation__form { transition-duration: .59s } .brands { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; width: 100%; max-width: 1060px; margin: 0 auto } .brands--porto { background: linear-gradient(188.31deg, #5378cf, #032e58) } .brands--porto .full__subtitle, .brands--porto .full__title { color: #fff } .brands__item { width: 28%; border: 1px solid #efefef } .brands--porto .brands__item { border-radius: 4px } .brands .brand { padding: 50px; text-align: center; position: relative; background-color: #fff; transform-style: preserve-3d } .brands .brand:after { content: ""; transform: translateZ(-1px); position: absolute; width: 90%; height: 10px; top: calc(100% - 10px); left: 5%; z-index: -1; box-shadow: 0 10px 27px 0 rgba(0, 0, 0, .25) } .brands .brand__thumb { max-width: 75px; height: 80px; width: 100%; margin: 0 auto; display: block; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center } .brands .brand__thumb.icon-brand-azul { max-width: 95px } .brands .brand__thumb img { width: 100%; height: auto } .brands .brand__title { color: #333; font-size: 18px; margin-top: 40px; margin-bottom: 10px } .brands .brand__description { color: #4e4e4e; font-size: 14px } .brands-hold .full__subtitle, .brands-hold .full__title { opacity: 0 } .brands-hold.is-active .full__title { animation: fadeAndScale .41s ease both } .brands-hold.is-active .full__subtitle { animation: fadeAndScale .5s ease both } .brands-hold.is-active .brands__item { transition-duration: .5s } .brands-hold.is-active .brands__item:nth-child(2) { transition-duration: .59s } .brands-hold.is-active .brands__item:nth-child(3) { transition-duration: .68s } .hero { height: 95vh; min-height: 95vh; background-color: #2c3d51; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-direction: column; flex-direction: column; position: relative } .hero .loader { stroke: #fff } .hero>* { position: relative; z-index: 1 } .hero__bg { left: 0; top: 0; position: absolute; width: 100%; height: 100%; z-index: 0; background-size: auto 100%; animation: fade .3s ease; background-image: url("/betheme/images/bg-hero-seguros.jpg"); background-position: top; background-repeat: no-repeat; background-size: cover } .hero__bg_capilar { left: 0; top: 0; position: absolute; width: 100%; height: 100%; z-index: 0; background-size: auto 100%; animation: fade .3s ease; background-image: url("/betheme/images/bg-hero-capilar.jpg"); background-position: top; background-repeat: no-repeat; background-size: cover } .hero__arrow { width: 30px; height: 20px; position: absolute; bottom: 35px; left: 50%; margin-left: -15px; z-index: 1; animation: arrow 2s cubic-bezier(.72, -.01, .14, 1.03) 1s infinite; cursor: pointer; border: none } .hero__arrow:after, .hero__arrow:before { content: ""; width: 20px; height: 5px; background-color: #fff; border-radius: 28px; position: absolute } .hero__arrow:before { transform-origin: right center; transform: translate(-5px, 17px) rotate(45deg); animation: arrow-left 2s cubic-bezier(.72, -.01, .14, 1.03) 1s infinite } .hero__arrow:after { transform-origin: left center; transform: translate(13px, 16px) rotate(-45deg); animation: arrow-right 2s cubic-bezier(.72, -.01, .14, 1.03) 1s infinite } .hero__hold { -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; width: 100%; max-width: 1280px; margin-bottom: auto; margin-top: auto; padding-left: 20px; padding-right: 20px } .hero__hold, .hero__info { display: -ms-flexbox; display: flex } .hero__info { text-align: left; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 30px 30px 30px 130px; max-width: 800px } .hero__hat { font-size: 18px; padding-bottom: 20px; animation: fade .3s .5s ease both; color: #fff; font-weight: 400 } .hero__title { font-weight: 700; font-size: 36px; color: #fff; line-height: 1.25; margin-bottom: 20px; animation: fade .8s .5s ease both; -ms-flex-preferred-size: 60%; flex-basis: 60% } .hero__sub { color: #fff; font-size: 24px; font-weight: 400; animation: fade 1.3s .5s ease both } .hero__sub.-small { font-size: 20px; margin-bottom: 5px } .hero__welcome { animation: fadeIn 1.8s .5s ease both; -ms-flex-preferred-size: 330px; flex-basis: 330px; background-color: #2c3d51; padding: 38px 30px; color: #fff } .hero__welcome-title { font-size: 24px; font-weight: 700; line-height: 35px; margin-bottom: 20px } .hero__welcome-text { font-size: 14px; line-height: 23px; margin-bottom: 36px } .hero__welcome .btn { max-width: 100%; text-transform: uppercase } .hero__welcome .btn:not(:first-of-type) { margin-top: 16px } .hero .initial-form { animation: fadeIn 1.8s .5s ease both } @keyframes arrow { 1%, 50%, to { transform: translateY(0); opacity: 1 } 55% { opacity: 1 } 74% { transform: translateY(25px); opacity: 0 } 75% { transform: translateY(-25px); opacity: 0 } } @keyframes arrow-left { 1%, 50%, to { transform: translate(-5px, 17px) rotate(45deg) } 74% { transform: translate(-5px, 17px) rotate(60deg) } 80% { transform: translate(-5px, 17px) rotate(60deg) } } @keyframes arrow-right { 1%, 50%, to { transform: translate(13px, 16px) rotate(-45deg) } 74% { transform: translate(13px, 16px) rotate(-60deg) } 80% { transform: translate(13px, 16px) rotate(-60deg) } } .depoiment-section { padding: 100px 0 } .depoiment-section .icon { width: 90px; height: 12px; margin-bottom: 15px } .depoiment-section__item { background-color: #fff; border-radius: 4px; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; height: 100%; max-width: 620px; padding: 40px; position: relative } .depoiment-section__item:after { position: absolute; content: ""; display: block; height: 100%; width: 100%; background-color: #2c3d51; opacity: .9; transition: opacity .5s ease; left: 0; top: 0 } .staw__slide--active .depoiment-section__item { box-shadow: 0 0 40px 0 rgba(47, 13, 73, .87) } .staw__slide--active .depoiment-section__item:after { opacity: 0 } .depoiment-section__title { color: #000; font-size: 14px; font-weight: 600; line-height: 1.8; margin-bottom: 3px } .depoiment-section__description { color: #666; font-size: 14px; line-height: 21px; margin-bottom: 28px; margin-top: 15px } .depoiment-section__bottom-block { display: -ms-flexbox; display: flex; -ms-flex-wrap: no-wrap; flex-wrap: no-wrap; -ms-flex-pack: justify; justify-content: space-between; margin-top: auto } .depoiment-section__name { color: #000; font-size: 12px; font-weight: 600; line-height: 20px } .depoiment-section__date { color: #9b9b9b; font-size: 12px; line-height: 20px } .depoiment-section .staw { position: relative } .depoiment-section .staw__dots { margin-top: 30px } .depoiment-section .staw__dot--active { background-color: #16c3d9 } .depoiment-section .full__subtitle, .depoiment-section .full__title { opacity: 0 } .is-active .depoiment-section .full__title { animation: fadeAndScale .41s ease both } .is-active .depoiment-section .full__subtitle { animation: fadeAndScale .5s ease both } .is-active .depoiment-section .staw { transition-duration: .59s } .hold-testimonials { padding-right: 0; padding-left: 0 } .why-auto-insurance { padding-top: 20px } .why-auto-insurance__header { position: relative } .why-auto-insurance__thumb { position: absolute; right: 0; top: 0; height: 100%; width: 58% } .why-auto-insurance__info { width: 34%; min-height: 360px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-direction: column; flex-direction: column; position: relative } .why-auto-insurance__info>* { text-align: left } .why-auto-insurance__reasons { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; padding-top: 50px } .why-auto-insurance .insurance-reasons__item { padding: 50px; position: relative; background-color: #fff; transform-style: preserve-3d; width: 28%; border: 1px solid #efefef } .why-auto-insurance .insurance-reasons__item:after { content: ""; transform: translateZ(-1px); position: absolute; width: 90%; height: 10px; top: calc(100% - 10px); left: 5%; z-index: -1; box-shadow: 0 10px 27px 0 rgba(0, 0, 0, .25) } .why-auto-insurance .insurance-reasons__title { margin-bottom: 10px; color: #333; font-size: 18px; font-weight: 700 } .why-auto-insurance .insurance-reasons__text { color: #666; font-size: 14px; line-height: 1.4 } .staw { position: relative } .staw__holder { padding-bottom: 30px } .staw__arrow { border-top: 5px solid #16c3d9; border-left: 5px solid #16c3d9; top: 0; height: 22px; width: 22px } .staw__arrow--next { right: 12px } .staw__arrow--prev { left: 12px } .custom-steps { max-width: 700px; width: 100% } .custom-steps__item#insurers .proposal-step__whatsapp { padding-top: 20px } .custom-steps__item.current { background-color: #f7f7f7 } .custom-steps__item:not(:last-of-type) { border-bottom: 1px solid #d4dcdf } .custom-step-header { padding: 40px 80px 40px 30px; position: relative } .custom-step-header.obfuscated { opacity: .3 } .custom-step-header.obfuscated button { cursor: not-allowed } .custom-step-header__check-icon { border: 2px solid #16c3d9; height: 44px; width: 44px; position: absolute; right: 30px; top: calc(50% - 22px); border-radius: 50% } .obfuscated .custom-step-header__check-icon { border-color: #d4dcdf } .skipped .custom-step-header__check-icon { background-color: #d4dcdf; border-color: #d4dcdf } .active .custom-step-header__check-icon { background-color: #16c3d9 } .active .custom-step-header__check-icon:after { content: ""; border-bottom: 3px solid #fff; border-left: 3px solid #fff; height: 10px; width: 20px; margin: 1px 0 0 -9px; left: 50%; position: absolute; top: 50%; transform: rotate(-45deg); transform-origin: top left; animation: check .5s ease both } .custom-step-header__title { color: #333; font-size: 24px; line-height: 35px; display: -ms-flexbox; display: flex } .custom-step-header__title [class^=btn] { margin-left: 20px; position: relative; max-width: inherit; width: inherit; height: inherit; font-weight: 400 } .current .custom-step-header__title [class^=btn] { display: none } .custom-step-header__title [class^=btn]:before { background-color: #d4dcdf; content: ""; display: block; height: 20px; transform: translateY(-50%); position: absolute; left: -10px; top: 50%; width: 1px } .custom-step-header__subtitle { color: #888; font-size: 14px; line-height: 21px } .custom-step__content { background-color: #f7f7f7; padding: 0 30px 20px } .current .custom-step__content { max-height: 5000px; opacity: 1; padding: 0 30px 40px } .custom-step__content-enter { opacity: 0; transform: translateX(-40px) } .custom-step__content-enter-active { transition: opacity .45s ease, transform .45s ease; transform: translateX(0); opacity: 1; will-change: opacity, transform } .custom-step__content-enter-done { transform: translateX(0); opacity: 1 } .custom-step__content-exit-active { opacity: 0; transform: translateX(40px); transition: opacity .45s ease, transform .45s ease; will-change: opacity, transform } .custom-step__component:not(.custom-step__payment) { border-top: 1px solid #d4dcdf; padding-top: 20px } .current .custom-step__component:first-child { animation-duration: .1s } .current .custom-step__component:first-child, .current .custom-step__component:first-child > * { animation-delay: .1s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .current .custom-step__component:first-child > *:nth-child(1) { animation-duration: .15s } .current .custom-step__component:first-child > *:nth-child(2) { animation-duration: .3s } .current .custom-step__component:first-child > *:nth-child(3) { animation-duration: .45s } .current .custom-step__component:nth-child(2) { animation-duration: .2s } .current .custom-step__component:nth-child(2), .current .custom-step__component:nth-child(2)>* { animation-delay: .2s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .current .custom-step__component:nth-child(2)>:first-child { animation-duration: .15s } .current .custom-step__component:nth-child(2)>:nth-child(2) { animation-duration: .3s } .current .custom-step__component:nth-child(2)>:nth-child(3) { animation-duration: .45s } .current .custom-step__component:nth-child(3) { animation-duration: .3s } .current .custom-step__component:nth-child(3), .current .custom-step__component:nth-child(3)>* { animation-delay: .3s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .current .custom-step__component:nth-child(3)>:first-child { animation-duration: .15s } .current .custom-step__component:nth-child(3)>:nth-child(2) { animation-duration: .3s } .current .custom-step__component:nth-child(3)>:nth-child(3) { animation-duration: .45s } .current .custom-step__component:nth-child(4) { animation-duration: .4s } .current .custom-step__component:nth-child(4), .current .custom-step__component:nth-child(4)>* { animation-delay: .4s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .current .custom-step__component:nth-child(4)>:first-child { animation-duration: .15s } .current .custom-step__component:nth-child(4)>:nth-child(2) { animation-duration: .3s } .current .custom-step__component:nth-child(4)>:nth-child(3) { animation-duration: .45s } .current .custom-step__component:nth-child(5) { animation-duration: .5s } .current .custom-step__component:nth-child(5), .current .custom-step__component:nth-child(5)>* { animation-delay: .5s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .current .custom-step__component:nth-child(5)>:first-child { animation-duration: .15s } .current .custom-step__component:nth-child(5)>:nth-child(2) { animation-duration: .3s } .current .custom-step__component:nth-child(5)>:nth-child(3) { animation-duration: .45s } .current .custom-step__component:nth-child(6) { animation-duration: .6s } .current .custom-step__component:nth-child(6), .current .custom-step__component:nth-child(6)>* { animation-delay: .6s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .current .custom-step__component:nth-child(6)>:first-child { animation-duration: .15s } .current .custom-step__component:nth-child(6)>:nth-child(2) { animation-duration: .3s } .current .custom-step__component:nth-child(6)>:nth-child(3) { animation-duration: .45s } .current .custom-step__component:nth-child(7) { animation-duration: .7s } .current .custom-step__component:nth-child(7), .current .custom-step__component:nth-child(7)>* { animation-delay: .7s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .current .custom-step__component:nth-child(7)>:first-child { animation-duration: .15s } .current .custom-step__component:nth-child(7)>:nth-child(2) { animation-duration: .3s } .current .custom-step__component:nth-child(7)>:nth-child(3) { animation-duration: .45s } .current .custom-step__component:nth-child(8) { animation-duration: .8s } .current .custom-step__component:nth-child(8), .current .custom-step__component:nth-child(8)>* { animation-delay: .8s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .current .custom-step__component:nth-child(8)>:first-child { animation-duration: .15s } .current .custom-step__component:nth-child(8)>:nth-child(2) { animation-duration: .3s } .current .custom-step__component:nth-child(8)>:nth-child(3) { animation-duration: .45s } .current .custom-step__component:nth-child(9) { animation-duration: .9s } .current .custom-step__component:nth-child(9), .current .custom-step__component:nth-child(9)>* { animation-delay: .9s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .current .custom-step__component:nth-child(9)>:first-child { animation-duration: .15s } .current .custom-step__component:nth-child(9)>:nth-child(2) { animation-duration: .3s } .current .custom-step__component:nth-child(9)>:nth-child(3) { animation-duration: .45s } .current .custom-step__component:nth-child(10) { animation-duration: 1s } .current .custom-step__component:nth-child(10), .current .custom-step__component:nth-child(10)>* { animation-delay: 1s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .current .custom-step__component:nth-child(10)>:first-child { animation-duration: .15s } .current .custom-step__component:nth-child(10)>:nth-child(2) { animation-duration: .3s } .current .custom-step__component:nth-child(10)>:nth-child(3) { animation-duration: .45s } .custom-step__navigation { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 20px; -ms-flex-pack: justify; justify-content: space-between } .custom-step__navigation--notext { -ms-flex-pack: end; justify-content: flex-end } .custom-step__navigation--text { cursor: pointer; max-height: 20px } .custom-step__navigation--button { background-color: #2c3d51; border-radius: 4px; color: #fff; font-size: 14px; font-weight: 700; padding: 20px 45px } .custom-step__navigation .motion-button-icon .icon { height: 18px; width: 18px } .custom-step__policy { text-align: center; padding-top: 40px } .custom-step__policy .documents__box { background-color: inherit; margin-top: 0; padding: 40px 0 0 } .custom-step__policy .documents__box:first-child { animation-duration: .1s } .custom-step__policy .documents__box:first-child, .custom-step__policy .documents__box:first-child > * { animation-delay: .1s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .custom-step__policy .documents__box:first-child > *:nth-child(1) { animation-duration: .15s } .custom-step__policy .documents__box:first-child > *:nth-child(2) { animation-duration: .3s } .custom-step__policy .documents__box:first-child > *:nth-child(3) { animation-duration: .45s } .custom-step__policy .documents__box:nth-child(2) { animation-duration: .2s } .custom-step__policy .documents__box:nth-child(2), .custom-step__policy .documents__box:nth-child(2)>* { animation-delay: .2s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .custom-step__policy .documents__box:nth-child(2)>:first-child { animation-duration: .15s } .custom-step__policy .documents__box:nth-child(2)>:nth-child(2) { animation-duration: .3s } .custom-step__policy .documents__box:nth-child(2)>:nth-child(3) { animation-duration: .45s } .custom-step__policy .documents__box:nth-child(3) { animation-duration: .3s } .custom-step__policy .documents__box:nth-child(3), .custom-step__policy .documents__box:nth-child(3)>* { animation-delay: .3s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .custom-step__policy .documents__box:nth-child(3)>:first-child { animation-duration: .15s } .custom-step__policy .documents__box:nth-child(3)>:nth-child(2) { animation-duration: .3s } .custom-step__policy .documents__box:nth-child(3)>:nth-child(3) { animation-duration: .45s } .custom-step__policy .documents__box:nth-child(4) { animation-duration: .4s } .custom-step__policy .documents__box:nth-child(4), .custom-step__policy .documents__box:nth-child(4)>* { animation-delay: .4s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .custom-step__policy .documents__box:nth-child(4)>:first-child { animation-duration: .15s } .custom-step__policy .documents__box:nth-child(4)>:nth-child(2) { animation-duration: .3s } .custom-step__policy .documents__box:nth-child(4)>:nth-child(3) { animation-duration: .45s } .custom-step__policy .documents__box:nth-child(5) { animation-duration: .5s } .custom-step__policy .documents__box:nth-child(5), .custom-step__policy .documents__box:nth-child(5)>* { animation-delay: .5s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .custom-step__policy .documents__box:nth-child(5)>:first-child { animation-duration: .15s } .custom-step__policy .documents__box:nth-child(5)>:nth-child(2) { animation-duration: .3s } .custom-step__policy .documents__box:nth-child(5)>:nth-child(3) { animation-duration: .45s } .custom-step__policy .documents__box:nth-child(6) { animation-duration: .6s } .custom-step__policy .documents__box:nth-child(6), .custom-step__policy .documents__box:nth-child(6)>* { animation-delay: .6s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .custom-step__policy .documents__box:nth-child(6)>:first-child { animation-duration: .15s } .custom-step__policy .documents__box:nth-child(6)>:nth-child(2) { animation-duration: .3s } .custom-step__policy .documents__box:nth-child(6)>:nth-child(3) { animation-duration: .45s } .custom-step__policy .documents__box:nth-child(7) { animation-duration: .7s } .custom-step__policy .documents__box:nth-child(7), .custom-step__policy .documents__box:nth-child(7)>* { animation-delay: .7s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .custom-step__policy .documents__box:nth-child(7)>:first-child { animation-duration: .15s } .custom-step__policy .documents__box:nth-child(7)>:nth-child(2) { animation-duration: .3s } .custom-step__policy .documents__box:nth-child(7)>:nth-child(3) { animation-duration: .45s } .custom-step__policy .documents__box:nth-child(8) { animation-duration: .8s } .custom-step__policy .documents__box:nth-child(8), .custom-step__policy .documents__box:nth-child(8)>* { animation-delay: .8s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .custom-step__policy .documents__box:nth-child(8)>:first-child { animation-duration: .15s } .custom-step__policy .documents__box:nth-child(8)>:nth-child(2) { animation-duration: .3s } .custom-step__policy .documents__box:nth-child(8)>:nth-child(3) { animation-duration: .45s } .custom-step__policy .documents__box:nth-child(9) { animation-duration: .9s } .custom-step__policy .documents__box:nth-child(9), .custom-step__policy .documents__box:nth-child(9)>* { animation-delay: .9s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .custom-step__policy .documents__box:nth-child(9)>:first-child { animation-duration: .15s } .custom-step__policy .documents__box:nth-child(9)>:nth-child(2) { animation-duration: .3s } .custom-step__policy .documents__box:nth-child(9)>:nth-child(3) { animation-duration: .45s } .custom-step__policy .documents__box:nth-child(10) { animation-duration: 1s } .custom-step__policy .documents__box:nth-child(10), .custom-step__policy .documents__box:nth-child(10)>* { animation-delay: 1s; animation-fill-mode: both; animation-name: fadeInY; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-direction: normal } .custom-step__policy .documents__box:nth-child(10)>:first-child { animation-duration: .15s } .custom-step__policy .documents__box:nth-child(10)>:nth-child(2) { animation-duration: .3s } .custom-step__policy .documents__box:nth-child(10)>:nth-child(3) { animation-duration: .45s } .custom-step__payment { padding: 0 20px } .component-header { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px solid #d4dcdf; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 40px; padding-bottom: 22px } .component-header__item { color: #333; font-size: 14px; line-height: 19px } .component-header__item-title { font-weight: 700 } .styleguide { margin: 0 auto; max-width: 1280px; padding: 150px 0; width: 90% } .styleguide__background-primary { background-color: #2c3d51; padding: 10px; margin-bottom: 40px } .styleguide__item { margin: 150px auto } .styleguide__title { font-size: 48px } .styleguide__subtitle, .styleguide__title { color: #333; font-weight: 700; text-transform: uppercase } .styleguide__subtitle { font-size: 36px; line-height: 40px; padding-left: 10px; margin-bottom: 50px; position: relative } .styleguide__subtitle:before { background-color: #16c3d9; content: ""; height: 100%; width: 5px; position: absolute; left: 0 } .styleguide__subtitle.-small { font-size: 16px; line-height: 24px; text-transform: inherit } .styleguide__subtitle.-small:before { background-color: #2c3d51 } .styleguide__subtitle.-reverse { color: #fff } .styleguide__subtitle.-reverse:before { background-color: #16c3d9 } .styleguide__colors { color: #fff; padding: 15px; text-align: center; font-weight: 700 } .styleguide__colors+.styleguide__colors { margin-top: 15px } .styleguide__colors.-primary { background-color: #2c3d51 } .styleguide__colors.-secondary { background-color: #a941f5 } .styleguide__colors.-error { background-color: #f52c4e } .styleguide__colors.-tertiary { background-color: #16c3d9 } .styleguide__colors.-title { background-color: #333 } .styleguide__colors.-text { background-color: #666 } .styleguide__colors.-placeholder { background-color: #bbc3c6 } .loading .price-installment .price-installment__discount, .styleguide__colors.-disabled { background-color: #d4dcdf } .loading .price-installment .price-installment__price { color: #d4dcdf } .insurers-cards-v2 { background-color: #fff; border: 2px solid #fff; box-sizing: border-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; position: relative; cursor: pointer; transition: border-color .2s ease-in; transition: all .2s ease-in } .insurers-cards-v2.loading { pointer-events: none; cursor: not-allowed } .insurers-cards-v2:hover { border-color: #2c3d51 } .insurers-cards-v2:after, .insurers-cards-v2:before { content: ""; position: absolute } .insurers-cards-v2:after { height: 6px; width: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); right: 30px; top: 30px; opacity: 0 } .insurers-cards-v2:before { right: 24px; top: 24px; height: 22px; width: 22px; border: 1px solid #d4dcdf; border-radius: 50% } .loading .insurers-cards-v2:before { background-color: #d4dcdf } .insurers-cards-v2.active { border-color: #2c3d51; box-shadow: 2px 3px 25px 0 rgba(132, 57, 187, .19); pointer-events: none; cursor: not-allowed } .insurers-cards-v2.active:after { opacity: 1 } .insurers-cards-v2.active:before { background-color: #2c3d51; border-color: #2c3d51 } .insurers-cards-v2+.insurers-cards-v2 { margin-top: 20px } .insurers-cards-v2__logo { -ms-flex-align: start; align-items: start; background-color: #fff; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; max-width: 170px; -ms-flex-order: 1; order: 1; padding: 25px } .insurers-cards-v2__logo>.name { display: none; color: #4e4e4e; font-weight: 700; font-size: 20px; line-height: 33px; margin-left: 16px } .insurers-cards-v2__logo .img { min-width: 81px; max-width: 81px; max-height: 81px; transition: all .2s ease-in } .loading .insurers-cards-v2__logo .img { color: #d4dcdf; filter: grayscale(1); opacity: .5 } .insurers-cards-v2 .price-installment { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column } .insurers-cards-v2 .price-installment__discount { background-color: #2c3d51; border-radius: 4px; color: #fff; font-size: 14px; height: 28px; margin-bottom: 20px; max-width: 90px; padding: 4px 8px; text-align: center } .loading .insurers-cards-v2 .price-installment__discount { background-color: #d4dcdf } .insurers-cards-v2 .price-installment__price { color: #1a1a1a; font-size: 24px; font-weight: 700; line-height: 20px; -ms-flex-order: 1; order: 1 } .insurers-cards-v2 .price-installment__number { color: #888; font-size: 12px; line-height: 21px; margin-bottom: 16px; -ms-flex-order: 2; order: 2 } .loading .insurers-cards-v2 .price-installment__number { color: #d4dcdf } .insurers-cards-v2__pricebox { border-left: 1px solid #e7e7e7; margin: 15px 0; min-width: 200px; -ms-flex-order: 3; order: 3; padding: 8px 0 8px 25px } .loading .insurers-cards-v2__pricebox { color: #d4dcdf } .insurers-cards-v2__pricebox .bold { font-weight: 700 } .insurers-cards-v2__pricebox .price-title { color: #444; font-size: 14px } .loading .insurers-cards-v2__pricebox .price-title { color: #d4dcdf } .insurers-cards-v2__pricebox .price-value { color: #444; font-size: 14px; position: relative } .loading .insurers-cards-v2__pricebox .price-value { color: #d4dcdf } .insurers-cards-v2__pricebox .price-full { color: #949494; font-size: 14px; position: relative; display: inline-block } .insurers-cards-v2__pricebox .price-full:after { content: ""; background-color: #d0021b; display: inline-block; height: 1px; right: 0; position: absolute; top: 50%; width: 76% } .loading .insurers-cards-v2__pricebox .price { color: #d4dcdf } .insurers-cards-v2__description { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; margin: 24px 25px 32px 0; max-width: 230px; -ms-flex-order: 2; order: 2; position: relative } .insurers-cards-v2__description>.benefits { color: #888; font-size: 14px; padding-left: 18px; margin-top: auto; position: relative } .insurers-cards-v2__description>.benefits:before { content: ""; position: absolute; height: 5px; width: 12px; border-left: 2px solid #2c3d51; border-bottom: 2px solid #2c3d51; transform: rotate(-45deg); left: 0; top: 6px } .loading .insurers-cards-v2__description>.benefits:before { border-color: #d4dcdf } .loading .insurers-cards-v2__description>.benefits { color: #d4dcdf } .insurers-cards-v2__description>.name { color: #4e4e4e; font-weight: 700; font-size: 20px; line-height: 1.4; transition: all .2s ease-in; margin-bottom: 10px } .loading .insurers-cards-v2__description>.name { color: #d4dcdf } .insurers-cards-v2__description>.description { color: #444; font-size: 14px; line-height: 22px; transition: all .2s ease-in } .loading .insurers-cards-v2__description>.description { color: #d4dcdf } .tooltip { vertical-align: middle; display: inline-block; position: relative; padding-left: 10px } .tooltip__box { position: absolute; left: -104px; top: calc(100% + 10px); width: 225px; max-width: 580px; background-color: #333; color: #fff; padding: 15px; font-size: 14px; z-index: 9999; display: none } .tooltip__box.is-visible { display: block; animation: fadeIn .35s ease } .tooltip__box:before { content: ""; position: absolute; left: 116px; top: -5px; width: 10px; height: 10px; transform: rotate(45deg); background-color: #333 } .tooltip__button { background: none; border: none } .tooltip__button:focus .icon, .tooltip__button:hover .icon { fill: #16c3d9 } .tooltip .icon { width: 16px; height: 16px; fill: #888; transition: both .3s ease } .tooltip--bonus { position: absolute; left: 85px; top: 5px; z-index: 999 } .tooltip--has-image .tooltip__box { width: 610px; padding: 0 } .tooltip--has-image .tooltip__title { width: 100% } .tooltip--has-image .tooltip__text { padding: 20px; -ms-flex: 1; flex: 1 } .tooltip--has-image .tooltip__text>:not(:first-child) { margin-top: 15px } .tooltip--has-image .tooltip__image { background-color: #2c3d51; padding: 20px } .tooltip--has-image .tooltip__image, .tooltip--has-image .tooltip__text { -ms-flex-preferred-size: 50%; flex-basis: 50% } .main-title { color: #333; font-size: 36px; line-height: 1.4; text-align: center; width: 100%; margin-bottom: 15px } .main-title, .main-title.-light { font-weight: 700 } .main-title.loading { text-align: center; margin: 0 auto 20px; position: relative } .main-title.-reverse { color: #fff } .main-title--small { font-size: 24px } .main-subtitle { color: #333; font-size: 16px; width: 100%; text-align: center } .main-subtitle.-reverse { color: #fff } .main-text { color: #4e4e4e; font-size: 14px; font-weight: 700 } .main-text.-lighter { font-weight: 400 } .main-text>.link-disclaimer { text-decoration: none; color: #666 } .main-text>.link-disclaimer:hover { text-decoration: underline } .main-text.-small { font-size: 10px } .main-text.-reverse { color: #fff } .loading-gif { display: block; margin: 0 auto } .urgency { max-height: 0; position: fixed; overflow: hidden; transition: all .3s linear; background-color: #6b2da7; z-index: 6; width: 100%; padding-top: 0; color: #fff; opacity: 0; top: 0; cursor: pointer } .urgency--visible { padding: 16px 11px 13px 18px; max-height: 76px; height: 76px; opacity: 1 } .urgency--menu { background: #fff; padding: 5px 0; box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .19) } .urgency--menu .header { left: 0; width: 100% } .urgency--menu .header .nav__link { color: #656565 } .urgency--menu .header .nav .nav__list-item--desktop { display: block } .urgency__holder { max-width: 970px; margin: 0 auto; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center } .urgency__button { background-color: #16c3d9; width: 148px; height: 47px; border-radius: 40px; line-height: 47px; text-align: center; font-weight: 700; text-transform: uppercase; font-size: 12px; max-width: 40%; transition: background .3s ease } .urgency__button:focus, .urgency__button:hover { background-color: #14afc3 } .urgency__clock-text { font-weight: 700; font-size: 14px; color: #fff; text-transform: uppercase; max-width: 60%; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center } .urgency__text { line-height: 16px; margin-left: 15px } .urgency__text--blue { color: #16c3d9 } .urgency .icon { width: 25px; height: 32px } .urgency--porto { top: 0 } .urgency--porto .urgency__button { background-color: #ecf2f5; color: #5378cf } .urgency--porto .urgency__button:focus, .urgency--porto .urgency__button:hover { background-color: #fff } .urgency--porto ul li.nav__list-item:first-child { display: none } .urgency .urgency__text--blue { color: #fff } .vehicle-card { -ms-flex-align: center; align-items: center; background-color: #fff; border-radius: 5px; text-align: left; margin: 0 auto; display: -ms-flexbox; display: flex; width: 100%; padding: 30px; max-width: 440px } .vehicle-card>.icon { fill: #16c3d9; stroke: #16c3d9; margin: 0 10px; height: 40px; width: 40px } .vehicle-card>.description-box { color: #666; margin: 10px; text-transform: uppercase } .vehicle-card>.description-box>.car-title { font-size: 10px; font-weight: 700 } .vehicle-card>.description-box>.car-description { font-size: 14px; line-height: 1.5 } .video-help { max-width: 1060px; margin: 60px auto 0; -ms-flex-align: center; align-items: center } .video-help, .video-help__video { display: -ms-flexbox; display: flex } .video-help__video { background-color: #2c3d51; height: 350px; transition: background .6s ease-in-out; z-index: 1; position: relative; width: 68%; overflow: hidden; padding: 65px 30px; } .video-help__video.active { background: #000 } .video-help__video.active iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .video-help__video .icon-box { border: 0; transition: transform .6s cubic-bezier(1, -.49, .31, 1.65); position: absolute; z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) } .video-help__video .icon-box.active { transform: scale(0) } .video-help__video .icon { height: 80px; width: 80px; cursor: pointer; transition: opacity .2s ease-in-out } .video-help__video .icon:hover { opacity: .7 } .video-help__thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden } .video-help__thumb img { height: 100%; max-width: none; position: relative; left: 50%; transform: translateX(-50%) } .video-help__info { background-color: #4ec2e1; padding: 80px 40px; position: relative; -ms-flex: 1; flex: 1 } .video-help__info-title { color: #333; font-size: 18px; font-weight: 800; line-height: 1.4; margin-bottom: 10px } .video-help__info-text { color: #333; font-size: 14px; line-height: 21px; margin-bottom: 50px } .video-help__info-box { border-radius: 4px; padding: 20px; background-color: #fff } .video-help__info-box>.text { color: #0b555e; font-weight: 600; font-size: 14px; line-height: 1.4; text-align: center } .video-help__info-box>.text span { color: #0d6975; display: block; font-size: 18px; font-weight: 600; margin: 5px 0 } .video-help--porto .video-help__info-box, .video-help--porto .video-help__video { background-color: #5378cf } .video-help--porto .video-help__info-box>.text, .video-help--porto .video-help__info-box>.text span { color: #fff } .video-help--porto .video-help__info { background-color: #f5f7f8 } .hold-video .full__subtitle, .hold-video .full__title { opacity: 0 } .hold-video.is-active .full__title { animation: fadeAndScale .41s ease both } .hold-video.is-active .full__subtitle { animation: fadeAndScale .5s ease both } .hold-video.is-active .video-help { transition-duration: .59s } .whatsapp-box { background-color: #51187b; padding: 45px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; color: #fff } .whatsapp-box>.icon { width: 35px; height: 35px; fill: #fff; margin-right: 10px } .whatsapp-box>p { max-width: 400px; font-size: 14px } .whatsapp-box>.btn { padding-left: 0; padding-right: 0; margin-right: 0; max-width: 245px; width: 100% } .auto-widget { height: 375px; width: 100%; overflow: hidden; position: relative; padding: 0 20px; background-color: #143564; background-repeat: no-repeat; background-position: top; background-image: url("/betheme/images/bg-man-widget.jpg"); display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; margin-top: auto } .auto-widget--first-step .auto-widget__info, .auto-widget--first-step .auto-widget__start-quotation-btn { animation: fadeOut .8s ease forwards; position: absolute; visibility: hidden } .auto-widget .initial-form, .auto-widget__info, .auto-widget__logo { animation: fadeIn .8s .5s ease both } .auto-widget__wrapper { width: 100%; height: 100%; padding: 10px 0 0; position: relative; z-index: 2; will-change: padding; transition: padding .65s ease-in-out } .auto-widget__logo { width: 100%; z-index: 2; display: inline-block; text-align: center } .auto-widget__logo img { width: 110px; height: auto } .auto-widget__logo span { font-size: 14.4px; color: #fff; font-weight: 700 } .auto-widget__info { padding: 0 25px; text-align: center } .auto-widget__hat { color: #fff; margin-bottom: 0; padding-bottom: 0; font-weight: 600; font-size: 14px } .auto-widget__sub { font-size: 14px; line-height: 19px; color: #fff; padding-top: 10px; font-weight: 500 } .auto-widget__hold { display: -ms-flexbox; display: flex; margin: 0; width: 100%; max-width: 800px } .auto-widget__title { font-size: 24px; font-weight: 700; line-height: 35px; color: #fff; padding-top: 1px } .auto-widget .initial-form { background-color: #2c3d51; animation: fade .8s .5s ease both; padding: 20px; max-width: 282px } .auto-widget .initial-form__title { display: none } .auto-widget .initial-form .input { height: 55px; padding: 25px 10px 10px } .auto-widget .initial-form .input-field input[name="startForm.payload.zip_code"] { border-bottom-left-radius: 2px; border-top-left-radius: 2px } .auto-widget .initial-form .input-field .input[name="startForm.payload.license_plate"] { border-bottom-right-radius: 2px; border-top-right-radius: 2px } .auto-widget .initial-form .plate-check { margin-top: 15px } .auto-widget .initial-form .form-field { margin: 0 0 17px; display: block; width: 100% } .auto-widget .initial-form .form-field+.form-field { margin: 0 } .auto-widget .initial-form .btn { height: 52px; position: relative; top: 0; right: 0; max-width: 100%; margin-top: 0 } .auto-widget__start-quotation-btn { display: none } .auto-widget__footer { width: 100%; padding: 10px; color: #fff; font-size: 14px; z-index: 10; position: relative; text-align: center } .auto-widget__footer-link { color: #16c3d9 } .logo-widgets { z-index: 2 } .logo-widgets__img { width: 28px; height: 19px } .logo-widgets__text { display: inline-block; margin-left: 5px; font-size: 14.4px; color: #fff; font-weight: 700 } .renovation-widget { height: 375px; width: 100%; overflow: hidden; position: relative; background-repeat: no-repeat; background-image: url("/betheme/images/renovation-widget-desktop.png"); background-size: cover } .renovation-widget__wrapper { position: relative } .renovation-widget__subtitle, .renovation-widget__title { color: #fff } .renovation-widget__title { padding: 20px 0 10px; max-width: 320px; font-weight: 700; line-height: 1.2 } .renovation-widget__subtitle { color: #fff; font-size: 14px; font-weight: 400 } .renovation-widget__cta { border: 0; outline: none; border-radius: 4px; color: #fff; font-size: 14px; text-transform: uppercase; font-weight: 700; will-change: background-color; transition: background-color .25s ease-in-out } .renovation-widget__cta, .renovation-widget__cta:active, .renovation-widget__cta:focus, .renovation-widget__cta:hover { background-color: #2c3d51 } .renovation-widget__cta:first-of-type { margin-right: 10px } .renovation-widget__disclaimer { color: #a4a4a4; font-size: 11px; padding-top: 30px } .renovation-widget__disclaimer a { color: inherit; text-decoration: underline } .renovation-widget__back-to-home { position: absolute; outline: none; border: 0; padding: 10px 10px 10px 35px; z-index: 1; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase } .renovation-widget__back-to-home:after, .renovation-widget__back-to-home:before { content: ""; position: absolute; display: inline-block; height: 10px; border: 2px solid #fff } .renovation-widget__back-to-home:after { width: 12px; height: 13px; top: 12px; left: 10px; transform: rotate(45deg); border-top: transparent; border-right: transparent } .renovation-widget__back-to-home:before { width: 13px; height: 12px; top: 8px; left: 10px; border-top: transparent; border-right: transparent; border-left: transparent } .renovation-widget .alert-step, .renovation-widget .quotation-step { max-width: 375px } .renovation-widget .alert-form, .renovation-widget .initial-form { background-color: #fff; padding: 15px } .renovation-widget .alert-form .input-field label, .renovation-widget .initial-form .input-field label { color: #2c3d51 } .renovation-widget .alert-form .input-field.input-valid:before, .renovation-widget .initial-form .input-field.input-valid:before { background-color: #2c3d51 } .renovation-widget .alert-form .field-input, .renovation-widget .alert-form .input, .renovation-widget .initial-form .field-input, .renovation-widget .initial-form .input { padding: 25px 10px 10px } .renovation-widget .initial-form .form-field:nth-child(2) { margin-top: 20px } .renovation-widget .initial-form__disclaimer, .renovation-widget .initial-form__title { display: none } .renovation-widget .initial-form .initial-form__tooltip-icon:focus:before, .renovation-widget .initial-form .initial-form__tooltip-icon:hover:before { right: 2px; left: auto; top: 42px } .renovation-widget .initial-form .initial-form__tooltip-icon:focus:after, .renovation-widget .initial-form .initial-form__tooltip-icon:hover:after { top: 85%; padding: 20px } .renovation-widget .initial-form__tooltip { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center } .renovation-widget .initial-form__tooltip .input-field { width: 100% } .renovation-widget .initial-form .plate-check input[type=checkbox]+.label-checkbox { font-size: 12px; color: #4e4e4e } .renovation-widget .initial-form .plate-check input[type=checkbox]:checked+.label-checkbox:before { background-color: #2c3d51; color: #2c3d51 } .renovation-widget .initial-form .input-field input[name="startForm.payload.license_plate"], .renovation-widget .initial-form .input-field input[name="startForm.payload.zip_code"] { border-radius: 2px } .renovation-widget .initial-form .btn.-tertiary:not(:disabled):not(.-outline) { background-color: #2c3d51; border-color: #2c3d51; height: 52px; position: relative; margin-top: 0 } .renovation-widget .alert-form .form-field:first-child { margin-top: 0 } .renovation-widget .alert-form .form-field+.form-field { margin-top: 20px } .renovation-widget .alert-form .field-input, .renovation-widget .alert-form .input { padding-top: 20px } .renovation-widget .alert-form button[type=submit] { margin-top: 20px; height: 52px } .renovation-widget .alert-form .form-sent-response+button[type=submit] { margin-top: 0 } .renovation-widget .form-sent-response { padding-top: 5px; color: #025a02; font-size: 12px } .brand-header--auto { background-color: #2c3d51 } .brand-header--porto { background-color: #5378cf } .brand-header--sematic { background-color: var(--primary) } .contact-page { padding-top: 60px } .contact-page--illustration .feedback-action { position: relative; z-index: 2; margin-top: 200px; max-width: 440px; margin-left: 600px } .contact-page--illustration .feedback-action>.icon { display: none } .contact-page--illustration .illustration { background-color: #fff; background-repeat: no-repeat; background-position: 0 100%; background-size: auto 670px; min-height: 700px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; position: relative; overflow: hidden } .contact-page--illustration .illustration:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; z-index: 3; content: ""; animation: openSection .75s ease .5s both } .contact-page--illustration .illustration:before { position: absolute; left: 0; top: 0; height: 95%; width: 830px; content: ""; background-image: url("/betheme/images/guy-notebook-illustration.svg"); background-position: 100% 100%; background-repeat: no-repeat; z-index: 1; animation: showGuy 1.4s ease .5s both } @keyframes openSection { 0% { transform: translateX(0) } to { transform: translateX(100%) } } @keyframes showGuy { 0% { transform: translateX(-150px) translateY(400px) } to { transform: translateX(0) translateY(0) } } .intro { background-color: #f7f7f7 } .intro>.container { padding: 45px 0; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; min-height: 100vh } .intro>.container>.main-title { margin-bottom: 10px; text-align: center } .intro>.container>.main-text { text-align: center } .intro>.container>.main-text:not(.-small) { margin-bottom: 30px } .loading-page { margin-bottom: 50px } .loading-page>.container { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column } .loading-page__header { border-radius: 5px; margin: 80px auto 0; text-align: center; max-width: 620px; width: 100% } .loading-page__header>.main-title { font-size: 26px; font-weight: 700; margin-bottom: 5px; padding-top: 30px } .loading-page__header>.main-subtitle { color: #888; font-size: 14px } .loading-page__footer { display: -ms-flexbox; display: flex; margin-left: auto; margin-right: auto; max-width: 750px; padding: 30px 0; width: 100% } .loading-page__footer>.icon { transition: all .5s cubic-bezier(1, -.49, .31, 1.65) } .loading-page__off-animation .loading-page__footer>.icon { transform: scale(0); opacity: 0 } .loading-page__footer .main-title { color: #2c3d51; font-size: 18px; font-weight: 700; line-height: 22px; text-align: left; transition: all .3s cubic-bezier(1, -.49, .31, 1.65) } .loading-page__off-animation .loading-page__footer .main-title { transform: translateX(-5%); opacity: 0 } .loading-page__footer .main-subtitle { margin-top: 0; text-align: left; line-height: 26px; transition: all .5s cubic-bezier(1, -.49, .31, 1.65) } .loading-page__off-animation .loading-page__footer .main-subtitle { transform: translateX(-10%); opacity: 0 } .loading-page__footer .main-text { font-weight: 400; text-align: left; line-height: 22px; transition: all .7s cubic-bezier(1, -.49, .31, 1.65) } .loading-page__off-animation .loading-page__footer .main-text { transform: translateX(-5%); opacity: 0 } .loading-page__loader { max-width: 790px; margin: 50px auto; width: 100% } .loading-page__loader-background { margin: 50px auto } .loading-page__loader-car { position: absolute; transition: left .5s cubic-bezier(1, -.49, .31, 1.65); top: -37px; left: 0; will-change: left } .loading-page__loader-car:after { position: absolute; width: 10px; height: 1px; background-color: red } .loading-page__progress-box { background-color: #e8e6f4; border-radius: 10px; position: relative; margin: 0 auto; height: 15px; width: 80% } .loading-page__progress-box:before { content: attr(data-progress); color: #2c3d51; font-size: 22px; font-weight: 700; line-height: 33px; position: absolute; left: -58px; top: -52% } .loading-page__progress-item { background-color: #2c3d51; border-radius: 10px; height: 15px; width: 0; transition: width .5s cubic-bezier(1, -.49, .31, 1.65); will-change: width } @keyframes city-mobile { 0% { background-position-x: 702px } to { background-position-x: -702px } } @keyframes city { 0% { background-position-x: 1000px } to { background-position-x: -1000px } } @keyframes car-balance { 0% { transform: scaleY(.99) } 50% { transform: scaleY(1.02) } to { transform: scaleY(.99) } } @keyframes car-running-right-left { 0% { transform: translateX(0) } to { transform: translateX(-120vw) } } @keyframes car-running-left-right { 0% { transform: translateX(0) } to { transform: translateX(120vw) } } .main-form { padding-top: 100px; padding-bottom: 30px; background-color: #f7f7f7; min-height: calc(100vh - 100px) } .main-form.-no-border { background-image: none } .main-form .pre-personalization { padding-top: 30px } .main-form .pre-personalization .form-actions { margin-top: 50px } .header-step { width: 100%; display: block; border-top: 1px solid #d4dcdf; border-bottom: 1px solid #d4dcdf; padding: 25px 0 } .personalization { padding-top: 60px } .personalization__header { background-color: #221755; color: #fff; padding: 25px 0 } .personalization__header .container { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between } .personalization__title { font-weight: 800; font-size: 30px; margin-bottom: 5px } .personalization__sub { color: #fff; font-size: 14px } .personalization__container { margin-top: 30px; margin-bottom: 30px; min-height: 0; transition: min-height .5s ease } .personalization__container>.banner { width: calc(100% + 40px); -ms-flex-order: 2; order: 2; margin-left: -20px } .home-porto { background-color: #fff; position: relative; z-index: 5 } .home-porto.has-animation:before { content: ""; position: fixed; left: 0; top: 0; height: 100vh; width: 100vw; background-color: #f7f7f7; z-index: 99999; transform: translateY(100%); animation: curtain .45s cubic-bezier(.72, -.01, .14, 1.03) both } .is-porto .iq-loader__i { background-color: #5378cf } .is-porto .iq-loader__q { border: 21px solid #5378cf } .is-porto .iq-loader__q:after { background-color: #5378cf } .is-porto .iq-loader__ico:after { background: radial-gradient(ellipse at center, #fff 70%, transparent 0), radial-gradient(ellipse at center, #5378cf 10px, transparent 0); background-position: 42px 4px, 18px -20px; background-size: 12px 12px, 60px 60px; background-repeat: no-repeat } .is-porto .brand-header { background-color: #5378cf } .is-porto .car-search .select-highlight .-highlighted, .is-porto .Select-option.is-focused .select-highlight { color: #5378cf } .is-porto .Select-loading { border-right-color: #5378cf } .is-porto .progressbar__separator.active { background-color: #5378cf } .is-porto .progressbar .icons.completed>.icon-check { background-color: #5378cf; border-color: #5378cf; color: #5378cf } .is-porto .progressbar .icons.current>.icon-label { color: #5378cf } .is-porto .disclaimer { background-color: #5378cf } .is-porto .disclaimer__message-area, .is-porto .disclaimer__title { color: #fff } .is-porto .disclaimer .icon { stroke: #fff } .is-porto .btn.loading:after { border: 4px solid rgba(83, 120, 207, .4); border-right-color: #5378cf } .is-porto .btn:not(:disabled):not(.-outline) { background-color: #5378cf; border-color: #5378cf } .is-porto .btn:not(:disabled):not(.-outline):not(.no-hover):focus, .is-porto .btn:not(:disabled):not(.-outline):not(.no-hover):hover { background-color: #2c4e9f } .is-porto .btn.-primary:not(:disabled):not(.-outline).-darken { background-color: #365fc1; border-color: #365fc1 } .is-porto .btn.-primary:not(:disabled):not(.-outline).-darken:active, .is-porto .btn.-primary:not(:disabled):not(.-outline).-darken:hover { background-color: #294993; border-color: #294993 } .is-porto .back-arrow:before { background-color: #5378cf } .is-porto .back-arrow:after { border-color: #5378cf } .is-porto .btn-link, .is-porto .link, .is-porto .personalization-sidebar__link:active, .is-porto .personalization-sidebar__link:hover, .is-porto input[type=checkbox]+.label-checkbox a { color: #5378cf } .is-porto input[type=checkbox]:checked+.label-checkicon { background-color: #5378cf } .is-porto input[type=checkbox]:checked+.label-checkbox:before { background-color: #5378cf; border-color: #5378cf } .is-porto input[type=radio]+.label-radio-button { border: 1px solid #5378cf; color: #5378cf } .is-porto input[type=radio]+.label-radio-button:hover { background-color: #5378cf; color: #fff } .is-porto input[type=radio]+.label-radio:after { border-color: #5378cf; background-color: #5378cf } .is-porto input[type=radio]:checked+.label-radio-button, .is-porto input[type=radio]:checked+.label-radioicon { background-color: #5378cf } .is-porto input[type=radio]:checked+.label-radio-button { color: #fff } .is-porto input[type=radio]:checked+.label-radio:before { border-color: #5378cf } .is-porto .loading-page__progress-box:before { color: #5378cf } .is-porto .loading-page__progress-item { background-color: #5378cf } .is-porto .loading-page__footer .main-title { color: #5378cf } .is-porto .loading-page__progress-box { background-color: #cbd7f1 } .is-porto .personalization__header { background-color: #294993 } .is-porto .personalization__sub { color: #fff } .is-porto .personalization-progress__item-icon, .is-porto .personalization-progress__item:not(:last-child):before { background-color: #5378cf } .is-porto .insurers-cards.active { background-color: #5378cf; border-color: #5378cf } .is-porto .insurers-cards.active .insurers-cards__logo { border-color: #5378cf } .is-porto .insurers-cards.active .insurers-cards__description>.description, .is-porto .insurers-cards.active .insurers-cards__description>.price { color: #fff } .is-porto .insurers-cards.active .insurers-cards__description>.price.price-full { color: #87a0dd } .is-porto .insurers-cards.active .insurers-cards__description>.price.price-full:after { background-color: #fff } .is-porto .insurers-cards:hover { border-color: #5378cf } .is-porto .insurers-cards__description .price, .is-porto .insurers-cards__description>.description { color: #5378cf } .is-porto .insurers-cards__description .price.price-full { color: #d4dcdf } .is-porto .insurers-cards__description .price.price-full:after { background-color: #5378cf } .is-porto .insurers-cards .blackfriday-badge { background-color: #486fcc; border-color: #486fcc } .is-porto .insurers-cards .blackfriday-badge:before { background-color: #486fcc } .is-porto .motion-button-icon.gray-button { color: #5378cf } .is-porto .motion-button-icon.gray-button:before { background-color: #294993 } .is-porto .motion-button-icon.gray-button:hover { color: #fff } .is-porto .motion-button-icon.gray-button>.icon { stroke: #5378cf } .is-porto .personalization-sidebar__info .sidebar-price__discount-msg, .is-porto .personalization-sidebar__info .sidebar-price__prefix.has-product, .is-porto .personalization-sidebar__info .sidebar-price__prefix.has-product span, .is-porto .personalization-sidebar__info .sidebar-price__value.has-product { color: #5378cf } .is-porto .personalization-sidebar__info .sidebar-price__full-price:after { background-color: #5378cf } .is-porto .personalization-sidebar__details .sidebar-details .icon, .is-porto .personalization-sidebar__info .sidebar-price__box .loader { stroke: #5378cf } .is-porto .check-list li:before { border-bottom-color: #5378cf; border-left-color: #5378cf } .is-porto .modal--primary .modal__title { color: #032e58 } .is-porto .modal--primary .modal__content, .is-porto .modal__close:after, .is-porto .modal__close:before { background-color: #5378cf } .is-porto .modal .btn-link { color: #fff } .products { background-color: #f7f7f7; padding-bottom: 50px; padding-top: 50px } .products__main-title { margin-top: 50px; margin-bottom: 50px; font-weight: 700; font-size: 20px } .products .container-products { position: relative } .products__header { background-color: #221755; padding-top: 60px; color: #fff } .products__header-actions { display: -ms-flexbox; display: flex; -ms-flex-align: end; align-items: flex-end; -ms-flex-pack: start; justify-content: flex-start } .products__header-actions .btn, .products__header-actions .button-options { margin: 0; padding: 15px 30px; height: auto } .products__header-actions .btn { margin: 0; width: auto; font-size: 14px; text-transform: uppercase } .products__header-actions .btn+.btn { margin-left: 1px } .products__header-actions .button-options { margin-left: auto } .products__title { font-size: 30px; font-weight: 700; margin-bottom: 50px; text-align: center; width: 100% } .products__subtitle { font-size: 14px } .products__link-whats { color: #2c3d51; display: block; border: none; margin: 0 auto 30px; font-size: 14px; font-weight: 600; max-width: 210px } .products__mail { margin-top: 15px; color: #666; font-size: 14px } .products__mail .icon { display: inline-block; vertical-align: middle; margin-right: 15px; width: 27px; height: 19px; stroke: #cad0d2 } .home-sematic .hero { background-color: #ff4848 } .home-sematic .hero:after { content: ""; position: absolute; display: block; width: 100%; height: 100%; z-index: 0; background: #ff4848; opacity: .8 } .home-sematic .hero__hat, .home-sematic .hero__sub { color: #000 } .home-sematic .initial-form__title { color: #fff } .home-sematic .btn.loading:after { border-color: rgba(107, 98, 113, .4); border-right-color: #fff } .home-sematic .initial-form__tooltip-icon .icon { fill: #fff } .home-sematic .why-iq-auto:after, .home-sematic .why-iq-auto:before { background-color: #000 } .home-sematic .why-iq-auto__image:before { background-image: radial-gradient(ellipse at center, #ff4848 25%, transparent 0) } .home-sematic .steps__list-icon:before { background-color: #ff4848 } .home-sematic .posts__note { background-color: #000 } .home-sematic .renovation, .is-sematic .iq-loader__i { background-color: #ff4848 } .is-sematic .iq-loader__q { border: 21px solid #ff4848 } .is-sematic .iq-loader__q:after { background-color: #ff4848 } .is-sematic .iq-loader__ico:after { background: radial-gradient(ellipse at center, #fff 70%, transparent 0), radial-gradient(ellipse at center, #ff4848 10px, transparent 0); background-position: 42px 4px, 18px -20px; background-size: 12px 12px, 60px 60px; background-repeat: no-repeat } .is-sematic .brand-header { background-color: #ff4848 } .is-sematic .car-search .select-highlight .-highlighted, .is-sematic .Select-option.is-focused .select-highlight { color: #ff4848 } .is-sematic .Select-loading { border-right-color: #ff4848 } .is-sematic .progressbar__separator.active { background-color: #ff4848 } .is-sematic .progressbar .icons.completed>.icon-check { background-color: #ff4848; border-color: #ff4848; color: #ff4848 } .is-sematic .progressbar .icons.current>.icon-label { color: #ff4848 } .is-sematic .disclaimer { background-color: #ff4848 } .is-sematic .disclaimer__message-area, .is-sematic .disclaimer__title { color: #fff } .is-sematic .disclaimer .icon { stroke: #fff } .is-sematic .btn.loading:after { border: 4px solid rgba(255, 72, 72, .4); border-right-color: #ff4848 } .is-sematic .btn:not(:disabled):not(.-outline) { background-color: #ff4848; border-color: #ff4848 } .is-sematic .btn:not(:disabled):not(.-outline):not(.no-hover):focus, .is-sematic .btn:not(:disabled):not(.-outline):not(.no-hover):hover { background-color: #e50000 } .is-sematic .btn.-primary:not(:disabled):not(.-outline).-darken { background-color: #ff1717; border-color: #ff1717 } .is-sematic .btn.-primary:not(:disabled):not(.-outline).-darken:active, .is-sematic .btn.-primary:not(:disabled):not(.-outline).-darken:hover { background-color: #d50000; border-color: #d50000 } .is-sematic .back-arrow:before { background-color: #ff4848 } .is-sematic .back-arrow:after { border-color: #ff4848 } .is-sematic .btn-link, .is-sematic .link, .is-sematic .personalization-sidebar__link:active, .is-sematic .personalization-sidebar__link:hover, .is-sematic input[type=checkbox]+.label-checkbox a { color: #ff4848 } .is-sematic input[type=checkbox]:checked+.label-checkicon { background-color: #ff4848 } .is-sematic input[type=checkbox]:checked+.label-checkbox:before { background-color: #ff4848; border-color: #ff4848 } .is-sematic input[type=radio]+.label-radio-button { border: 1px solid #ff4848; color: #ff4848 } .is-sematic input[type=radio]+.label-radio-button:hover { background-color: #ff4848; color: #fff } .is-sematic input[type=radio]+.label-radio:after { border-color: #ff4848; background-color: #ff4848 } .is-sematic input[type=radio]:checked+.label-radio-button, .is-sematic input[type=radio]:checked+.label-radioicon { background-color: #ff4848 } .is-sematic input[type=radio]:checked+.label-radio-button { color: #fff } .is-sematic input[type=radio]:checked+.label-radio:before { border-color: #ff4848 } .is-sematic .loading-page__progress-box:before { color: #ff4848 } .is-sematic .loading-page__progress-item { background-color: #ff4848 } .is-sematic .loading-page__footer .main-title { color: #ff4848 } .is-sematic .loading-page__progress-box { background-color: #ffc8c8 } .is-sematic .personalization__header { background-color: #d50000 } .is-sematic .personalization__sub { color: #fff } .is-sematic .personalization-progress__item-icon, .is-sematic .personalization-progress__item:not(:last-child):before { background-color: #000 } .is-sematic .insurers-cards.active { background-color: #ff4848; border-color: #ff4848 } .is-sematic .insurers-cards.active .insurers-cards__logo { border-color: #ff4848 } .is-sematic .insurers-cards.active .insurers-cards__description>.description, .is-sematic .insurers-cards.active .insurers-cards__description>.price { color: #fff } .is-sematic .insurers-cards.active .insurers-cards__description>.price.price-full { color: #ff7f7f } .is-sematic .insurers-cards.active .insurers-cards__description>.price.price-full:after { background-color: #fff } .is-sematic .insurers-cards:hover { border-color: #ff4848 } .is-sematic .insurers-cards__description .price, .is-sematic .insurers-cards__description>.description { color: #ff4848 } .is-sematic .insurers-cards__description .price.price-full { color: #d4dcdf } .is-sematic .insurers-cards__description .price.price-full:after { background-color: #ff4848 } .is-sematic .insurers-cards .blackfriday-badge { background-color: #ff3838; border-color: #ff3838 } .is-sematic .insurers-cards .blackfriday-badge:before { background-color: #ff3838 } .is-sematic .insurers-cards-v2.active { border-color: #ff4848 } .is-sematic .insurers-cards-v2.active:before { background-color: #ff4848; border-color: #ff4848 } .is-sematic .insurers-cards-v2 .price-installment__discount { background-color: #ff4848 } .is-sematic .insurers-cards-v2__description>.benefits:before { border-left: 2px solid #ff4848; border-bottom: 2px solid #ff4848 } .is-sematic .insurers-cards-v2:hover { border-color: #ff4848 } .is-sematic .motion-button-icon.gray-button { color: #ff4848 } .is-sematic .motion-button-icon.gray-button:before { background-color: #d50000 } .is-sematic .motion-button-icon.gray-button:hover { color: #fff } .is-sematic .motion-button-icon.gray-button>.icon { stroke: #ff4848 } .is-sematic .personalization-progress__item-icon:after { background-color: #d50000; border-width: 0 } .is-sematic .personalization-progress__item.is-active .personalization-progress__item-icon { border-width: 0 } .is-sematic .personalization-progress__item:not(:last-child):after { background-color: #fff } .is-sematic .personalization-sidebar__info .sidebar-price__discount-msg, .is-sematic .personalization-sidebar__info .sidebar-price__prefix.has-product, .is-sematic .personalization-sidebar__info .sidebar-price__prefix.has-product span, .is-sematic .personalization-sidebar__info .sidebar-price__value.has-product { color: #ff4848 } .is-sematic .personalization-sidebar__info .sidebar-price__full-price:after { background-color: #ff4848 } .is-sematic .personalization-sidebar__details .sidebar-details .icon, .is-sematic .personalization-sidebar__info .sidebar-price__box .loader { stroke: #ff4848 } .is-sematic .check-list li:before { border-bottom-color: #ff4848; border-left-color: #ff4848 } .is-sematic .modal--primary .modal__title { color: #032e58 } .is-sematic .modal--primary .modal__content, .is-sematic .modal__close:after, .is-sematic .modal__close:before { background-color: #ff4848 } .is-sematic .modal .btn-link { color: #fff } .is-sematic .custom-step__navigation--button { background-color: #16c3d9 } .is-sematic .back-textarrow:before { background-color: #ff4848 } .is-sematic .back-textarrow:after { border-color: #ff4848 } .is-sematic .iq-loader__text { color: #ff4848 } .is-sematic .iq-loader__dots--item:first-child { animation-name: dotsFadeSematic1; animation-duration: 2s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out } .is-sematic .iq-loader__dots--item:nth-child(2) { animation-name: dotsFadeSematic2; animation-duration: 2s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out } .is-sematic .iq-loader__dots--item:nth-child(3) { animation-name: dotsFadeSematic3; animation-duration: 2s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out } .is-sematic .contact-page:not(.contact-page--illustration) { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; height: calc(100vh - 250px) } .is-sematic .feedback-action__footer>div>a, .is-sematic .feedback-action__title { color: #ff4848 } @keyframes dotsFadeSematic1 { 0% { background-color: inherit } 50% { background-color: #ff4848 } 80% { background-color: #ff4848 } to { background-color: inherit } } @keyframes dotsFadeSematic2 { 0% { background-color: inherit } 20% { background-color: inherit } 50% { background-color: #ff4848 } 80% { background-color: #ff4848 } to { background-color: inherit } } @keyframes dotsFadeSematic3 { 0% { background-color: inherit } 40% { background-color: inherit } 50% { background-color: #ff4848 } 80% { background-color: #ff4848 } to { background-color: inherit } } .start { background-color: #fff; position: relative; z-index: 5 } .start.has-animation:before { content: ""; position: fixed; left: 0; top: 0; height: 100vh; width: 100vw; background-color: #f7f7f7; z-index: 99999; transform: translateY(100%); animation: curtain .45s cubic-bezier(.72, -.01, .14, 1.03) both } .app-layout:after { content: ""; display: block; clear: both } .app-layout { transition: padding .3s ease-in } .app-layout.is-auto .header { background: #2c3d51 } .app-layout.is-auto .header__holder.nav { display: none } .app-layout.is-porto .header { background: #5378cf } .app-layout.is-porto .header__holder.nav { display: none } .app-layout .brand-header { transition: transform .3s ease-in; z-index: 10 } .app-layout.has-anonymous-id .brand-header { transform: translateY(70px) } @media only screen and (max-width:79.9375em) { .container:not(.container--small):not(.container--medium) { padding-left: 20px; padding-right: 20px } .copyright .wrapper { width: calc(100% - 40px) } } @media only screen and (max-width:66.1875em) { .container--medium { padding-left: 20px; padding-right: 20px } } @media only screen and (max-width:59.3125em) { .container--small { padding-left: 20px; padding-right: 20px } .steps__list { -ms-flex-wrap: wrap; flex-wrap: wrap } .contact-page--illustration .illustration { min-height: auto; background-image: none } .contact-page--illustration .illustration:after, .contact-page--illustration .illustration:before { display: none } .contact-page--illustration .feedback-action { margin-top: 0; margin-left: 0; max-width: 100% } } @media only screen and (max-width:38.6875em) { .container--mini { padding-left: 20px; padding-right: 20px } } @media only screen and (max-width:49.9375em) { .full { margin-top: 50px; margin-bottom: 50px } .full--spacing { margin-top: 0; margin-bottom: 0; padding-top: 50px; padding-bottom: 50px } .full--no-spacing { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0 } .full__title { font-size: 22px; margin-bottom: 10px } .full__subtitle:not(:last-child) { margin-bottom: 40px } .full__subtitle { font-size: 16px } .feedback-action__title { font-size: 18px } .feedback-action__footer { padding-top: 20px } .faq .topic__title { font-size: 14px } .posts__hold { -ms-flex-wrap: wrap; flex-wrap: wrap } .posts__hold>* { margin-right: 0; margin-bottom: 15px } .posts__hold>:last-child { margin-bottom: 0 } .posts__note { padding: 15px; font-size: 14px; margin-top: 20px } .steps.is-active .full__subtitle { font-size: 16px } .why-iq-auto:after { right: -110px; bottom: 25px } .why-iq-auto__list-item { min-width: 100%; margin-bottom: 15px } .why-iq-auto__list-item+.why-iq-auto__list-item { margin-top: 15px } .why-iq-auto__list-item-title { font-size: 16px } .why-iq-auto__image { min-height: 30%; transform: translateX(-40px); min-width: calc(100% + 80px); padding-bottom: 25px } .insurers-cards { padding-right: 10px } .insurers-cards:after { right: 15px; top: 15px } .insurers-cards:before { right: 10px; top: 10px } .insurers-cards__logo { max-width: 82px } .insurers-cards__logo img { max-width: 62px } .insurers-cards__description { padding-left: 10px; margin: 14px 0 } .insurers-cards__description>.name { font-size: 16px; line-height: 18px } .insurers-cards__description>.description { font-size: 10px } .insurers-cards__description>.price { font-size: 12px; line-height: 12px } .current-insurance-stage>:not(:first-child):not(.form-field), .form-insurance-form>:not(:first-child):not(.form-field), .form-proponent-stage>:not(:first-child):not(.form-field), .form-vehicle-form>:not(:first-child):not(.form-field), .main-driver-stage>:not(:first-child):not(.form-field) { margin-top: 30px } .personalization-progress__item { font-size: 0 } .personalization-sidebar { border-bottom: 1px solid #d4dcdf; max-height: 2000px; max-width: inherit; -ms-flex-order: 1; order: 1; overflow: hidden; padding-bottom: 20px; width: 100vw; position: -webkit-sticky; position: sticky; top: 0; z-index: 1; transform: translateX(-20px) } .personalization-sidebar__hold { border: none; padding-top: 10px } .personalization-sidebar:not(.active) { max-height: 75px } .personalization-sidebar:not(.active).is-laststep { max-height: 105px } .personalization-sidebar__info { -ms-flex-align: center; align-items: center; border-bottom: 0; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding: 5px 0; min-height: 60px } .personalization-sidebar__info, .personalization-sidebar__info .sidebar-price { -ms-flex-pack: start; justify-content: flex-start } .personalization-sidebar__info .sidebar-price__full-price { display: none } .personalization-sidebar__info .sidebar-price__discount-msg { text-align: left; line-height: 14px } .personalization-sidebar__info .sidebar-price-msg { font-size: 12px; line-height: 16px } .personalization-sidebar__info .sidebar-price__box { text-align: left; -ms-flex: 1; flex: 1; padding-left: 15px } .personalization-sidebar__info .sidebar-price__text { font-size: 13px } .personalization-sidebar__info .sidebar-price__prefix span { color: #2c3d51; line-height: 30px; font-size: 16px } .personalization-sidebar__info .sidebar-price__prefix span:last-of-type { font-weight: 700; font-size: 22px; margin-left: 5px; line-height: 30px } .personalization-sidebar__info .sidebar-price__value { font-size: 22px; color: #2c3d51; line-height: 30px; margin-left: 2px } .personalization-sidebar__info .sidebar-icon { height: 50px; width: 52px; margin-bottom: 0 } .personalization-sidebar__details .sidebar-details { padding-left: 0; opacity: 0; transform: translateX(-40px) } .personalization-sidebar__coverages { opacity: 0; transform: translateX(-40px) } .personalization-sidebar.active .personalization-sidebar__coverages { opacity: 1; transform: translateX(0); transition: transform .41s ease, opacity .41s ease } .personalization-sidebar__link { opacity: 0 } .discounts { -ms-flex-wrap: wrap; flex-wrap: wrap } .discounts__info { margin-bottom: 20px; text-align: center } .discounts__info, .discounts__numbers { width: 100%; max-width: 100% } .discounts-box { -ms-flex-wrap: wrap; flex-wrap: wrap } .discounts-box__number { font-size: 44px; transform: translateY(-5px) } .discounts-box__number span { display: inline-block; transform: translateY(-10px) } .discounts-box__number span:after { display: none } .discounts-box__info { width: 100% } .discounts-box:first-child .discounts-box__info:before { left: auto; right: -27px } .discounts-box:nth-child(2) .discounts-box__info:before { left: -27px } .products-cards__item { width: 90%; margin-left: 5%; box-shadow: 0 16px 27px 0 rgba(0, 0, 0, .13); height: 100% } .products-coverages__block { -ms-flex-direction: column; flex-direction: column; margin-top: 20px; padding: 0 } .products-coverages__title { text-align: center } .products-coverages__item { margin-bottom: 20px; padding-left: 50px; position: relative } .products-coverages__item>.icon { position: absolute; left: 0; top: 15px } .proposal-step { padding: 0 15px } .related { -ms-flex-direction: column; flex-direction: column; text-align: center } .related__item { -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 15px; text-align: center } .related__item+.related__item { margin-top: 15px } .renovation__form { -ms-flex-wrap: wrap; flex-wrap: wrap } .renovation__form-field { min-width: 100% } .renovation__form-field .btn { max-width: 100% } .renovation__form-field+.renovation__form-field { margin-left: 0; margin-top: 15px } .brands .brand__title { font-size: 16px } .custom-steps { margin: 0 auto; max-width: inherit; -ms-flex-order: 2; order: 2 } .insurers-cards-v2 { -ms-flex-wrap: wrap; flex-wrap: wrap; max-height: 362px; height: 362px } .insurers-cards-v2:after { right: 15px; top: 15px } .insurers-cards-v2:before { right: 9px; top: 8px } .insurers-cards-v2__logo { -ms-flex-align: center; align-items: center; -ms-flex-pack: start; justify-content: start; padding: 0 16px; max-width: 100%; min-height: 110px; min-width: 100%; width: 100% } .insurers-cards-v2__logo>.name { display: block } .insurers-cards-v2__logo { max-width: 82px } .insurers-cards-v2__logo img { max-width: 62px } .insurers-cards-v2 .price-installment { -ms-flex-align: end; align-items: flex-end; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: justify; justify-content: space-between } .insurers-cards-v2 .price-installment__container { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-order: 1; order: 1 } .insurers-cards-v2 .price-installment__discount { margin-bottom: 0; -ms-flex-order: 2; order: 2 } .insurers-cards-v2 .price-installment__price { -ms-flex-order: 2; order: 2 } .insurers-cards-v2 .price-installment__number { margin-bottom: 0; -ms-flex-order: 1; order: 1 } .insurers-cards-v2__pricebox { border-left: none; margin: 0; max-height: 90px; -ms-flex-order: 2; order: 2; padding: 0 14px; width: 100% } .insurers-cards-v2__pricebox .price { display: -ms-flexbox; display: flex; margin-top: 12px } .insurers-cards-v2__pricebox .price-full, .insurers-cards-v2__pricebox .price-value { margin-left: 10px } .insurers-cards-v2__description { border-top: 1px solid #e7e7e7; padding: 15px 0 0; margin: 15px 14px; -ms-flex-order: 3; order: 3; margin-bottom: 15px; min-height: 150px; max-width: 100%; width: 100% } .insurers-cards-v2__description>.name { display: none; font-size: 16px; line-height: 18px } .whatsapp-box { -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: start; align-items: flex-start; padding: 20px } .whatsapp-box>p { max-width: calc(100% - 70px); margin-bottom: 25px } .whatsapp-box>.btn { margin: 0 } .main-form { padding-top: 80px } .personalization { padding-top: 50px } .personalization__header { text-align: left; padding: 30px 0; text-align: center } .personalization__header .container { -ms-flex-direction: column; flex-direction: column } .personalization__title { font-size: 22px } .personalization__sub { font-size: 12px; margin-bottom: 15px } .personalization__container { -ms-flex-direction: column; flex-direction: column; margin-top: 0 } .personalization__container[data-interaction-state=-active] { padding-top: 63px } .products { padding-top: 52px } .products__main-title { text-align: center } .products__header { text-align: left; padding-top: 15px } .products__title { font-size: 22px; margin-bottom: 40px; margin-top: 30px } .products__mail { margin: 30px auto; width: 90% } } @media only screen and (max-width:24.9375em) { .car-search .box-radio__error, .car-search .Select { width: 65% } .products__header-actions { width: 400px } } @media only screen and (min-width:64em) { .box-km-usage { margin-left: auto; margin-right: auto; max-width: 590px } .box-button-radio>.radio-button { width: 170px } .box-three-card { margin: 25px auto 0 } .box-titles { text-align: center; padding-left: 0 } .btn { font-size: 14px } .btn-back { height: 22px; width: 22px; border-width: 4px } input[type=checkbox]+.label-checkbox { margin-left: auto; margin-right: auto } input[type=checkbox]:checked+.label-checkicon { font-weight: 700 } .comparation-modal__content { max-width: 950px } .comparation-modal__title { margin-top: 55px; font-size: 30px; line-height: 46px } .field-wrapper .btn { bottom: 50px } .form-field { margin-left: auto; margin-right: auto } .form-field.-small { width: 47% } .form-field.-small.-even { margin-left: 0 } .form-field.-small.-odd { margin-right: 0 } .box-button-radio .form-field { margin: 0; max-width: 200px; width: 100% } .box-button-radio .form-field+.form-field { margin-left: 40px } .box-half-card .form-field { -ms-flex: 1; flex: 1; max-width: 23%; margin: 0 15px } .box-half-card .form-field:first-child { margin-left: 0 } .box-half-card .form-field:last-child { margin-right: 0 } input[type=date], input[type=email], input[type=number], input[type=tel], input[type=text], select, textarea { padding: 30px 15px 10px } .select:after { transform: translate3d(-15px, 0, 0) } .input-field>.label { font-size: 12px; top: 14px; left: 15px } .why-porto-auto { -webkit-clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 calc(100% - 50px)); clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 calc(100% - 50px)); padding: 180px 0 } .products-cards__item>.logo { margin-bottom: 20px } .progressbar .icon { height: 35px; width: 35px } input[type=radio]:checked+.label-radioicon { font-weight: 700 } .tooltip--bonus { left: 105px; top: 13px } .owner .main-text { margin-bottom: 30px } .renovation-widget .alert-form .input-field label, .renovation-widget .initial-form .input-field label { font-size: 10px; top: 8px; left: 10px } .intro>.container { max-width: 1059px } .intro>.container>.main-title { font-size: 36px } .intro>.container>.main-text.-small { margin-top: auto } .loading-page__footer { -ms-flex-align: center; align-items: center; min-height: 400px } .loading-page__footer-description, .loading-page__footer>.icon { width: 50% } } @media only screen and (max-width:63.9375em) { .box-large { -ms-flex-pack: justify; justify-content: space-between } .box-filter { border-bottom: 1px solid #d4dcdf } .btn { font-size: 16px } .comparation-modal__content { background-color: #f7f7f7; min-height: 100vh } .comparation-modal__title { font-size: 18px; line-height: 24px; margin-top: 30px; max-width: 70%; margin-left: auto; margin-right: auto } .field-wrapper .btn { bottom: 30px } .footer--default .list-social>li { margin-left: 10px } .box-button-radio .form-field { width: auto } .box-button-radio .form-field+.form-field { margin-left: 20px } .box-half-card .form-field { width: 46% } .box-half-card .form-field:not(:nth-last-of-type(-n+2)) { margin-bottom: 25px } .initial-form>.btn { height: 59px } input[type=date], input[type=email], input[type=number], input[type=tel], input[type=text], select, textarea { padding: 25px 10px 10px } .input-field>.label { font-size: 10px; top: 8px; left: 10px } .iq-footer { text-align: center } .products-cards__item { max-width: inherit } .products-cards__item .box-price { text-align: center } .progressbar { height: 55px } .main-title { font-size: 24px } .main-title--small { font-size: 18px } .urgency--porto { top: 0 } .vehicle-card { padding: 15px } .auto-widget__info { padding-top: 30px; padding-bottom: 20px } .intro>.container>.main-text.-small { margin-top: 44px } .loading-page__header { padding: 15px; margin-top: 50px; margin-bottom: 0 } .loading-page__header>.main-title { font-size: 22px; font-weight: 700 } .loading-page__loader { margin: 65px auto 30px; height: auto } .loading-page__loader-car { width: 80px; top: -35px } .loading-page__progress-box:before { font-size: 18px; top: 25px; left: 0; right: 0 } .home-sematic .hero__info { padding-top: 40px } .is-sematic .main-form { padding-top: 100px } } @media only screen and (max-width:31.1875em) { .btn-back.-right { height: 20px; width: 20px } .back-arrow { border: 1px solid #2c3d51; border-radius: 100px; padding: 15px 0 } .back-arrow:after, .back-arrow:before { display: none } .input-field.plate-check { max-width: 100% } .iq-media__thumb { width: 100%; min-width: 100%; -ms-flex-pack: center; justify-content: center } .form-actions { -ms-flex-wrap: wrap; flex-wrap: wrap } .form-actions .-primary { -ms-flex-order: 0; order: 0 } .form-actions .back-arrow { margin-top: 20px; -ms-flex-order: 1; order: 1; text-align: center } .form-actions>* { width: 100%; min-width: 100% } .numbers-list__item { width: 9.09%; transform: translateX(30%) } .numbers-list__item.active { font-size: 20px } .urgency__button { width: 115px } .urgency__text { margin-left: 0; font-size: 11px; max-width: 210px } } @media only screen and (max-width:43.6875em) { input[type=checkbox]+.label-checkicon:before { top: 5px; right: 5px; height: 18px; width: 18px } input[type=checkbox]:checked+.label-checkicon:after { right: 10px; top: 11px; width: 8px } .box-three-card .form-field { margin: 0 5px } .box-half-card .form-field { width: 48% } .box-half-card .form-field:not(:nth-last-of-type(-n+2)) { margin-bottom: 10px } .iq-media__list { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 0 } .insurers-cards__logo .img { max-width: 50px } .iq-footer__logo { margin: 0 auto 20px } .iq-footer__social { width: 100% } .products-coverages { margin-top: 40px; border-top: 2px solid #d4dcdf } .proposal-step .motion-button-icon--send-proposal>.icon { width: 40px } .box-home-type input[type=radio]+.label-radioicon { padding: 20px 10px } input[type=radio]+.label-radio-button { min-width: 130px } .range+.current-val { font-size: 26px } .depoiment-section__item { transform: translateY(5%); transition: transform .3s ease-in } .staw__slide--active .depoiment-section__item { transform: translateY(0) } .depoiment-section .staw .staw__roller { padding-bottom: 25px!important } .why-auto-insurance__thumb { position: static; text-align: right; width: 100%; height: 225px; display: block } .why-auto-insurance__thumb img { height: 100% } .why-auto-insurance__info { width: 100%; height: auto; min-height: 10px; padding-top: 20px } .why-auto-insurance__reasons { -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 30px } .why-auto-insurance .insurance-reasons__item { width: 100%; padding: 30px; margin-bottom: 20px } .why-auto-insurance .insurance-reasons__item:last-child { margin-bottom: 0 } .custom-steps { left: calc(-50vw + 50%); width: 100vw; position: relative } .custom-steps__item:not(.current) .custom-step-header { padding-bottom: 60px; position: relative } .custom-step-header__check-icon { height: 34px; width: 34px; top: 40px; right: 15px } .custom-step-header__title [class^=btn] { position: absolute; left: 10px; bottom: 24px } .custom-step-header__title [class^=btn]:before { display: none } .current .custom-step__content { padding: 0 16px 30px } .custom-step__navigation { -ms-flex-pack: center; justify-content: center } .custom-step__navigation--text { -ms-flex-order: 2; order: 2; margin-top: 20px } .custom-step__navigation--button { -ms-flex-order: 1; order: 1; width: 100% } .insurers-cards-v2__logo .img { max-width: 50px } .tooltip--has-image .tooltip__image { display: none } .main-subtitle.has-spacing, .main-title.has-spacing { padding-left: 20px; padding-right: 20px } .urgency--visible { padding: 12px 10px } .urgency .icon { display: block } .loading-page__footer { -ms-flex-direction: column-reverse; flex-direction: column-reverse; padding: 0 } .loading-page__footer>.icon { width: 40%; max-width: 85px; margin: 0 auto 15px } .loading-page__footer .main-title { font-size: 15px } .loading-page__footer .main-subtitle { font-size: 12px } .loading-page__progress-box { width: 100% } .products__header-hold { margin-left: -20px; width: calc(100% + 40px); overflow-x: scroll; overflow-y: hidden } .products__header-actions .btn>span, .products__header-actions .button-options>span { display: none } .products__header-actions .btn:after { content: attr(data-text) } .products__header-actions .button-options { width: 50px; padding-left: 5px; padding-right: 5px } .products__header-actions .button-options .icon { margin-right: 0 } .products__link-whats { position: fixed; text-decoration: underline; transform: translateY(-100%); transition: transform .3s ease-in, opacity .3s ease-in; background-color: #2c3d51; top: 0; color: #fff; left: 0; margin: 0; max-width: inherit; padding: 25px; width: 100%; opacity: 0 } .products__link-whats.active { transform: translateY(52px); opacity: 1 } .products .staw__roller { padding-bottom: 30px!important } } @media only screen and (max-width:34.3125em) { .disclaimer__icon-wrapper { height: 45px; text-align: left; width: 60px } .disclaimer__message-area { margin-top: 15px } .disclaimer { display: block } } @media only screen and (max-width:37.4375em) { .feedback-action>.icon { display: none } .feedback-action__info { margin-left: 0; text-align: center } .feedback-action__footer { -ms-flex-direction: column; flex-direction: column } .feedback-action__footer>div { border-left: none; padding: 15px 0 0; margin: 15px 0 0 } .header-alert__text>.icon { display: none } .initial-form--porto { border-radius: 5px 5px 0 0 } .initial-form--porto .btn, .initial-form--porto .form-field, .initial-form--porto .initial-form__tooltip { width: 100% } .initial-form--porto .form-field+.form-field { margin-bottom: 10px } .initial-form--porto .initial-form__disclaimer { background-color: #fff; color: #4e4e4e; margin-top: 0; padding: 5px 10px 15px 12px; width: 100%; border-radius: 0 0 5px 5px } .initial-form--porto .initial-form__disclaimer a { color: #4e4e4e } .steps__list-item { -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 0 0 25px 60px } .steps__list-icon { width: 50px; height: 50px; position: absolute; left: 0; top: 0; margin-bottom: 0 } .steps__list-icon .icon:before { width: 30px; height: 30px } .steps__list-title { font-size: 16px } .brand-benefits__item { width: 100%; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 5px 0; text-align: left } .brand-benefits__item+.brand-benefits__item { margin-top: 20px } .brand-benefits__item .icon { width: 100%; max-width: 45px; height: 45px; margin-right: 20px } .brand-benefits__title { padding-top: 0 } .hero-porto { padding-bottom: 90px; padding-top: 90px; background-image: url("/betheme/images/group-people-hero-mobile.jpg"); background-size: 100% auto; background-position: top } .hero-porto.is-low { background-image: url("/betheme/images/group-people-hero-mobile-low.jpg") } .hero-porto>* { position: relative; z-index: 1 } .hero-porto:after { position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; content: ""; background: linear-gradient(0deg, #19649d 50%, rgba(25, 100, 157, .2)) } .hero-porto__title { font-size: 24px; text-align: center } .hero-porto__note { font-size: 14px; text-align: center } .hero-porto__footer { margin-top: 60px; font-size: 12px } .hero-porto__arrow { display: none } } @media only screen and (min-width:43.75em) { .box-three-card .form-field { max-width: 23% } .coverages-step .box-three-card .form-field { max-width: 140px } .coverages-step .box-three-card .form-field .label-radioicon { font-size: 14px; font-weight: 700; padding-left: 0; padding-right: 0 } .coverages-step .box-three-card .form-field .subtitle { font-size: 11px } .current-insurance-stage>.main-text, .current-insurance-stage>.main-title, .form-insurance-form>.main-text, .form-insurance-form>.main-title, .form-proponent-stage>.main-text, .form-proponent-stage>.main-title, .form-vehicle-form>.main-text, .form-vehicle-form>.main-title, .main-driver-stage>.main-text, .main-driver-stage>.main-title { text-align: center } .tooltip--has-image .tooltip__wrapper { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center } .loading-page__footer { padding: 30px 0 } .loading-page__footer-description { width: 70%; padding-right: 20px } .loading-page__footer>.icon { width: 30% } .is-sematic .main-form { padding-top: 150px } .is-sematic .personalization { padding-top: 80px } } @media only screen and (max-width:60.5625em) { .header-alert.has-mobile-diff { animation: fade .3s ease both; border-radius: 4px; left: 5vw; top: calc(50vh - 100px); width: 90vw; background: transparent; z-index: 99999999 } .header-alert.has-mobile-diff .header-alert__bg { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .75); z-index: 1 } .header-alert.has-mobile-diff .header-alert__hold { position: relative; z-index: 2; background-color: #2c3d51; padding: 35px 20px; text-align: center } .header-alert.has-mobile-diff .header-alert__link { background: #fff; border-radius: 4px; color: #2c3d51; padding: 12px 10px; text-decoration: none; margin: 35px 0 15px; width: 100% } .header-alert.has-mobile-diff .header-alert__close-btn { position: absolute; right: 20px; top: 20px } .header-alert.has-mobile-diff .header-alert__text { line-height: 1.8 } .header-alert.has-mobile-diff .header-alert__text strong { font-size: 24px; display: block; margin-bottom: 20px; margin-top: 32px } .header-alert.has-mobile-diff.is-closing { animation: fade 1s ease both; animation-direction: reverse } .header-alert__hold { -ms-flex-align: start; align-items: flex-start } .is-porto .header-alert.has-mobile-diff .header-alert__hold { background-color: #5378cf } .is-porto .header-alert.has-mobile-diff .header-alert__link { color: #5378cf } .is-sematic .header-alert.has-mobile-diff .header-alert__hold { background-color: #ff4848 } .is-sematic .header-alert.has-mobile-diff .header-alert__link { color: #ff4848 } .app-layout.has-anonymous-id.is-finished .brand-header { transform: none } } @media only screen and (max-width:68.6875em) { .header-alert__text { font-size: 14px } .initial-form__tooltip-icon:after { width: 100% } .doubts:after, .doubts:before { display: none } } @media only screen and (max-width:46.8125em) { .initial-form { padding: 15px } .hero { height: auto; min-height: auto; padding-top: 45px; padding-bottom: 45px } .hero__bg { background-image: url("/betheme/images/bg-hero-seguros-mobile.jpg"); background-size: cover } .hero__bg_capilar { background-image: url("/betheme/images/bg-hero-capilar-mobile.jpg"); background-size: cover } .hero__bg:before { content: ""; position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, .65) 60%, transparent) } .hero__arrow { display: none } .hero__hold { -ms-flex-wrap: wrap; flex-wrap: wrap } .hero__hat { padding-bottom: 10px; margin-bottom: 10px } .hero__sub { font-size: 14px; margin-bottom: 10px } .hero__sub, .hero__welcome { -ms-flex-preferred-size: 100%; flex-basis: 100% } } @media only screen and (max-width:56.1875em) { .initial-form .form-field { width: 100%; display: block } .initial-form .input-field .input[name="startForm.payload.license_plate"], .initial-form .input-field .input[name="startForm.payload.zip_code"] { border-radius: 2px } .initial-form>.btn { max-width: 100%; position: relative; margin-top: 0 } .all-brands__hold { max-width: 500px } .all-brands__figure { width: 50% } .all-brands__images { display: block; text-align: center; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center } .all-brands__images img { margin: 10px 15px; vertical-align: middle; display: inline-block } .doubts__icon { right: 0; width: 100%; height: 60% } .doubts__hold, .doubts__info { -ms-flex-wrap: wrap; flex-wrap: wrap } .doubts__info { max-width: 900px; width: 95%; background-color: #fff; z-index: 9; padding: 20px } .doubts__bg, .doubts__info { display: -ms-flexbox; display: flex } .doubts__bg { width: 100%; height: 350px; top: 0 } .doubts .doubts-contact { padding-top: 25px } .doubts .full__title { width: 100% } .brands { -ms-flex-wrap: wrap; flex-wrap: wrap } .brands__item { width: 100% } .brands__item+.brands__item { margin-top: 20px } .brands .brand { padding: 30px } .hero__info { text-align: center; margin-bottom: 20px; padding: 30px 5px } .hero__info, .hero__title { -ms-flex-preferred-size: 100%; flex-basis: 100% } .hero__title { font-size: 24px; margin-bottom: 10px } .video-help { -ms-flex-wrap: wrap; flex-wrap: wrap } .video-help__video { width: 100%; margin-bottom: 15px; height: auto; padding: 40px 22px } } @media only screen and (max-width:19.9375em) { .initial-form__tooltip .plate-check { width: 160px } .initial-form__tooltip-icon:focus:before, .initial-form__tooltip-icon:hover:before { left: 170px } } @media only screen and (max-width:21.8125em) { .initial-form__tooltip-icon:after { padding: 25px } } @media only screen and (min-width:55em) { .input-field.plate-check { max-width: 140px } } @media only screen and (max-width:54.9375em) { .input-field.plate-check { margin-top: 20px; margin-bottom: 20px } } @media only screen and (min-width:56.25em) { .all-brands__figure { -ms-flex: 1; flex: 1 } } @media only screen and (min-width:31.25em) and (max-width:43.6875em) { .iq-media__thumb { max-width: 100%; width: 50% } } @media only screen and (max-width:46.1875em) { .posts__hold>* { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; text-align: center } } @media only screen and (min-width:37.5em) and (max-width:59.3125em) { .steps__list-item { -ms-flex-preferred-size: 50%; flex-basis: 50%; padding: 15px } } @media only screen and (max-width:71.8125em) { .why-iq-auto__hold, .why-iq-auto__list { -ms-flex-wrap: wrap; flex-wrap: wrap } .why-iq-auto__list { width: 100%; padding-right: 0; padding-bottom: 30px; max-width: 100%; display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start } .why-iq-auto__image { margin: 0 auto } .insurers-cards { margin-top: 50px; margin-bottom: 20px } .blackfriday-badge { border: 1px solid #2c3d51; border-radius: 0; bottom: -38px; -ms-flex-pack: center; justify-content: center; right: -1px; width: calc(100% + 2px) } .blackfriday-badge__text { color: #fff } .blackfriday-badge .icon { stroke: #fff; fill: #fff } } @media only screen and (min-width:50em) and (max-width:71.8125em) { .why-iq-auto__list-item { width: 50%; padding-right: 10px; margin-bottom: 50px } .why-iq-auto__list-item+.why-iq-auto__list-item { margin-top: 0 } } @media only screen and (min-width:50em) { .insurers-cards { padding-right: 50px } .personalization-sidebar { margin-left: 35px } .personalization-sidebar__info>.toggle-button { display: none } .personalization-sidebar__info .sidebar-price__prefix { -ms-flex-direction: column; flex-direction: column } .personalization-sidebar__coverages-enter { transform: translateX(-40px); opacity: 0 } .personalization-sidebar__coverages-enter-active { transition: transform .3s ease, opacity .3s ease; transform: translateX(0); opacity: 1 } .personalization-sidebar__coverages-enter-done, .personalization-sidebar__coverages-exit { opacity: 1; transform: translateX(0) } .personalization-sidebar__coverages-exit-active { transition: transform .3s ease, opacity .3s ease; transform: translateX(-40px); opacity: 0 } .personalization-sidebar__link-enter { opacity: 0 } .personalization-sidebar__link-enter-active { transition: opacity .3s ease; opacity: 1 } .personalization-sidebar__link-enter-done { opacity: 1 } .products-cards { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap } .products-cards__item { width: 32%; margin-bottom: 50px } .products-cards__item:nth-child(2) { -ms-flex-order: 1; order: 1 } .products-cards__item:first-child { -ms-flex-order: 2; order: 2 } .products-cards__item:last-child { -ms-flex-order: 3; order: 3 } .products-coverages__block { position: relative } .products-coverages__block:after { content: ""; display: block; background-color: #fff; position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index: -1; transition-property: all; transition-timing-function: cubic-bezier(.78, 0, .24, .99); transition-duration: .67s } .products-coverages--off .products-coverages__block:after { width: 0; transition-delay: .6s } .products-coverages__item:not(:last-child) { border-right: 1px solid #d4dcdf; padding-right: 30px } .products-coverages__item:not(:first-child) { padding-left: 30px } .depoiment-section .staw__arrow { top: -40px; width: 60px; background-color: #fff; background-image: url("/betheme/images/staw-arrow.svg"); border-radius: 50%; border: 0; height: 60px; background-size: 25%; background-repeat: no-repeat; background-position: 50%; transition: all .5s cubic-bezier(1, -.49, .31, 1.65) } .depoiment-section .staw__arrow--prev { left: 8%; transform: scale(1) rotate(0deg) } .depoiment-section .staw__arrow--next { right: 8%; transform: scale(1) rotate(180deg) } .depoiment-section .staw__arrow--disabled { opacity: 1; transform: scale(0) rotate(45deg) } .why-auto-insurance__title span { display: block } .insurers-cards-v2 { padding-right: 20px } .personalization__container>.banner { display: none } .products__link-whats { margin: 0; position: absolute; right: 10px; top: 0 } } @media only screen and (min-width:71.875em) { .blackfriday-badge { font-size: 12px } .active .blackfriday-badge { background-color: #fff } .blackfriday-badge:before { content: ""; background-color: #2c3d51; border-radius: 4px; height: 28px; left: -11px; position: absolute; top: 50%; transform: translate3d(0, -50%, -1px) rotate(-45deg); width: 28px } .active .blackfriday-badge:before { background-color: #fff } .active .blackfriday-badge__text { color: #2c3d51 } .active .blackfriday-badge .icon { stroke: #2c3d51; fill: #2c3d51 } .is-porto .insurers-cards.active .blackfriday-badge, .is-porto .insurers-cards.active .blackfriday-badge:before { background-color: #fff } .is-porto .insurers-cards.active .blackfriday-badge__text { color: #5378cf } .is-porto .insurers-cards.active .icon { fill: #5378cf } .is-sematic .insurers-cards.active .blackfriday-badge, .is-sematic .insurers-cards.active .blackfriday-badge:before { background-color: #fff } .is-sematic .insurers-cards.active .blackfriday-badge__text { color: #ff4848 } .is-sematic .insurers-cards.active .icon { fill: #ff4848 } } @media only screen and (min-width:50em) and (max-width:63.9375em) { .personalization-sidebar { max-width: 310px } .loading-page__header { margin-top: 80px } } @media only screen and (min-width:37.5em) and (max-width:56.1875em) { .brand-benefits__item { width: 46% } .brand-benefits__item:nth-child(n+3) { margin-top: 40px } } @media only screen and (min-width:37.5em) { .brand-benefits__item:nth-child(n+5) { margin-top: 70px } .app-layout.has-anonymous-id:not(.is-finished) { padding-top: 68px } } @media screen and (max-height:650px) { .hero-porto { min-height: auto; padding-top: 70px; display: block } .hero-porto__footer { margin-top: 40px } } @media only screen and (max-width:62.4375em) { .why-porto-auto__list { width: 100% } .why-porto-auto__list-item { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 35px; -ms-flex-align: center; align-items: center } .why-porto-auto__item-label { margin: 0 15px 0 0 } .why-porto-auto__item-title { -ms-flex: 1; flex: 1 } .why-porto-auto__item-text { margin-top: 10px } .why-porto-auto__sidebar { display: none } .video-help__info { padding: 50px 20px } .products__header-actions .btn { padding-left: 15px; padding-right: 15px } } @media only screen and (min-width:62.5em) { .why-porto-auto__list-item { padding: 30px 20px 25px 80px; border-radius: 2px; margin-bottom: 20px } .why-porto-auto__list-item.is-active, .why-porto-auto__list-item:active, .why-porto-auto__list-item:hover { cursor: pointer; background-color: #fff; box-shadow: 1px 32px 60px -38px rgba(0, 0, 0, .29) } .why-porto-auto__item-label { position: absolute; left: 20px; font-weight: 700; margin: 0 } .why-porto-auto__item-text { padding-top: 10px } } @media only screen and (min-width:85.375em) { .products-cards__item { width: 30% } } @media only screen and (min-width:31.25em) { .numbers-list__item.active:not(: last-child) { width: 2.4% } .numbers-list__item.active:last-child { width: 23px; transform: translateX(-25%) } } @media only screen and (min-width:50em) and (max-width:62.4375em) { .related__item { -ms-flex-preferred-size: 30%; flex-basis: 30% } } @media only screen and (min-width:118.75em) { .hero__bg { background-size: 100% auto } } @media only screen and (min-width:28.125em) and (max-width:46.8125em) { .hero__bg { background-position: center -180px } } @media only screen and (max-width:28.0625em) { .hero__bg { background-position: top } } @media only screen and (max-width:21.6875em) { .hero__info { padding: 10px 0 } .app-layout.has-anonymous-id:not(.is-finished) { padding-top: 108px } .app-layout.has-anonymous-id:not(.is-finished) .brand-header { transform: translateY(110px) } } @media only screen and (min-width:46.875em) and (max-width:68.6875em) { .hero__welcome { margin-top: 45px } } @media only screen and (max-width:49.875em) { .depoiment-section .staw__arrow { display: none } } @media only screen and (min-width:43.75em) and (max-width:62.4375em) { .why-auto-insurance .insurance-reasons__item { width: 32.5% } } @media only screen and (max-width:38.0625em) { .tooltip--has-image .tooltip__box { max-width: calc(100vw - 20px); transform: translateX(10px) } .tooltip--has-image .tooltip__box:before { margin-left: -10px } } @media only screen and (max-width:38.625em) { .auto-widget:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background: linear-gradient(181.17deg, transparent, #143564) } .auto-widget>* { position: relative; z-index: 1 } .auto-widget:not(.auto-widget--first-step) .auto-widget__wrapper { padding-top: 20px } .auto-widget__title { padding: 2px 15px 0 } .auto-widget .initial-form { margin: 5px auto 0; display: none } .auto-widget .initial-form .plate-check { margin-top: 0 } .auto-widget__start-quotation-btn { display: block; padding: 15px; margin: 0 auto; max-width: 240px; width: 100%; color: #fff; background-color: #16c3d9; border-color: #16c3d9; border-radius: 4px; transition: background .3s, color .3s, border .3s; text-transform: uppercase; font-size: 14px; font-weight: 700; animation: fade .8s .5s ease both; outline: 0 } .auto-widget__start-quotation-btn:active, .auto-widget__start-quotation-btn:hover { background-color: #0f8898; border-color: #0f8898 } .auto-widget__start-quotation-btn:disabled { background-color: #eee; border-color: #eee; color: #ccc; cursor: not-allowed } .renovation-widget { background-position: top } .renovation-widget__wrapper { padding: 20px 20px 0; max-width: 340px } .renovation-widget .quotation-step { margin-top: 20px } .renovation-widget .alert-step { margin-top: 10px } } @media only screen and (max-width:47.9375em) { .auto-widget--first-step .initial-form { display: block } } @media only screen and (min-width:38.6875em) { .auto-widget__wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 650px; margin: 0 auto; display: -ms-flexbox; display: flex; padding: 20px 0 } .auto-widget__logo { text-align: left; position: absolute; top: 25px } .auto-widget__info { padding: 0; text-align: left; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center } .auto-widget__sub { max-width: 220px } .auto-widget__hold { height: 100% } .auto-widget__title { padding: 5px 0 0; max-width: 250px } .auto-widget .initial-form { display: block; margin: 0 0 0 auto } .renovation-widget { background-position-y: -40px } .renovation-widget .logo-widgets__img { width: 35px; height: 20px } .renovation-widget .logo-widgets__text { font-size: 20px } .renovation-widget__wrapper { margin: 15px 30px; max-width: 650px } .renovation-widget__disclaimer { padding-top: 30px } .renovation-widget__back-to-home { right: 20px; bottom: 20px } .renovation-widget .alert-step, .renovation-widget .quotation-step { max-width: 280px; margin-top: 0 } .renovation-widget .alert-form, .renovation-widget .initial-form { padding: 15px 20px } .renovation-widget .initial-form .initial-form__tooltip-icon:focus:after, .renovation-widget .initial-form .initial-form__tooltip-icon:hover:after { padding: 15px } } @media only screen and (min-width:38.6875em) and (min-width:64em) { .auto-widget__wrapper { max-width: 777px } } @media only screen and (min-width:48em) { .auto-widget .initial-form .label { top: 5px; left: 10px; font-size: 10px } } @media only screen and (max-width:23.375em) { .renovation-widget__wrapper { padding: 20px 10px 0 } .renovation-widget__title { font-size: 22px } .renovation-widget__subtitle { padding-bottom: 30px; max-width: 162px } .renovation-widget__cta { padding: 15px 10px } .renovation-widget__back-to-home { right: 10px; top: 15px } } @media only screen and (min-width:45em) { .renovation-widget__wrapper { max-width: 420px } } @media only screen and (min-width:23.4375em) { .renovation-widget__title { font-size: 24px } .renovation-widget__subtitle { padding-bottom: 35px; max-width: 180px } .renovation-widget__cta:first-of-type { margin-right: 25px } .renovation-widget__cta { padding: 15px } } @media only screen and (min-width:23.4375em) and (min-width:38.6875em) { .renovation-widget__title { font-size: 26px } .renovation-widget__subtitle { max-width: 320px; padding-bottom: 20px; font-size: 16px } } @media only screen and (min-width:23.4375em) and (max-width:38.625em) { .renovation-widget__back-to-home { right: 20px; top: 15px } } @media only screen and (min-width:38.6875em) and (min-width:50em) { .renovation-widget { background-position-y: -170px } } @media only screen and (min-width:38.6875em) and (min-width:50em) and (min-width:57.5em) { .renovation-widget { background-position-y: -215px } } @media only screen and (min-width:38.6875em) and (min-width:50em) and (min-width:57.5em) and (min-width:64em) { .renovation-widget { background-position-y: -285px } } @media only screen and (min-width:38.6875em) and (min-width:50em) and (min-width:57.5em) and (min-width:64em) and (min-width:75em) { .renovation-widget { background-position-y: -355px } } @media only screen and (min-width:50em) and (max-width:53.0625em) { .brand-header__container { -ms-flex-wrap: wrap; flex-wrap: wrap } .brand-header__menu-nav { -ms-flex: 1; flex: 1; -ms-flex-pack: end; justify-content: flex-end } .brand-header__social { width: 100%; margin-left: 0 } } @media only screen and (min-width:43.75em) and (max-width:85.3125em) { .loading-page__loader { margin-top: 60px } } @media only screen and (min-width:41.25em) { .loading-page__loader-car { width: 84px } } @media only screen and (min-width:60.625em) { .app-layout.has-anonymous-id.is-finished { padding-top: 68px } } @media only screen and (min-width:21.75em) and (max-width:37.4375em) { .app-layout.has-anonymous-id:not(.is-finished) { padding-top: 88px } .app-layout.has-anonymous-id:not(.is-finished) .brand-header { transform: translateY(90px) } } .header--sematic { width: 100%; max-width: 1280px; margin: auto; position: absolute; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; z-index: 10; color: #fff } .header { position: absolute; height: 62px; z-index: 20; transition: background .3s cubic-bezier(.77, .03, .19, 1); padding: 5.333333333333333px 0; width: 100% } .header .container { padding: 0 } .header .container, .header__holder { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center } .header__holder { -ms-flex-positive: 1; flex-grow: 1; padding: 0 16px } .header__holder>a.nav__link { padding: 0 } .header__logo { width: auto; transform: translateY(3px); max-height: 60px } .header.header--scrolled { background: #fff } .header.header--scrolled .nav .close, .header.header--scrolled .nav>.menu { display: none } .header.header--scrolled .nav .nav__list-item .nav__link { color: #000 } .header.header--scrolled .nav .nav__list-item .nav__link .icon.user { fill: #000 } .header .nav { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end } .header .nav.opened .nav__list { pointer-events: auto; transform: translateX(0); opacity: 1 } .header .nav .nav__list { position: fixed; left: 0; right: 0; top: 0; background: #000; width: 100vw; height: 100vh; z-index: 4; margin: auto; padding: 32px 48px; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: start; align-items: flex-start; transition: transform .3s cubic-bezier(.77, .03, .19, 1), opacity .3s cubic-bezier(.77, .03, .19, 1), background .3s cubic-bezier(.77, .03, .19, 1) } .header .nav .nav__list, .header .nav .nav__list-item { display: -ms-flexbox; display: flex; transform: translateX(-100%); opacity: 0 } .header .nav .nav__list-item { width: auto; -ms-flex-align: center; align-items: center; margin-bottom: 16px; width: 100%; border-bottom: 2px solid transparent } .header .nav .nav__list-item.is-porto { display: none } .header .nav .nav__list-item:last-of-type { margin-right: 0 } .header .nav .nav__list-item .icon { width: 15px; height: 15px; margin-right: 8px; fill: #fff } .header .nav .nav__list-item>.nav__button { margin: auto; display: inline-block } .header .nav__link { color: #fff; padding: 8px 0; cursor: pointer } .header .nav__link-mobile { position: fixed; bottom: 0; width: 100%; right: 0; left: 0; padding: 0 } .header .nav__link-mobile .button-cta { width: 100%; border-radius: 0; padding: 22.4px; font-size: 1.1rem } .header .nav .close, .header .nav>.menu { width: 25px; height: 20px; fill: #fff; cursor: pointer; transition: scale .3s cubic-bezier(.77, .03, .19, 1), opacity .3s cubic-bezier(.77, .03, .19, 1); display: block; text-indent: -99999px; overflow: hidden; background-position: top; background-repeat: no-repeat; background-size: cover; z-index: 9999 } .header .nav .close.menu, .header .nav>.menu.menu { animation: appearMenu .3s; background-image: url("../images/menu-white.svg") } .header .nav .close.close, .header .nav>.menu.close { animation: appearClose .3s; background-image: url("../images/menu-close.svg") } .header .nav .social-list { display: -ms-flexbox; display: flex; margin: 16px auto } .header .nav .social-list__item { margin: 8px } .header .nav .social-list__item .icon { fill: $primary-gray-dark; width: 20px; height: 20px } .header .button-cta { font-weight: 700; padding: 16px; border-radius: 4px; font-size: 14px; cursor: pointer; color: #fff; width: 200px; max-width: 100%; border: 1px solid #4ec2e1; background: none } .header .button-cta--active { background: #4ec2e1; border: none; color: #fff } @keyframes appearMenu { 0% { opacity: 0; transform: scale(0) } to { transform: scale(1); opacity: 1 } } @keyframes appearClose { 0% { opacity: 0; transform: scale(0) } to { transform: scale(1); opacity: 1 } } @media only screen and (min-width:768px) { .header { height: auto; width: 100% } .header__holder { padding: 0 16px } .header__logo { padding-top: 8px; width: auto; transform: none } .header .nav .nav__list { background: #000; height: 100%; width: 100% } .header .nav .nav__list-item--active, .header .nav .nav__list-item:hover { border-bottom-color: #4ec2e1 } .header .nav .nav__list-item { margin: 0 8px; width: auto; transform: translateX(0); opacity: 1 } .header .nav .nav__list-item--desktop { display: none } .header .nav .nav__list-item--desktop:hover { border-bottom-color: transparent } .header .nav .nav__list { position: static; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; padding: 0; -ms-flex-pack: end; justify-content: flex-end; background: transparent; transform: translateX(0); opacity: 1 } .header .nav .close, .header .nav>.menu, .header .nav__link-mobile { display: none } .header .button-cta { width: auto } } @media only screen and (max-width:768px) { .header.header--scrolled .nav .close, .header.header--scrolled .nav>.menu { display: block; filter: invert(.9) } .header.header--scrolled .nav .nav__list { background: #fff; display: inline } .header .nav.opened .nav__list-item:first-child { will-change: transform, opacity; transform: translateX(0); opacity: 1; transition-duration: getDuration(1); transition-delay: .2s } .header .nav.opened .nav__list-item:nth-child(2) { will-change: transform, opacity; transform: translateX(0); opacity: 1; transition-duration: getDuration(2); transition-delay: .2s } .header .nav.opened .nav__list-item:nth-child(3) { will-change: transform, opacity; transform: translateX(0); opacity: 1; transition-duration: getDuration(3); transition-delay: .2s } .header .nav.opened .nav__list-item:nth-child(4) { will-change: transform, opacity; transform: translateX(0); opacity: 1; transition-duration: getDuration(4); transition-delay: .2s } .header .nav.opened .nav__list-item:nth-child(5) { will-change: transform, opacity; transform: translateX(0); opacity: 1; transition-duration: getDuration(5); transition-delay: .2s } .header .nav.opened .nav__list-item:nth-child(6) { will-change: transform, opacity; transform: translateX(0); opacity: 1; transition-duration: getDuration(6); transition-delay: .2s } } @media only screen { .header .nav .nav__list-item { margin: 0 16px } } .footer--sematic { background-color: #000 } .footer--sematic>.wrapper { max-width: 1280px; margin: 0 auto; padding: 40px 0 } .footer--sematic .logo-sematic { padding: 20px 0 } .footer--sematic .copyright { color: #fff } @media only screen and (max-width:1280px) { .footer--sematic .logo-sematic { width: calc(100% - 40px); margin: 0 auto } } .ops-content__text { color: #fff } .ops-content__btn { border: none; border-radius: 8px; background-color: #0d99a8; color: #fff; font-size: 16px; font-weight: 700; margin-top: 30px; padding: 15px 0; width: 280px } .float{ position:fixed; width:60px; height:60px; bottom:40px; right:40px; background-color:#25d366; color:#FFF; border-radius:50px; text-align:center; font-size:30px; box-shadow: 2px 2px 3px #999; z-index:100; } .my-float{ margin-top:16px; }