/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

a {
    color: #ff5b00;
}

body {
    font-family: 'Roboto'
}

.btn {
    border-radius:100px;
    display:inline-block;
    font-size: 18px;
    font-weight:500;
    text-align:center;
    line-height:21px;
    padding: 20px;
    text-transform: uppercase;
    color:white;
    text-decoration:none;
}

.btn.btn-primary {
    background-color: #ff5b00;
    color:white;
}

.btn-block {
    display:block;
}

h1,h2,h3,h4,h5,h6 {
    font-weight:500;
}

@media(max-width:768px) {
    .mobile-btn-block {
        display:block;
    }

    .mobile-hide {
        display:none !important;
    }
}

@media(min-width:768px) {
    .desktop-hide {
        display:none !important;
    }
}

.img-responsive {
    max-width:100%;
    height:auto;
    display:block;
}

.txt-small {
    font-size: 12px;
    display:block;
    line-height:14px;
    margin-top:10px;
}

.txt-center {
    text-align:center;
    display:block;
}

.container {
    padding:0 16px;
    margin:0 auto;
    max-width:924px;
    width:100%;
}

.hero {
    width:100%;
    height: 444px;
    background-position: center center;
    background-size:cover;
    display: flex;
    flex-direction: column;
    align-items:center;
    background-color: #7d7e82;
    position:relative;
}

.hero:after {
    content:"";
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: linear-gradient(92.04deg, #000000 40.77%, rgba(0, 0, 0, 0) 98.7%);
    display:block;
    position:absolute;
    z-index:1;
}

.hero > * {
    z-index:2;
}

@media(min-width:768px) {
    .hero {
    }
}

.hero .nav {
    width:100%;
    max-width:920px;
    display:flex;
    justify-content: space-between;
    align-items:center;
    flex-wrap:nowrap;
    list-style:none;
    z-index:3;
}

.hero .container {
    display:flex;
    height:100%;
    align-items:center;
}

.nav {
    padding:15px;
}

.nav .menu-btn {
    background:none;
    border:none;
}

.nav .navigation ul {
    list-style:none;
}



@media(min-width:768px) {
    .signup {
        display:inline-block;
        font-size: 18px;
        font-weight:500;
        text-align:center;
        color:white;
        text-decoration:none;
        border: 2px solid white;
        font-size:16px;
        line-height:19px;
        padding: 8px 13.5px;
        border-radius:100px;
        width:100vw;
        max-width:156px;
    }
}

@media(max-width:768px) {
    .nav .navigation {
        background:rgba(0,0,0,0.9);
        position:fixed;
        top:0;
        right:0;
        width:75%;
        height:100%;
        display:flex;
        flex-direction:column;
        align-items: flex-end;
        text-align: end;
        padding:15px;
        transition: all 0.4s cubic-bezier(.55, 0, .1, 1);
        font-size:20px;
    }

    .nav .navigation ul {
        margin-top:15px;
    }

    .nav .navigation ul li a{
        display:block;
        margin-bottom:15px;
        color:white;
        text-decoration:none;
    }

    .nav .backdrop {
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:rgba(0,0,0,0.4);
        transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
    }

    .nav.collapsed .backdrop {
        opacity:0;
        pointer-events:none;
    }

    .nav.collapsed .navigation {
        transform:translateX(100%);
    }
}

.hero .info {
    color:white;
}

@media(max-width:768px) {
    .hero .info {
        align-self:flex-end;
        margin-bottom:30px;
    }
}

.hero .info h1 {
    font-size:24px;
    line-height:28px;
    margin-bottom:8px;
    font-weight:500;
}

.hero .info h2 {
    font-size: 16px;
    line-height:24px;
    margin-bottom: 25px;
    font-weight:400;
}

.hero .info .txt-small {
    margin-top:10px;
}

.tab-selector {
    display:none;
}

.tab-content .content-title {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    margin: 30px;
    text-align:center;
    font-size:16px;
    line-height:19px;
    text-transform: uppercase;
    color:#ff5b00;
    font-weight:500;
}

.tab-content .content-title:after {
    content:"";
    background-color: #ff5b00;
    width:75px;
    height:4px;
    border-radius: 10px;
    margin-top:8px;
    margin-left: auto;
    margin-right: auto;
    display:block;
}

.tab-content .content-title .icon img{
    width:100%;
    max-width:48px;
    margin-bottom:8px;
}

h2 {
    font-size: 20px;
    line-height: 32px;
}

.tab-content .illustration img {
    margin:0 auto;
}

ul.checklist {
    padding:15px;
    padding-bottom:0;
}

ul.checklist li {
    margin-bottom:24px;
    color: #606060;
    line-height:24px;
    font-size:16px;
}

ul.checklist li:last-child {
    margin-bottom:0;
}

ul.checklist li .title {
    font-weight: 500;
}

#platform, #trial {
    background-color: #f9f9f9;
    margin-top:32px;
}

#trial .container {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    padding-top: 30px;
    padding-bottom: 30px;
}

#trial .container h3 {
    margin-bottom:20px;
    display:block;
}

#faq h2 {
    margin-top: 32px;
    margin-bottom: 24px;
}

#faq .faq {
    margin-bottom: 16px;
}

#faq .faq-text {
    margin-bottom:32px;
    color: #717171;
    font-size:16px;
    line-height:19px;
}

#marketplace {
    background-color: #f9f9f9;
    padding:16px 0;
}

footer {
    background-color: rgba(50,50,50,0.99);
    color:white;
    padding-top:22px;
    padding-bottom:22px;
}

footer .container .app-install{
    display:flex;
    align-items:center;
    flex-direction:column;
}

footer .container .app-install h3 {
    margin-bottom: 16px;
}

footer .container .app-install .app-badges {
    display:flex;
}

footer .container .app-install .app-badges a {
    margin-right:8px;
}

footer .container .app-install .app-badges a:last-child {
    margin-right:0;
}

/*Desktop*/
@media(min-width:768px) {
    .hero:after {
        background: linear-gradient(97.69deg, rgba(0, 0, 0, 0.8) 29.3%, rgba(0, 0, 0, 0) 98.7%);
    }

    .hero .info h1 {
        font-size: 42px;
        line-height: 49px;
        max-width: 640px;
    }

    .hero .info h2 {
        font-size: 20px;
        line-height:32px;
        max-width:512px;
        font-weight:400;
        margin-bottom:32px;
    }

    ul.checklist li {
        line-height:32px;
        font-size:20px;
    }

    .btn-try {
        width:100%;
        max-width:360px;
        display:block;
    }

    .btn-test-now {
        width:100%;
        max-width:280px;
        display:block;
        margin-top:32px;
    }

    .nav .navigation {
        flex-grow:1;
    }

    .nav .navigation ul{
        display:flex;
        flex-direction: row;
        align-items:center;
        flex-grow:1;
        justify-content: flex-end;
    }

    .nav .navigation ul li {
        margin-right: 42px;
    }

    .nav .navigation ul li.navigation-left {
        justify-self: flex-start;
        margin-right:auto;
        margin-left:67px;
    }

    .nav .navigation ul li:last-child {
        margin-right:0;
    }

    .nav .navigation ul li a {
        color:white;
        text-decoration:none;
        font-weight:500;
        font-size:16px;
        line-height:19px;
    }

    .tab-selector-container {
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
        margin-bottom:64px;
    }

    .tab-selector-container .container {
        display:flex;
        align-items:stretch;
        justify-content: center;
    }

    .tab-selector-container .tab-selector {
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding-top:34px;
        padding-bottom:8px;
        list-style:none;
        width:100%;
        max-width: 675px;
    }

    .tab-selector-container .tab-selector li {
        display:flex;
        justify-content:center;
        align-items:space-between;
        text-align:center;
    }

    .tab-selector-container .tab-selector li a {
        text-decoration: none;
        color: #bdbdbd;
        text-transform: uppercase;
        font-weight:500;
        line-height:21px;
        position:relative;
        display:flex;
        justify-content:center;
        align-items: center;
        flex-direction: column;
    }

    .tab-selector-container .tab-selector li a span {
        margin-top:18px;
        display: block;
        transition: all 0.3s cubic-bezier(.55,0,.1,1);
    }

    .tab-selector-container .tab-selector li a .icon {
        filter: grayscale(100%);
        opacity:0.52;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        height:48px;
        width:48px;
        transition: all 0.3s cubic-bezier(.55,0,.1,1);
    }

    .tab-selector-container .tab-selector li.active a .icon {
        filter: grayscale(0%);
        opacity:1;
    }

    .tab-selector-container .tab-selector li.active a {
        color: #ff5b00;
    }

    .tab-selector-container .tab-selector li a:before {
        content:"";
        display:block;
        width:100%;
        max-width: 75px;
        height:4px;
        border-radius:10px;
        background-color: #ff5b00;
        bottom:-8px;
        position:absolute;
        transform: scaleX(0);
        transition: all 0.3s cubic-bezier(.55,0,.1,1);
    }

    .tab-selector-container .tab-selector li.active a:before {
        transform: scaleX(1);
    }


    .tab-content .content-title {
        display:none;
    }

    .tab-content {
        display:none;
    }

    .tab-content .content {
        min-height:332px;
    }

    .tab-content.active {
        display:flex;
    }

    .tab-content .container {
        display:flex;
        flex-direction: row;
        align-items:center;
    }

    .tab-content .container .content {
        max-width:600px;
    }    

    #platform .container {
        display:flex;
        flex-direction:row;
        align-items:center;
    }

    #platform {
        margin-top:64px;
        margin-bottom:100px;
    }

    #platform .container .checklist {
        margin-bottom:30px;
    }

    #platform .container .illustration {
        width:100%;
        max-width:440px;
        position:relative;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-right:30px;
    }

    #platform .container .illustration img {
        transform:translateY(50px);
    }

    #platform .container .info {
        margin-top:30px;
    }

    #marketplace .container {
        display:flex;
        justify-content: flex-end;
    }

    #marketplace .container .marketplace-selector-container {
        max-width:200px;
        width:100%;
    }

    #carousel h2 {
        font-size: 24px;
        line-height:32px;
        font-weight:500;
        margin-left:4px;
        margin-bottom:24px;
    }

    #carousel .owl-carousel .slick-dots {
        bottom:-42px;
    }

    #carousel .slick-dotted.owl-itemr {
        /* 42px do slick-dots + 64px da margem do figma */
        margin-bottom: calc(42px + 32px);
    }

    #carousel .owl-item {
        outline:none;
    }

    .faq {
        width:100%;
        max-width:725px;
        margin:0 auto;
    }

    footer .container .app-install {
        flex-direction:row;
        justify-content:center;
    }

    footer .container .app-install h3 {
        margin-bottom:0;
        margin-right:30px;
    }

}

/* Mobile */
@media(max-width:768px) {
    .cta .btn-test-now {
        margin-top:16px;
    }

    .tab-content[tab-item=3] .txt-small {
        margin-bottom: 32px;
    }

    ul.checklist {
        margin-bottom:24px;
    }

    #platform {
        display:table;
        margin-bottom:32px;
    }

    #platform .container .illustration img {
        margin:0 auto;
    }

    #carousel .container h2 {
        margin-bottom: calc(24px - 8px);
    }

    #platform .container .illustration {
        margin-top: 21px;
    }
}

/* FAQ */


.accordion {
    display:flex;
    flex-direction:column;
    max-width:1200px;
    width:100%;
    margin:0 auto;
}

.accordion .accordion-item {
    margin-bottom:16px;
}

.accordion .accordion-item .accordion-title {
    background-color: #ededed;
    padding:10px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.accordion .accordion-item .accordion-title h5 {
    font-size:18px;
    line-height:26px;
    color:#606060;
}

.accordion .accordion-item .accordion-title .icon {
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.accordion .accordion-item.active .accordion-title .icon {
    transform:rotate(45deg);
}


.accordion .accordion-item .accordion-title .icon {
    transition: all 0.3s cubic-bezier(.55,0,.1,1);
}

.accordion .accordion-item .accordion-title .icon:before {
    content: "+";
    font-size: 32px;
    color: #606060;
    font-weight: 100;
    text-align: center;
    padding: 0 8px;
    line-height: 32px;
}


.accordion .accordion-item .accordion-info {
    background-color: #f9f9f9;
    padding-left:42px;
    padding-right:42px;
    overflow:hidden;
    transition: all 0.3s cubic-bezier(.55,0,.1,1);
    max-height:0px;
}

.accordion .accordion-item.active .accordion-info {
    max-height:100vh;
    padding-top:20px;
    padding-bottom:20px;
}

.accordion .accordion-item .accordion-info p,
.accordion .accordion-item .accordion-info li {
    font-size: 18px;
    line-height:28px;
    color:#606060;
    transition: all 0.3s cubic-bezier(.55,0,.1,1);
}

.accordion .accordion-item .accordion-info li {
    margin-bottom:15px;
}

.accordion .accordion-item .accordion-info .list-title {
    font-weight:500;
    margin-top:45px;
    margin-bottom:8px;
}

.accordion .accordion-item .accordion-info ul {
    margin-top:30px;
}

.accordion .accordion-item.active .accordion-info p {
    height:auto;
}

@media(max-width:768px) {
    .accordion .accordion-item .accordion-info,
    .accordion .accordion-item .accordion-title {
        padding-left:15px;
        padding-right:15px;
    }
}

/* Carousel */

.book-container {
    box-shadow: rgba(0,0,0,0.2) 0px 2px 5px 0px;
}

.owl-carousel .item-grid-4{
    display:flex;
    flex-wrap: wrap;
}

.owl-carousel .item-grid-4 .book-container {
    width:100%;
    max-width:calc(50% - 4px);
    margin-right:8px;
    margin-bottom:8px;
}

.owl-carousel .item-grid-2 {
    display:flex;
    flex-wrap: wrap;
    flex-direction:column;
}

.owl-carousel .item-grid-2 .book-container {
    width:100%;
    margin-bottom:8px;
}

.owl-carousel div img {
    width:100%;
    height:auto;
    display:block;
}

.owl-carousel .item-grid-4 .book-container:nth-child(2n) {
    margin-right:0;
}

.owl-carousel .item-grid-4 .book-container:nth-child(3),
.owl-carousel .item-grid-4 .book-container:nth-child(4) {
    margin-bottom:0;
}

.owl-carousel {
    padding: 0 4px;
}

.owl-carousel .owl-nav {
	position:absolute;
	top:50%;
	display:flex;
	width:100%;
	justify-content: space-between;
    transform:translateY(-75%);
    pointer-events:none;
}

.owl-carousel .owl-nav button {
    pointer-events: all;
}

.owl-carousel .owl-nav button span{
	background:rgba(255,255,255,0.8);
	border-radius:50%;
	width:40px;
	height:40px;
	display:flex;
	align-items:center;
	justify-content: center;
	position:relative;
	box-shadow:0 4px 8px rgba(0,0,0,0.15);
	color:transparent;
}

.owl-carousel .owl-nav button span:before {
	content: "";
	display:block;
	width:8px;
	height:8px;
	border:4px solid black;
	border-left-color: transparent;
	border-bottom-color: transparent;
	position:absolute;
	top:50%;
	left:50%;
    transform:translate(-75%, -50%) rotate(45deg);
    border-radius:4px;
}

.owl-carousel .owl-nav .owl-prev span:before {
	transform:translate(-25%, -50%) rotate(225deg);
}

.owl-carousel.guest .owl-item {
    padding:4px;
}

/* lazysizes */

.lazyload, .lazyloading, .lazyloaded{
    transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
}

.lazyloading, .lazyload {
    filter: blur(8px);
}

.lazyloaded {
    filter: blur(0px);
}

/* Navigation */

.customNavigation-small {
    position:relative;
}

.customNavigation-small a.navigation-left,
.customNavigation-small a.navigation-right {
    background:rgba(221,221,221,0.7);
    box-shadow: 0 8px 12px -4px rgba(0,0,0,0.6);
    position:absolute;
    top:50%;
    transform:translateY(calc(-50% - 4px));
}

.customNavigation-small a.navigation-left {
    left:0;
}
.customNavigation-small a.navigation-right {
    right:0;
}

.customNavigation-small a.navigation-right:before,
.customNavigation-small a.navigation-left:before {

}

.icon-arrow-left-2:before, .icon-arrow-right-2:before  {
    content:"";
    width:10px;
    height:10px;
    display:block;
    border:3px solid #333;
}

.icon-arrow-left-2:before {
    transform:translateX(25%) rotate(45deg);
    border-top-color: transparent;
    border-right-color: transparent;
    
}
.icon-arrow-right-2:before {
    transform:translateX(-25%) rotate(45deg);
    border-bottom-color: transparent;
    border-left-color: transparent;
}

/* accept cookies */

#div-accept-cookies {
	background-color:rgba(255,255,255,0.96);
	display:flex;
	width:100%;
	margin:0;
	padding:0;
	position:fixed;
	bottom:0 !important;
	justify-content:center;
	align-items:center;
	align-content:center;
	line-height:1.3;
    border-top:1px solid rgba(0,0,0,0.18);
    z-index:999;
}

#div-accept-cookies .cookie-container {
	width:100%;
	max-width:960px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	align-content:center;
    padding: 4px 12px;
}

#div-accept-cookies .cookie-container .content {
    font-size:12px;
}

#div-accept-cookies .cookie-container .controls {
	justify-self:flex-end;
	margin-left:4px;
}

.accook-btn {
    background-color:rgb(255, 128, 54);
    border-bottom-style:solid;
    border-bottom-width:2px;
    border-left-style:solid;
    border-left-width:2px;
    border-right-style:solid;
    border-right-width:2px;
    border-top-style:solid;
    border-top-width:2px;
    color:rgb(255, 255, 255);
    cursor:pointer;
    display:block;
    font-size:14.4px;
    font-weight:700;
    height:33.5px;
    line-height:18.72px;
    padding-bottom:5.76px;
    padding-left:11.52px;
    padding-right:11.52px;
    padding-top:5.76px;
    text-align:center;
    text-decoration-color:rgb(255, 255, 255);
    text-decoration-line:none;
    text-size-adjust:100%;
    white-space:nowrap;
    width:112.641px;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0)
}

@media(max-width:768px) {
    .accook-btn {
        background-color:rgb(255, 128, 54);
        border-bottom-style:solid;
        border-bottom-width:2px;
        border-left-style:solid;
        border-left-width:2px;
        border-right-style:solid;
        border-right-width:2px;
        border-top-style:solid;
        border-top-width:2px;
        color:rgb(255, 255, 255);
        cursor:pointer;
        display:block;
        font-size:14.4px;
        font-weight:700;
        height:51.5px;
        line-height:18.72px;
        padding-bottom:5.76px;
        padding-left:11.52px;
        padding-right:11.52px;
        padding-top:5.76px;
        text-align:center;
        text-decoration-color:rgb(255, 255, 255);
        text-decoration-line:none;
        text-decoration-style:solid;
        text-size-adjust:100%;
        white-space:normal;
        width:83.0313px;
        -webkit-font-smoothing:antialiased;
        -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    }
}


footer .logo {
    margin-left: auto;
    margin-right: auto;
    margin-top:16px;
    display:flex;
    justify-content: center;
}

footer .logo img {
    margin: 0 auto;
}