@charset "utf-8";

/* ************************************************* */
/*      RESETS E ESTILOS PADRAO - W3 Corp            */
/* ************************************************* */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: normal; }
ul { list-style: none; }
button, input, select, textarea{ margin: 0; }
img, embed, iframe, object, video{ height: auto; max-width: 100%; border: 0; margin: 0; padding: 0; }
audio { max-width: 100%; }
iframe { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; text-align: left; }
html { font-size: 62.5%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; overflow-x: hidden; text-rendering: optimizeLegibility; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
article, aside, figure, footer, header, hgroup, section{ display: block; }
code, pre{ -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; font-family: monospace; }
body { font-family: var(--font1); color: var(--color1); font-weight: 400; line-height: 1.5; -webkit-overflow-scrolling: touch; margin: 0; scroll-behavior: smooth; }
a { cursor: pointer; text-decoration: none; color: inherit; }
a strong { color: currentColor; }
a:hover{ color: inherit; }
code { background-color: whitesmoke; color: #ff3860; font-size: 0.875em; font-weight: normal; padding: 0.25em 0.5em 0.25em; }
hr { background-color: whitesmoke; border: none; display: block; height: 2px; margin: 1.5rem 0; }
input[type="checkbox"], input[type="radio"] { vertical-align: baseline; }
small, sub, sup { font-size: 0.775em; }
span { font-style: inherit; font-weight: inherit; }
strong { font-weight: bolder; }
fieldset { border: none; }
pre { -webkit-overflow-scrolling: touch; background-color: whitesmoke; color: #4a4a4a; font-size: 0.875em; overflow-x: auto; padding: 1.25rem 1.5rem; white-space: pre; word-wrap: normal; }
pre code { background-color: transparent; color: currentColor; font-size: 1em; padding: 0; }
table td, table th { text-align: left; vertical-align: top; }

.flex             { display: flex; }
.flex-wrap        { flex-wrap: wrap; }
.justify-center   { justify-content: center; }
.justify-start    { justify-content: flex-start; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.align-center     { align-items: center; }
.align-start      { align-items: flex-start; }
.align-end        { align-items: flex-end; }
.direction-column { flex-direction: column; }
.direction-row    { flex-direction: row; }

.cl     { margin: 0 8px; margin: 0 .8rem; }
.cl_100 { width: calc(100% - 16px);    width: calc(100% - 1.6rem);    }
.cl_90  { width: calc(90% - 16px);     width: calc(90% - 1.6rem);     }
.cl_80  { width: calc(80% - 16px);     width: calc(80% - 1.6rem);     }
.cl_70  { width: calc(70% - 16px);     width: calc(70% - 1.6rem);     }
.cl_75  { width: calc(75% - 16px);     width: calc(75% - 1.6rem);     }
.cl_66  { width: calc(66.666% - 16px); width: calc(66.666% - 1.6rem); }
.cl_60  { width: calc(60% - 16px);     width: calc(60% - 1.6rem);     }
.cl_50  { width: calc(50% - 16px);     width: calc(50% - 1.6rem);     }
.cl_40  { width: calc(40% - 16px);     width: calc(40% - 1.6rem);     }
.cl_33  { width: calc(33.333% - 16px); width: calc(33.333% - 1.6rem); }
.cl_30  { width: calc(30% - 16px);     width: calc(30% - 1.6rem);     }
.cl_25  { width: calc(25% - 16px);     width: calc(25% - 1.6rem);     }
.cl_20  { width: calc(20% - 16px);     width: calc(20% - 1.6rem);     }
.cl_10  { width: calc(10% - 16px);     width: calc(10% - 1.6rem);     }

/* ******************* */
/*    DESKTOP LARGE    */
/* ******************* */
@media screen and (min-width: 1320px) {
    .cl_fd     { margin: 0 8px; margin: 0 .8rem; }
    .cl_fd_100 { width: calc(100% - 16px);    width: calc(100% - 1.6rem);    }
    .cl_fd_90  { width: calc(90% - 16px);     width: calc(90% - 1.6rem);     }
    .cl_fd_80  { width: calc(80% - 16px);     width: calc(80% - 1.6rem);     }
    .cl_fd_70  { width: calc(70% - 16px);     width: calc(70% - 1.6rem);     }
    .cl_fd_75  { width: calc(75% - 16px);     width: calc(75% - 1.6rem);     }
    .cl_fd_66  { width: calc(66.666% - 16px); width: calc(66.666% - 1.6rem); }
    .cl_fd_60  { width: calc(60% - 16px);     width: calc(60% - 1.6rem);     }
    .cl_fd_50  { width: calc(50% - 16px);     width: calc(50% - 1.6rem);     }
    .cl_fd_40  { width: calc(40% - 16px);     width: calc(40% - 1.6rem);     }
    .cl_fd_33  { width: calc(33.333% - 16px); width: calc(33.333% - 1.6rem); }
    .cl_fd_30  { width: calc(30% - 16px);     width: calc(30% - 1.6rem);     }
    .cl_fd_25  { width: calc(25% - 16px);     width: calc(25% - 1.6rem);     }
    .cl_fd_20  { width: calc(20% - 16px);     width: calc(20% - 1.6rem);     }
    .cl_fd_10  { width: calc(10% - 16px);     width: calc(10% - 1.6rem);     }
    
}

/* ******************* */
/*        DESKTOP      */
/* ******************* */
@media screen and (min-width: 1024px) and (max-width: 1319px) {
    .cl_d     { margin: 0 8px; margin: 0 .8rem; }
    .cl_d_100 { width: calc(100% - 16px);    width: calc(100% - 1.6rem); }
    .cl_d_90  { width: calc(90% - 16px);     width: calc(90% - 1.6rem); }
    .cl_d_80  { width: calc(80% - 16px);     width: calc(80% - 1.6rem); }
    .cl_d_70  { width: calc(70% - 16px);     width: calc(70% - 1.6rem); }
    .cl_d_75  { width: calc(75% - 16px);     width: calc(75% - 1.6rem); }
    .cl_d_66  { width: calc(66.666% - 16px); width: calc(66.666% - 1.6rem); }
    .cl_d_60  { width: calc(60% - 16px);     width: calc(60% - 1.6rem); }
    .cl_d_50  { width: calc(50% - 16px);     width: calc(50% - 1.6rem); }
    .cl_d_40  { width: calc(40% - 16px);     width: calc(40% - 1.6rem); }
    .cl_d_33  { width: calc(33.333% - 16px); width: calc(33.333% - 1.6rem); }
    .cl_d_30  { width: calc(30% - 16px);     width: calc(30% - 1.6rem); }
    .cl_d_25  { width: calc(25% - 16px);     width: calc(25% - 1.6rem); }
    .cl_d_20  { width: calc(20% - 16px);     width: calc(20% - 1.6rem); }
    .cl_d_10  { width: calc(10% - 16px);     width: calc(10% - 1.6rem); }

}

/* ******************* */
/*       TABLET        */
/* ******************* */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
    .cl_t     { margin: 0 8px; margin: 0 .8rem; }
    .cl_t_100 { width: calc(100% - 16px);    width: calc(100% - 1.6rem); }
    .cl_t_90  { width: calc(90% - 16px);     width: calc(90% - 1.6rem); }
    .cl_t_80  { width: calc(80% - 16px);     width: calc(80% - 1.6rem); }
    .cl_t_70  { width: calc(70% - 16px);     width: calc(70% - 1.6rem); }
    .cl_t_75  { width: calc(75% - 16px);     width: calc(75% - 1.6rem); }
    .cl_t_66  { width: calc(66.666% - 16px); width: calc(66.666% - 1.6rem); }
    .cl_t_60  { width: calc(60% - 16px);     width: calc(60% - 1.6rem); }
    .cl_t_50  { width: calc(50% - 16px);     width: calc(50% - 1.6rem); }
    .cl_t_40  { width: calc(40% - 16px);     width: calc(40% - 1.6rem); }
    .cl_t_33  { width: calc(33.333% - 16px); width: calc(33.333% - 1.6rem); }
    .cl_t_30  { width: calc(30% - 16px);     width: calc(30% - 1.6rem); }
    .cl_t_25  { width: calc(25% - 16px);     width: calc(25% - 1.6rem); }
    .cl_t_20  { width: calc(20% - 16px);     width: calc(20% - 1.6rem); }
    .cl_t_10  { width: calc(10% - 16px);     width: calc(10% - 1.6rem); }    
}

/* ******************* */
/*       CELULAR       */
/* ******************* */
@media only screen and (max-width: 640px) {
    .cl_c     { margin: 0 8px; margin: 0 .8rem; }
    .cl_c_100 { width: calc(100% - 16px);    width: calc(100% - 1.6rem); }
    .cl_c_90  { width: calc(90% - 16px);     width: calc(90% - 1.6rem); }
    .cl_c_80  { width: calc(80% - 16px);     width: calc(80% - 1.6rem); }
    .cl_c_70  { width: calc(70% - 16px);     width: calc(70% - 1.6rem); }
    .cl_c_75  { width: calc(75% - 16px);     width: calc(75% - 1.6rem); }
    .cl_c_66  { width: calc(66.666% - 16px); width: calc(66.666% - 1.6rem); }
    .cl_c_60  { width: calc(60% - 16px);     width: calc(60% - 1.6rem); }
    .cl_c_50  { width: calc(50% - 16px);     width: calc(50% - 1.6rem); }
    .cl_c_40  { width: calc(40% - 16px);     width: calc(40% - 1.6rem); }
    .cl_c_33  { width: calc(33.333% - 16px); width: calc(33.333% - 1.6rem); }
    .cl_c_30  { width: calc(30% - 16px);     width: calc(30% - 1.6rem); }
    .cl_c_25  { width: calc(25% - 16px);     width: calc(25% - 1.6rem); }
    .cl_c_20  { width: calc(20% - 16px);     width: calc(20% - 1.6rem); }
    .cl_c_10  { width: calc(10% - 16px);     width: calc(10% - 1.6rem); }

}

/* CSS DO PROJETO */
:root{
    --color1: rgb(42, 55, 69);
    --color2: rgb(11, 49, 68);
    --color3: rgb(56, 74, 91);
    --color4: rgb(94, 104, 119);
    --color5: rgb(136, 141, 154);
    --color6: rgb(255, 255, 255);
    --smooth: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    --shadow: 0px 5px 10px 0 rgb(68 68 68 / 15%);

    --font1: 'PT Sans', sans-serif;

    --color-facebook: #3b5998;
    --color-twitter: #00aced;
    --color-linkedin: #007bb6;
    --color-youtube: #bb0000;
    --color-instagram: #517fa4;
    --color-pinterest: #cb2027;
    --color-behance: #1769ff;
    --color-skype: #00aff0;
    --color-twitch: #6441a5;
    --color-spotify: #7ab800;
    --color-whatsapp: #25d366;
    --color-whatsapp-alt: #128C7E;

    --tamanho-topo: 216px;
}

.btn{ display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 14px; font-weight: 600; text-transform: uppercase; width: 200px; height: 40px; box-shadow: var(--shadow); cursor: pointer; transition: var(--smooth); margin:15px auto; }
.btn-default{ background-color: var(--color2); color: var(--color6); }
.btn-default:hover{ background-color: var(--color4); color: var(--color5); }

.w3-form{ margin-top: 30px; }
.w3-form-box{ margin-bottom: 20px; }
.w3-form-box label{ font-size: 14px; line-height: 1; font-weight: 500; }
.w3-form-box label span{ color: var(--color3); }
.w3-form-box-radio{ height: 32px; width: 100%; border-radius: 0px;  }
.w3-form-box-campo{ box-shadow: var(--shadow); border: 2px solid rgba(0, 0, 0, .2); border-radius: 0px; height: 40px; width: 100%; background: var(--color6); margin-top: 10px; }
.w3-form-box-campo :is(input,select){ height: 100%; width: 100%; background-color: transparent; color: var(--color1); padding: 0 20px; font-size: 16px; font-weight: 500; border: 0; }
.w3-form-box-textarea{ box-shadow: var(--shadow); border: 2px solid rgba(0, 0, 0, .2); height: 120px; width: 100%; border-radius: 20px; background: var(--color6);  margin-top: 10px; }
.w3-form-box-textarea textarea{ height: 100%; width: 100%; background-color: transparent; color: var(--color1); padding: 20px; font-size: 16px; font-weight: 500; border: 0; }
.w3-form-box button{ cursor: pointer; width: 100%; border: 0; max-width: 200px; }

/* *************************** TOPO *************************** */
header.w3-topo{ position: fixed; top: 0; left: 0; width: 100%; padding: 5px 0 15px; transition: var(--smooth); z-index: 99; }
.w3-topo-logo{ width: 100%; text-align: center; }
.w3-topo-logo img{ width: 100%; max-width: 200px; transition: var(--smooth); }

header.topo-float { padding: 10px 0 0; background: rgba( 255, 255, 255, 0.5 ); box-shadow: 0 8px 32px 0 rgba(30, 38, 151, 0.151);backdrop-filter: blur( 4px ); -webkit-backdrop-filter: blur( 4px ); }
.topo-float .w3-topo-logo img{ max-width: 100px; }

.w3-topo-social ul{ display: flex; justify-content: center; align-items: center; }
.w3-topo-social ul li a{ padding: 5px 12px; display: block; text-align: center; }
.w3-topo-social ul li a svg{ height: 12px; fill: var(--color5); transition: var(--smooth); }
.w3-topo-social ul li a:hover svg{ fill: var(--color3); }

nav.w3-topo-menu{ width: 100%; }
nav.w3-topo-menu ul{ width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 5px; }
nav.w3-topo-menu ul li{ margin: 0 3px; font-size: 16px; font-weight: 600; text-transform: uppercase; }
nav.w3-topo-menu ul li a{ padding: 10px 15px; text-align: center; display: flex; align-items: center; justify-content: center; transition: var(--smooth); }
nav.w3-topo-menu ul li a:hover{ color: var(--color4); }
/* *************************** TOPO *************************** */


/* *************************** BANNER *************************** */
section.w3-banner{ height: 100vh; background: linear-gradient(0deg, var(--color5) 0%, var(--color6) 100%); display: flex; justify-content: center; align-items: flex-end; background: url('../img/bg-banner-topo.png') center; }
.w3-banner-topo-conteudo{ height: 100%; width: 100%; max-width: 660px; padding-top: var(--tamanho-topo); /* background: url('../img/banner-topo-2.png') no-repeat center bottom; background-size: contain; */ display: flex; justify-content: center; align-items: center; }
.w3-banner-topo-conteudo h1{ text-align: center; font-size: 26px; padding: 30px; text-transform: uppercase; font-weight: 700; background: rgba( 255, 255, 255, 0.5 ); box-shadow: 0 8px 32px 0 rgba(30, 38, 151, 0.151);backdrop-filter: blur( 4px ); -webkit-backdrop-filter: blur( 4px ); }
.w3-banner-topo-conteudo h1 em{ color: var(--color2); font-style: normal; }

.round { position: absolute; left: calc(50% - 20px); border: 2px solid var(--color3); width: 40px; height: 40px; border-radius: 100%; transform: rotate(90deg); margin-top: 5px; cursor: pointer; }
.w3-banner .round { margin-bottom: 20px; cursor: pointer; }
#cta{ width:100%; cursor: pointer; position: absolute; }
#cta .arrow{left: 30%; top: 12px; }
.arrow {position: absolute; bottom: 0;  margin-left:0px; width: 12px; height: 12px; background-size: contain; top:15px;}
.segunda{margin-left: 8px;}
.next { background-image: url('../img/arrow-banner.png'); }
/* .next { background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==); } */
@keyframes bounceAlpha {
    0% {opacity: 1; transform: translateX(0px) scale(1);}
    25%{opacity: 0; transform:translateX(10px) scale(0.9);}
    26%{opacity: 0; transform:translateX(-10px) scale(0.9);}
    55% {opacity: 1; transform: translateX(0px) scale(1);}
}
.bounceAlpha { animation-name: bounceAlpha; animation-duration:1.4s; animation-iteration-count:infinite; animation-timing-function:linear; }
.arrow.primera.bounceAlpha { animation-name: bounceAlpha; animation-duration:1.4s; animation-delay:0.2s; animation-iteration-count:infinite; animation-timing-function:linear;}
.round:hover .arrow{ animation-name: bounceAlpha; animation-duration:1.4s; animation-iteration-count:infinite; animation-timing-function:linear; }
.round:hover .arrow.primera{ animation-name: bounceAlpha; animation-duration:1.4s; animation-delay:0.2s; animation-iteration-count:infinite; animation-timing-function:linear; }
/* *************************** BANNER *************************** */


/* *************************** EMPRESAS *************************** */
p{ font-size: 18px; color: var(--color2); font-weight: 400; margin-top: 20px; }