/**
** VSCode? Recomendada a extensão "Better Comments"
** Cores do site:
**   Azul: #059fa7
**   Fontes: #4d4e4c;
** */

/**********************************************
**          Reset
** ********************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,hr,th,td {margin:0; padding:0;}
h3,h4,h5,h6 {font-weight:700;}
h1, h2 {font-weight:700;}
small {font-weight:400; font-size:12px;}
html {-webkit-font-smoothing: antialiased;}
html {/*font-size: 0.973vw;*/font-size: 14px; font-family: 'Nunito Sans', sans-serif} /** Colocar com a fonte do google que tiver */
strong, b {font-weight:700;}
* {box-sizing: border-box;}
ul, ol{list-style: none;}
a {text-decoration: none;}
a, a:hover, a i, a:hover i, button, button:hover, button i, button:hover i{transition:all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;cursor: pointer;}
input, textarea, button{outline: none;border: 0;padding: 0;background: transparent; font: inherit;}
body {color: #4d4e4c; background: #FFFFFF; font-weight:400; letter-spacing: 0px;}
.clear {width: 100%; clear: both; display: block; height: 0px;}
img {max-width: 100%;height: auto;}
.hidden-desktop{display: none!important;}

/** Evita que o font-awesome trave o carregamento da página */
html.fa-events-icons-loading .fa-fw {display: inline-block;width: 1.28571429em;}
html.fa-events-icons-loading .fa-fw::before {content: "\00a0";}

/** muda aquele azul quando o usuário seleciona texto */
::selection{background: #059fa7; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.25);}
/******  End of Reset  *******/



/**********************************************
**     loader 
** ********************************************/
.loader {background-size: 100px, 100px;background-repeat: no-repeat;background-position: center center;width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;display: none;z-index: 10000;justify-content: center;align-items: center;background: radial-gradient(circle, #ffffff,#eee, #ccc);}

.loader img{height: 100px; width: auto; object-fit: contain; object-position: center;}

html.loading{overflow: hidden}
html.loading .loader{display: flex;}
/******  End of loader  *******/




/**********************************************
**     Header 
** ********************************************/
.header {position: fixed; top: 0; left: 0; width: 100%; padding: 2em 0; z-index: 1000}
.flexmenu {display: flex; align-items: center; justify-content: space-between;}
.logo {width: 13.7rem; margin-right: auto;}
.logo img{width: 100%; display: block; height: auto; object-fit: contain; object-position: center left; filter: brightness(0) invert(1);}
.social {margin-right: 4.285rem;}
.social-item {}
.social-item + .social-item{margin-left: 1rem;}
.social-item i{color: #fff; font-size: 1.4285rem;}
.social-item:hover i{transform: scale(1.15); color: #059fa7}

.menu-open {flex-shrink: 0; position: relative; z-index: 2; border: 2px solid #fff; border-radius: 4px; display: block; width: 4.285rem;}
.menu-open::after{content:''; width: 100%; padding-bottom: 100%; display: block;}
.menu-open span {transition: all .5s ease; position: absolute; height: 3px; background: #fff; opacity: 0.5; border-radius: 4px; width: 54%; transform-origin: center left; pointer-events: none;}
.menu-open span:nth-child(1){left: 23%; bottom: 75%}
.menu-open span:nth-child(2){width: 75%; left: -20%; bottom: 50%; z-index: -1; }
.menu-open span:nth-child(3){left: 23%; bottom: 25%}

.menu-open:hover span{left: 50%; bottom: 10%; opacity: 1;}
.menu-open:hover span:nth-child(1){ transform: rotate(45deg) translateX(-100%);}
.menu-open:hover span:nth-child(2){ transform: rotate(90deg) translateX(-100%);}
.menu-open:hover span:nth-child(3){ transform: rotate(-45deg) translateX(0%)}

#menu{position: fixed; top: 0; right: 0; width: 100vw; height: 100vh; z-index: 100; display: flex;}
#menu-area{background: #fff; position: relative;width: 40.357rem; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;  padding: 2.75rem 10.8%; max-width: 75%; z-index: 2}
#menu-bg{background: rgba(0,0,0,0.9); height: 100%;flex-grow: 1;}
.menu-close {position: absolute; left: -1rem; top: 2.75rem; z-index: 2; border: 2px solid #00757f; border-radius: 5px; padding: 1rem 0px 1rem 0; width: 65px; text-align: center;}
.menu-close i {color: #00a4b9; font-size: 1.5rem; line-height: 1em;}
.menu__logo {width: 13.5rem;}
.menu__line {width:4rem; height: 2px; background: rgba(0,0,0,0.1); display: block; border: none; margin: 6vh 0 7.75vh;}
.menu__link {font-size: 2.14rem; color: #00a4b9; font-weight: 900; position: relative; width: 100%; text-align: right}
.menu__link::after{content:''; width: 0; height: 2px; background: currentColor; position: absolute; top: calc(50% - 1px); right: -0.5em; transition: all 0.25s ease;}
.menu__link:hover::after{width: 0.75em; right: -1.25em}
.menu__link:hover{color: #00757f}

.menu__link + .menu__link{margin-top: 5vh}
.menu-close:hover{background:#fff}
.menu-close:hover i{transform: scale(1.5) rotate(180deg) translate(5%, -8.5%)}

.header{transition: all 0.25s ease}
.header.active{padding: 1rem 0; background: #06a4ab}
.header.headerHidden{top:-6rem; background: #00757f}
/******  End of Header  *******/


/**********************************************
**          [PG] Home
** ********************************************/
.banner {height: 100vh; min-height: 700px; position: relative; /*padding: 16% 0 6.25%; */ padding: 10% 0 5%; display: flex;}
.banner .btn{text-transform: uppercase}
.banner__picture {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center}
.banner .container{flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;}
.banner-content{margin-bottom: 16px}
.banner__title {/*font-size: 5.5714rem;*/ font-size: 5rem; font-weight: 900; color: #fff; line-height: 1em;}
.banner__line {width: 11.5rem; height: 1px; background: #fff; opacity: 0.5; border: none; margin: 3.2143rem auto 2.8571rem 0}
.banner__text {font-size: 1.4285rem; font-weight: 400; color: #fff; line-height: 1.625em;}
.banner-actions {margin-top: auto; display: flex; align-items: center; justify-content: space-between;}
.banner-btns {display: flex;}
.banner-btns .btn{margin-right: 0.71rem;}
.btn {width: 254px; height: 60px; border: 2px solid #fff; border-radius: 32px; line-height: 1em; font-size: 1rem; font-weight: 700; color: #306f75; padding: 1em; display:flex; align-items: center; justify-content: center; text-align: center; background: #fff;}
.btn2 {background: transparent; color: #fff;}
.btn3{background: #06a4ab; border-color: #06a4ab; color: #fff; }
.btn4{border-color: #000; color: #06a4ab}
.btn:hover{background: #306f75; border-color: #306f75; color: #fff; }
.down {color: #fff; font-size: 1rem; text-transform: uppercase; font-weight: 700; display: flex; align-items: center;}
.down i {margin-left: 1em; font-size: 1.25em;;}
.down:hover {letter-spacing: 0.1em;}

.solutions{padding: 6.25% 0 9%}
.solutions .container2{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8rem;}
.solution {padding: 4.64rem 0 0 3.21rem; position: relative;}
.solution__icon {width: 8.35rem; object-fit: contain; object-position: top left; position: absolute; top: 0; left: 0; opacity: 0.1;}
.solution__title {position: relative; z-index: 2; font-size: 1.4285rem; color: #06a4ab; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 2.75em}
.solution__text {font-size: 1.14285rem; color: #4c4e4c; line-height: 1.625em}


.segments {position:relative;}
.segments .container{position:relative; z-index: 1;}
.segments::before{content:''; position: absolute; top: 0; left: 0; width: 86.67%; height: 85%; background: #05979e; border-radius: 0 3px 3px 0;}
.title2-wrapper{padding: 7% 0;display: flex; align-items: center; justify-content: space-between;}
.segments-top {padding-right: 12.5%;}
.title2 {font-weight: 300; letter-spacing: 0.2em; font-size: 2.14rem; color: #4d4e4c; text-transform: uppercase}
.title2 strong{font-weight: 900}
.title2.white{color: #fff;}

.segments__title {}
.segments__categories {}
.categories {}
.category {font-size: 1.14285rem; color: #fff; font-weight:300; padding: 1.25em; border: 2px solid transparent; line-height: 1em; border-radius: 2.5em;}
.category.active{font-weight: 700; border-color: #4d4e4c; padding: 1.25em 2.5em;}
.category:hover{background: #4d4e4c; border-color: #4d4e4c}

.segments-tabs {}

.products{}
.products__title {}
.products-grid {display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 1.5rem; align-items: flex-end; position: relative;}
.text {font-size: 1.142rem; line-height: 1.9rem;}
.products-bg-wrapper{position:relative;}
.products-bg-wrapper::before{content:''; width: 42%; height: 100%; position: absolute; left: 0; top: 0; background: #e9ebec; border-radius: 0 0.5rem 0.5rem 0}
.products-grid .text{padding-right: 40%;}
.video-link {display: block; border-radius: 0.9375rem; overflow: hidden; position: relative;}
.video-link::before{content:''; padding-bottom: 62.5%; width:100%; display: block;}
.video-link::after{content:''; width: 3rem; height: 3rem; background: url(../img/icon/video.svg); background-size: contain; background-repeat: no-repeat; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s ease}
.video-link__thumb {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; transition: transform 1s ease;}
.video-link:hover{box-shadow: 0 2px 5px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.25), 0 15px 25px rgba(0,0,0,0.125);}
.video-link:hover::after{width: 5rem; height: 5rem}
.video-link:hover .video-link__thumb{transform: scale(1.15);}
.products-btn-wrapper{display: flex; align-items: center; justify-content: center; padding: 4rem 0 2.5rem; position: relative;}
.products-btn-wrapper::after{content:''; width: 14.5rem; height: 1px; background: #d3d8db; position: absolute; left: 67.5%; top: 55%;}
.products-btn-wrapper .btn{text-transform: none; width: 21.42rem; max-width: 100%;}

.clients{padding-bottom: 4.5rem;}
.clientsGrid{display: grid; grid-template-columns: repeat(5, 1fr); gap:4rem 7rem; align-items: center;}
.client{width:100%; display: block;}
.client__logo{width:100%; object-fit: contain; object-position: center; transition: all 0.35s ease;}
.client:hover .client__logo{filter: brightness(150%); transform: scale(1.15)}

.blog{position: relative; padding: 4.5rem 0;}
.blog::before{content:'';width: 75%; height: calc(100% - 4.5rem - 8rem); background: #05a0a8; border-radius: 0.5rem 0 0 0.5rem; position: absolute; top: 0; right: 0;}
.blog .title2-wrapper{position: relative;}
.blog .title2-wrapper::after{content:''; position: absolute; width: 11rem; height: 1px; right: 16.5%; top: 50%; background: rgba(255,255,255,0.2);}
.blog .title2-wrapper .btn{width: 16.2rem}
/******  End of [PG] Home  *******/

/**********************************************
**          [PG] Blog
** ********************************************/
.filters {border-bottom: 2px solid #f2f2f2; position: relative; z-index: 3}
.filters .container2 {display: grid; grid-template-columns: 1fr 1fr 2fr;}
.filter-wrapper {position: relative;}
.filter-wrapper + .filter-wrapper::after{content:''; width: 2px; height: calc(100% - 4px); background: #f2f2f2; position: absolute; top: 0; left: 0;}
.filter {display: block; width: 100%; padding: 2.5rem 3rem; font-size: 1.2857rem; color: #000; display: flex; align-items: center;}
.filter i{margin-left: 1.5rem}
.filter-options {position: absolute; left: 0; top: 100%; width: 100%; background: #fff; z-index: 3; box-shadow: 0 5px 15px rgba(0,0,0,0.15); display: flex; flex-direction: column;}
.filter-option {font-size: 1.2857rem; color: #000; padding: 0.5rem 3rem}
.filter-option:hover{color: #05a0a8}
.filter-option.active {background: #05a0a8; color: #fff}
.filter:hover{color:#05a0a8}

.filter.has-search {}

.search {height: 100%;position: relative;display: flex;}
.search__field {width: 13rem;padding: 2.5rem 0 2.5rem 3rem;height: 100%;font-size: 1.2857rem; color: #000; opacity: 0.5; transition: all 0.25s ease;}
.search__field:focus, .search__field:not(:empty){opacity: 1; width: calc(100% - 4rem);}
.search__btn {width: 4rem;flex-shrink: 0;display: flex;align-items: center;justify-content: center;}
.search__btn:hover{background:#000}
.search__btn:hover i {color: #fff}

.blog-list {padding: 6.5% 0 2.5%}

.pagination .container2 {display: flex; align-items: center; justify-content: space-between; padding-top: 3.5%}
.pagination__nav {color: #000; font-size: 1.0714rem; padding: 0.5rem 1rem; margin: 1rem; border-radius: 0.5rem;}
.pagination__nav i{color: #000}
.pagination__nav:first-of-type i{margin-right: 1rem;}
.pagination__nav:last-of-type i{margin-left: 1rem;}
.pagination__nav:hover{background: #05a0a8; color: #fff;}
.pagination__nav:hover i{color: #fff}
.pagination__nav.disabled{opacity: .5; pointer-events: none;}
.pagination__links {display: flex;}
.pagination__link {font-size: 1.2857rem; color: #000; padding: 0.5rem 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; margin: 0 0.85rem}
.pagination__link.active {border-bottom-color: #1b7981; font-weight: 900}
.pagination__link:hover{border-color: #05a0a8;}
.pagination__link.disabled {pointer-events: none;}

/******  End of [PG] Blog  *******/

/**********************************************
**          [PG] Blog interna
** ********************************************/
#post .std-top::before{background: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0.5), transparent);}
.post {background: #fff; padding: 5% 0;}
.container {}
.post-top {width: 72%; margin: 0 auto 3.5rem;}
.post-top__info {font-size: 1.1429rem; font-weight: 400; color: #d3d3d3; text-align: center;}
.post-top__title {font-size: 2.7143rem; font-weight: 900; color: #000; text-align: center; line-height: 1.15em; margin-bottom: 0.65em;}
.post-actions {display: flex; align-items: center; justify-content: center}
.post-actions .btn{margin-right: 2rem; width: 100px; height: auto; padding: 0.8571rem}
.post__date {font-size: 1rem; color: #059fa7}
.post-wrapper {width: 68.5%; margin: 0 auto; position: relative;}
.addthis-wrapper {width: 32px; left: -82px; top: 0; position: absolute;} 
.text {}

.related{margin-top: 7.5%;}
.related__title{font-size: 1.9286rem; font-weight: 700; color: #d3d3d3; display: flex; align-items: center; justify-content: flex-start; width: 100%; margin-bottom: 2em}
.related__title::after{content:''; height: 1px; background: #e9e9e9; flex-grow: 1; display: block; margin-left: 1.15rem}

.has-ckeditor{color: inherit; font-size: 1.15rem;line-height: 1.73em;font-weight: 400;text-align: left;}
.has-ckeditor p {color: inherit;font-size: inherit; line-height: inherit;font-weight: inherit; text-align: left; margin-bottom: 1em;}
.has-ckeditor em {font-style: italic; }
.has-ckeditor strong {font-weight: 700;}
.has-ckeditor ul, .has-ckeditor ol { padding-left: 30px; border-left: 2px solid #059fa7; margin: 25px auto 30px 0;}
.has-ckeditor ul { list-style: none;}
.has-ckeditor ul li::before { content: '•'; display: inline-block; font: inherit; font-weight: 700; margin-right:5px; color: #059fa7}
.has-ckeditor ol {list-style: none; counter-reset: ckeditor}
.has-ckeditor ol li::before { counter-increment: ckeditor; content: counter(ckeditor); display: inline-block; font: inherit; font-weight: 700; margin-right:5px; color: #059fa7}
.has-ckeditor li{font-size: inherit;color: inherit;line-height: inherit;text-align: left;margin-bottom: 1em;line-height: 1.5em;}
.has-ckeditor a { font-weight: 700; color: #059fa7; text-decoration: underline;}
.has-ckeditor table  {border-collapse: collapse;padding: 1em;margin: 1em auto;max-width: calc(100% - 1em);overflow-x: scroll;border: none;}
.has-ckeditor table th{font-size: 1em;font-weight: 700;border-bottom: 2px solid #f0f0f0; border-right: 2px solid #f0f0f0; color: #059fa7;padding: 0.5em;}
.has-ckeditor table th:last-child{border-right: 0;}
.has-ckeditor table tr td  {padding: 0.5em;border: none;border-right: 1px solid #f0f0f0; text-align: left;font-size: 0.75em;border-bottom: 1px solid #f0f0f0; line-height: 1.5em;}
.has-ckeditor table tr td:last-child { border-right: 0; }
.has-ckeditor table tr:last-child td { border-bottom: 0; }
.has-ckeditor img {max-width: 90%;height:auto;object-fit:contain;object-position:center;margin: 25px auto;display: block;}

/******  End of [PG] Blog interna  *******/


/**********************************************
**          [PG] LMS
** ********************************************/
.questions {padding: 5% 0;}
.question-wrapper {position: relative; padding-bottom: 2rem}
.question-wrapper::after{content:''; width: 95%; height: 1px; background: #767676; position: absolute; bottom: 0; left: 2.5%; opacity: 0.1}
.question {display: flex; justify-content: space-between; padding: 3rem 0 2rem; width: 100%;}
.question__text {color: #4d4e4c; font-size: 2rem; letter-spacing: 0.2em; padding-right: 1em; font-weight: 900; text-transform: uppercase; text-align: left}
.question.active .question__text, .question:hover .question__text{color: #05a3ab}
@media (max-width: 1100px) {
  .question__text{
    max-width: 80%;
  }
  .buy-link{
    display: none;
  }
  .buy-link-mobile{
    display: block !important;
    position: relative!important;
    margin: inherit!important;
    margin-left: 42px!important;
    text-align: center!important;
    margin-top: 10px !important;
  }
}
.question__ui {position:relative; transition: all 0.5s ease; width: 2rem; height: 2rem; flex-shrink: 0;}
.question__ui i{transition: all 0.25s ease; font-size: 2rem; color: #05a3ab; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.question__ui .fa-minus {opacity: 0;}
.question__ui .fa-plus {opacity: 1}

.question.active .question__ui{transform: rotateZ(180deg)}
.question.active .question__ui .fa-minus{opacity: 1}
.question.active .question__ui .fa-plus{opacity: 0}
.answer {padding: 2rem 0}
.text {}
/******  End of [PG] LMS  *******/


/**********************************************
**          [PG] Soluções
** ********************************************/
.items{padding: 2rem 0 4rem}
.item {position: relative; padding: 4rem 0;}
.item + .item{margin-top: 2rem}
.item .container{display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2;} 
.item__picture {width: 39.5%; position: relative; border-radius: 0.5rem; overflow: hidden; order: 9}
.item__picture::before{content:''; width: 100%; display: block; padding-bottom:63.11%;}
.item__picture img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.item__content {width: 50%;}
.item__title {margin-bottom: 3rem}
.item__text {}
.item.item2 .item__picture{ order: 0 }
.item.item2::before{content:''; width: 61.45%; height: 100%; top: 0; right: 0; position: absolute; z-index: 1; background: #e9ebec; border-radius: 0.5rem 0 0 0.5rem}
/******  End of [PG] Soluções  *******/


/**********************************************
**          [PG] Produção
** ********************************************/
#producao .solutions .container2{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem;}
.videos {position: relative; padding: 3rem 0 3rem}
.videos::before{content:''; width: 86.5%; height: calc(100% - 10.15rem); position: absolute; top: 0; left: 0; background-image: -moz-linear-gradient( 101deg, rgb(6,113,116) 0%, rgb(5,163,171) 100%);background-image: -webkit-linear-gradient( 101deg, rgb(6,113,116) 0%, rgb(5,163,171) 100%);background-image: -ms-linear-gradient( 101deg, rgb(6,113,116) 0%, rgb(5,163,171) 100%);border-radius: 0 0.5rem 0.5rem 0;}

.videos__title {color: #fff}
.videos-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem}
/* .item.item2 .item__picture{ order: 0 } */
.item.item3::before{content:''; width: 61.45%; height: 100%; top: 0; left: 0; position: absolute; z-index: 1; background: #e9ebec; border-radius: 0 0.5rem 0.5rem 0} 
.item.item3 .item__content{width:55%;}
/******  End of [PG] Produção  *******/


/**********************************************
**          [PG] Consultoria
** ********************************************/
.tabs-nav {border-bottom: 2px solid #f1f1f1}
.tabs-nav .container-nav{display: flex; padding: 0;}
.tab-btn {flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 2.5rem; opacity: 1; text-transform: uppercase;}
.tab-btn + .tab-btn{border-left: 2px solid #f1f1f1}
.tab-btn__icon {width: 2.5714rem; height: 2.5714rem; margin-right: 1.1429rem; object-fit: contain; object-position: center; transition: all 0.5s ease; filter: brightness(1);}
.tab-btn__text {font-size: 1.1rem; color: #1B7981; letter-spacing: 0.2em; transition: all 0.5s ease}
.tab-btn:hover{opacity: 1; background-color: #1B7981;}
.tab-btn.active{opacity: 1; background-color: #05a3ab;}
.tab-btn.active .tab-btn__text, .tab-btn:hover .tab-btn__text{color: white;}
.tab-btn.active img, .tab-btn:hover img{filter: brightness(0) invert(1)}

/******  End of [PG] Consultoria  *******/

/**********************************************
**          [EL] Cards grid
** ********************************************/
.cards-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.124rem; }
.card {border-radius: 0.5rem; overflow: hidden; position: relative; display: block; transition: all 0s}
.card *{transition: all 0.25s ease;}
.card::before{content:''; width: 100%; padding-bottom: 122.13%; display: block;}
.card__picture {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.card__content {width: 76%; position: absolute; left: 12%; bottom: 12%; z-index: 2; transition: all 0s, transform 0.5s, background 1s}
.card__title.big {font-size: 2rem; margin-bottom: 0.85em;}
.card__title{font-size: 1.5rem; color: #fff; font-weight: 900; z-index: 2; margin-bottom: 1em;}
.card__text{font-size: 1rem; color: #fff; opacity: 0.5}
.card__more {display: inline-block; color: #fff; padding: 0.5em 0; font-size: 1.2857em; border-bottom: 2px solid #05a3ab;}
.card__date{color: #05a3ab; font-weight: 700; font-size: 1rem;}
.card:hover .card__title,
.card:hover .card__text,
.card:hover .card__date
{height: 0; overflow: hidden;}
.card:hover .card__content{transform: rotateXY(360deg) ; width: 100%; height: 100%; left: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.5);}
.card:hover .card__more{border-color: transparent; font-size: 2rem; font-weight: 700;}
/******  End of [EL] Cards grid  *******/



/**********************************************
**          [EL] Contato
** ********************************************/
input::placeholder, textarea::placeholder{color: currentColor; opacity: 1; font:inherit;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: currentColor; opacity: 1; font:inherit;}
input:-moz-placeholder, textarea:-moz-placeholder{color: currentColor; opacity: 1; font:inherit;}
input::-moz-placeholder, textarea::-moz-placeholder{color: currentColor; opacity: 1; font:inherit;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder{color: currentColor; opacity: 1; font:inherit;}
input::-ms-input-placeholder, textarea::-ms-input-placeholder {color: currentColor;opacity: 1; font:inherit;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input[type="number"] {-moz-appearance: textfield;}

.contact {position: relative; padding: 4.5rem 0; background-image: url(../img/fundo-contato.jpg);background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed;}
.contact::before{content:''; height: 10%; width: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to bottom, white, transparent); pointer-events: none;}
#home .contact{padding: 4.5rem 0 18rem;}
.contact-inner .title2{margin-bottom: 1.285rem;}
.contact-inner .title2, .contact-inner .text{text-align: center;}
.text {}
.contact__text {margin-bottom: 1rem;}

.form {display: grid; gap: 10px; width: 50%; margin: 0 auto;}
.form-item {position: relative;}
.form-item__field {padding: 2rem 2.75rem 1rem; display: block; width: 100%; border: 2px solid rgba(27, 121, 129, 0.5); color: #4f4e4e; font-size: 1.285rem; border-radius: 3rem; resize: none; appearance: none; -webkit-appearance: none; -moz-appearance: textfield;}
.form-item__label {position: absolute; left: 2.75rem; top: 2rem; color: #00717f; font-size: 1.14285rem; font-weight: 700; transition: all 0.35s ease;}
.form-item.active .form-item__label,
.form-item:focus ~ .form-item__label{font-size: 0.85rem; font-weight: 900; top: 1rem;}
.form-item.select{}
.form-item.textarea {height: 13.5rem}
textarea.form-item__field{height: 100%}
.form .btn{width: 100%;}

select + .select2{width: 100%!important}
.select2-container .select2-selection{border: 2px solid rgba(27, 121, 129, 0.5); border-radius: 3rem; height: auto; background: transparent;}
.select2-container .select2-selection .select2-selection__rendered{color: #00717f; font-size: 1.14285rem; padding: 2rem 3rem; line-height: 1em; font-weight: 700}
.select2-container .select2-selection .select2-selection__arrow{width: 3rem; height: 100%; display: flex; align-items: center; justify-content: center; }
.select2-container .select2-selection .select2-selection__arrow b{display: none}
.select2-container .select2-selection .select2-selection__arrow::after{content: '\f0d7'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1.25rem; color: #00717f}
.select2-dropdown{border: 2px solid #00717f;}
.select2-container .select2-results__option[aria-selected="true"]{background: #00717f; color: #ffffff}
.select2-container .select2-results__option--highlighted[aria-selected]{background: #05a3ab; color: #fff}

/******  End of [EL] Contato  *******/



/**********************************************
**          [EL] Newsletter
** ********************************************/
.newsletter {position: relative; z-index: 2; margin-top: -10rem; }
.newsletter::before{content:''; width: 100%; height: calc(100% - 10rem); background: #383938; position: absolute; bottom: 0; left: 0;}
.newsletter-box {width: 85%; position: relative; z-index: 2;background-image: -moz-linear-gradient( 101deg, rgb(6,113,116) 0%, rgb(5,163,171) 100%);background-image: -webkit-linear-gradient( 101deg, rgb(6,113,116) 0%, rgb(5,163,171) 100%);background-image: -ms-linear-gradient( 101deg, rgb(6,113,116) 0%, rgb(5,163,171) 100%);border-radius: 2.5rem;margin: 0 auto;padding: 6.15rem 2rem 5.7rem}

.newsletter__title {color: #fff; text-align: center; margin-bottom: 3rem;}
.newsletter__title strong{display: block}
.form {}
.form-white {}
.form.form2 {grid-template-columns: 1fr 1fr; width: 70%}
.form-white .form-item {}
.form-white .form-item__field {color: #fff; border-color: rgba(255,255,255,0.5);}
.form-white .form-item__label {color: #fff}
.form2 .btn {grid-column: 1 / -1;}
/******  End of [EL] Newsletter  *******/


/**********************************************
**          [EL] Footer
** ********************************************/
.footer {background: #383938; padding: 5.71rem 0 1.5rem;}
.footer-infos{width: 85%; margin: 0 auto}
.footer__logo {width: 11.85rem; margin: 0 auto 3rem; display: block; }
.footer__logo img{filter: brightness(0) invert(1); transition: filter 0.25s ease; cursor: pointer;}
.footer__logo:hover img{filter: brightness(1) invert(0);}
.footer-items {display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(83, 85, 83,0.2); padding: 2rem 1.5rem}

.footer-socials {display: flex; align-content: center;}
.footer-item {font-size: 1.285rem; display: flex; align-items: center; color: #fff}
.footer-item span{color: #fff}
.footer-item i{color: #1b7981;margin-right: 1em;}
.footer-item:hover span{color: #1b7981;}
.footer-item:hover i{color: #fff;}
i.inverted {transform: scaleX(-1);}
.up {border: 2px solid white; border-radius: 4px; width: 3rem; position: relative;}
.up::before{content:''; width: 100%; padding-bottom: 100%; display: block; }
.up i{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #1b7981; font-size: 1.15rem}
.up:hover{background: #1b7981; border-color: #1b7981;}
.up:hover i{top: 0; color: #fff; font-size: 1.5rem}
.copyright {display: flex; align-items: center; justify-content: center;}
.copyright__text {font-size: 0.85rem; color: #fff; opacity: 0.5;}
.duo {width: 2rem; margin-left: 2rem; opacity: 0.5;}
.duo:hover{opacity: 1;}
.duo img{filter: brightness(0) invert(1); transition: all 0.5s ease;}
/******  End of [EL] Footer  *******/



/**********************************************
**          [EL] Topo padrão
** ********************************************/
.std-top {position: relative; padding: 14.8571rem 0 9.6429rem; overflow: hidden; min-height: 34.2857rem}
.std-top::before{content:'';width:100%;height:100%;background: linear-gradient(to right, black 10%, transparent);position: absolute; top: 0; left: 0; z-index: 2;}
.std-top__picture {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; object-fit: cover;}
.std-top .container {position: relative; z-index: 3}
.std-top__title {font-size: 4.2857rem; position: relative;color: #fff; font-weight: 900; line-height: 1em}
.std-top.has-subtitle .std-top__title{padding-bottom: 1.5rem;}
.std-top.has-subtitle .std-top__title::after{content:'';width:8.9286rem; height: 0.0714rem; background: #fff; opacity: 0.2; position: absolute; bottom: 0; left: 0;}
.std-top__subtitle {font-size: 1.1429rem; margin-top: 2em; opacity: 0.7; color: #fff; font-weight: 400;}
/******  End of [EL] Topo padrão  *******/









/**********************************************
**          RESPONSIVO
** ********************************************/
.container2 {width: 100%; box-sizing: border-box; position: relative; z-index: 1; padding: 0 6.25%;}
.container  {width: 100%; box-sizing: border-box; position: relative; z-index: 1; padding: 0 9%;}

/** desktop -> telas grandes */
@media (min-width: 1920px) {
}

/** desktop -> alguns notebooks e maioria dos monitores */
@media (max-width: 1920px) {
}

/** desktop -> maioria dos notebooks */
@media (max-width: 1440px) {
}

/** mobile -> ipad pro, tablets em landscape, celulares maiores em landscape */
@media (max-width: 1200px) {
  /** menu **/
  .menu-open{width: 2.5rem; height: 2.5rem;}
  /** fim **/


  .hidden-mobile{display: none!important;}
  .hidden-desktop{display: block!important;}

  /** home **/
  .banner{min-height: 100vh; height: auto;}
  .banner__title{font-size: 3rem}
  .banner__line{margin: 1rem auto 1rem 0}
  .banner__text{font-size: 1rem}
  .banner__text br{display: none}
  .banner-actions{margin-top: 3rem; flex-wrap: wrap}
  .solutions .container2{grid-template-columns: 1fr; gap: 3rem}
  .title2-wrapper{flex-direction: column}
  .title2-wrapper .title2{}
  .segments__title{margin-bottom: 2rem}
  .category{font-size: 1rem; padding: 0.5em 1em}
  .blog .title2-wrapper{flex-direction: row}
  .blog::before{width: 60%}
  .cards-grid{gap: 1rem; grid-template-columns: 1fr 1fr;}
  .products-bg-wrapper::before{width: 80%; height: 75%; top: -7%;}
  .products-grid{grid-template-columns: 1fr 1fr; gap: 1.5rem 0.5rem}
  .products-grid .text{padding-right: 20%; grid-column: 1 / -1;}
  .clientsGrid{grid-template-columns: repeat(4, 1fr); gap: 5rem}
  .form, .form.form2{width: 100%}
  .newsletter-box{width: 100%;}
  /** fim **/


  /** footer **/
  .footer-items{flex-direction: column}
  .footer-item{margin: 1rem}
  .footer-item i{margin-right: 0;}
  /** fim **/


  /** topo padrão **/
  .std-top{padding: 10rem 0 4.5rem; min-height: unset}
  .std-top__title{font-size: 3rem}
  /** fim **/


  /** inteligencia **/
  .tabs-nav .container2{flex-direction: column;}
  .tab-btn{border-left: 2px solid #f1f1f1; justify-content: flex-start!important; padding: 1rem}
  .tab-btn__icon{margin-right: 1rem}
  .tab-btn__text, .tab-btn:hover .tab-btn__text{letter-spacing: 0.1em;}
  .tab-btn.active{border-left-color: #05a3ab}
  .item__title{margin-bottom: 1em}
  .item__picture{flex-shrink: 0;}
  /** fim **/
  
  /** producao **/
  #producao .solutions .container2{grid-template-columns: 1fr; gap: 3rem}
  /** fim **/

  /** blog **/
  .filters .container2{grid-template-columns: 1fr 1fr;padding: 0}
  .filter{padding: 1.5rem 1.25rem; font-size: 1rem}
  .filter-option{padding: 0.5rem 1.25rem; font-size: 1rem}
  .filter-wrapper.has-search{grid-column: 1 / -1;}
  .filter-wrapper + .filter-wrapper::after{height: 100%}
  .filter-wrapper + .filter-wrapper.has-search::after{width: 100vw;height: 2px;left: 50%;transform: translateX(-50%);}
  .search__field{padding: 1.5rem 0 1.5rem 1.25rem; flex-grow: 1}

  .post-top{width: 100%}
  .post-wrapper{width: 100%; padding: 0 75px}
  .addthis-wrapper{left: 0}
  /** fim **/
}

/** mobile -> tablets maiores, celulares em landscape, ... */
@media (max-width: 992px) {


}

/** mobile> tablets */
@media (max-width: 768px) {

  /** home **/
  .banner{padding: 5rem 0}
  .banner .container{justify-content: space-evenly;}
  .banner-actions{margin-top: 0.5rem;}
  .banner-btns{width: 100%; display: flex; flex-wrap: wrap;}
  .banner-btns .btn{margin: 0.71rem}
  .down{width: 100%;}
  /** fim **/

  /** inteligencia **/
  .item{padding: 2rem 0}
  .item + .item{margin-top: 1rem}
  .items{padding: 2rem 0}
  .item .container{flex-direction: column;}
  .item.item2::before{width: 96.5%}
  .item__picture{order: 9!important; margin-top: 1.5rem}
  .item__picture, .item__content{width: 100%}
  .item.item3 .item__content{width: 100%}
  .item.item3 .item__content{}
  .item.item3::before{width: 96.5%}
  /** fim **/

  /** LMS **/
  .question__text{font-size: 1.5rem}
  /** fim **/

  /** blog **/
  .pagination__nav{margin: 0; padding: 0.5rem; font-size: 1rem}
  .pagination__nav span{display: none}
  .pagination__link{font-size: 0.85rem}
  
  .post-wrapper{padding: 0}
  .addthis-wrapper{width: 100%; position: relative; margin-bottom: 15px}
  .post-top__title{font-size: 1.5rem}
  /** fim **/

  /** card **/
  .card__title{font-size: 1.25rem; line-height: 1.15em; margin-bottom: 0.5em}
  .card__content{width: 90%; left: 5%; bottom: 5%}
  /** **/


}

/** mobile> celulares  */
@media (max-width: 576px) {
  
  /** menu **/
  .logo, .menu__logo{width: 7.5rem}
  .social{margin-right: 2rem}
  .menu__link{font-size: 1.5rem; padding: 0.5rem 0 0.5rem 0.5rem}
  .menu__link + .menu__link{margin-top: 0.5em}
  /** fim **/

  
  /** topo padrão **/
  .std-top{padding: 7.5rem 0 3.5rem}
  .std-top.has-subtitle .std-top__title{padding-bottom: 1rem}
  .std-top__subtitle{font-size: 1rem; margin-top: 1rem}
  /** fim **/

  /** home **/
  .banner{padding: 6.5rem 0 2.5rem}
  .banner-actions{ width: 100%; margin-top: 1.5rem}
  .banner-btns{width: 100%}
  .banner-btns .btn{width: 100%; margin: 0}
  .banner-btns .btn + .btn{margin-top: 0.71rem}
  .down{display: none}
  .solution{padding: 1.5rem 0 0 1.5rem}
  .solution__icon{width: 4.5rem}
  .solution__title{margin-bottom: 1.5rem;}
  .segments__categories {display: grid;grid-template-columns: 1fr 1fr;gap: 0.25rem; width: 100%}
  .category, .category.active{padding: 0.5em 1em}
  .cards-grid{grid-template-columns: 1fr;}
  .title2-wrapper{padding: 2rem 0}
  .title2{font-size: 1.25rem; letter-spacing: 0.1em}
  .products{overflow: hidden}
  .products-bg-wrapper::before{top: -1rem}
  .clients{padding-bottom: 2rem}
  .clientsGrid{grid-template-columns: repeat(3, 1fr); gap: 2rem}
  .blog{padding: 0 0 2rem}
  .blog::before{width: 96.5%; top: 2rem}
  .blog .title2-wrapper{flex-direction: column; padding: 0 0 2rem}
  .blog .title2{margin-bottom: 1rem}
  .blog .title2-wrapper .btn{margin: 0 auto}
  .blog .title2-wrapper::after{display: none}
  .newsletter .container{padding: 0 0.5rem}
  .newsletter-box{padding: 2rem 1.5rem}
  .form.form2{grid-template-columns: 1fr;}
  /** fim **/

  /** footer **/
  .footer-items{padding: 2rem 0;}
  .footer-item{width: 100%; display: flex; align-items: center; justify-content: center;}
  .footer-item span{margin-left: .5rem; text-align: center;}
  .footer-item strong{display: block;}
  .copyright{flex-direction: column; align-items: center;}
  .copyright__text{text-align: center}
  .duo{margin: 2rem auto 0}
  /** fim **/


  /** LMS **/
  .question__text{font-size: 1.15rem; letter-spacing: 0.1em}
  .question__ui{width: 1rem; height: 1rem;}
  .question__ui i {font-size: 1rem}
  /** fim **/

  /** producao **/
  .videos-grid{gap: 0.5rem; grid-template-columns: 1fr 1fr;}
  .video-link::after{width: 1.5rem; height: 1.5rem}

}

/*Sweet Alert 2*/
.swal2-popup .swal2-styled.swal2-confirm {background-color: #05a3ab !important;}