/* 
	RESET
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -o-box-sizing: border-box;
}

a:link {
    text-decoration: none;
    color: inherit;
}

a:visited {
    text-decoration: none;
    color: inherit;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.clear {
    clear: both;
}

/* FIM RESET */

@font-face {
    font-family: 'Rubik-Regular';
    src: url('../fonts/Rubik-Regular.ttf')format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rubik-Light';
    src: url('../fonts/Rubik-Light.ttf')format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rubik-Bold';
    src: url('../fonts/Rubik-Bold.ttf')format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Coolvetica';
    src: url('../fonts/coolvetica.ttf')format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Coolvetica Compressed Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Coolvetica Compressed Regular'), url('../fonts/compressed rg.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Coolvetica Condensed Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Coolvetica Condensed Regular'), url('../fonts/coolvetica condensed rg.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Coolvetica Crammed Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Coolvetica Crammed Regular'), url('../fonts/coolvetica crammed rg.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Coolvetica Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Coolvetica Regular'), url('../fonts/coolvetica rg.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Coolvetica Regular Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Coolvetica Regular Italic'), url('../fonts/coolvetica rg it.woff') format('woff');
    }

html{
    scroll-behavior: smooth;
}

body {
    font-family: 'Rubik-Regular';
    font-size: 14px;
    line-height: 1.1;
    /* overflow: hidden; */
    overflow-x: hidden;
    position: relative;
}

strong{
    font-weight: bold;
}

.contentPopUp ol{
    list-style: square;
    margin: 10px 0px;
}
.contentPopUp ol li{
    margin-left: 15px;
    list-style: square;
}

section.catalogo {
    width: 100vw;
    height: 100vh;
    background-image: url(../img/catalogo1.jpg);
    background-size: cover;
    position: relative;
    display: flex;
    padding: 30px 40px;
    align-items: center;
    position: absolute;
    top:0;
    left:0;
}
section.catalogo span{
    color: #fff;
    display: block;
    margin-left: 8px;
    font-size: 18px;
}

section.catalogo h1 {
    color: #fff;
    font-size: 75px;
    margin-bottom: 20px;
}

section.catalogo h1 span {
    display: inline-block;
    font-size: 75px;
}

.arrow-down {
    width: 46px;
    height: 54px;
    position: absolute;
    bottom: 100px;
    left: 40px;
    animation: seta 2s infinite;
}
.arrow-up {
    width: 31px;
    height: 36px;
    position: absolute;
    top: 40px;
    left: 40px;
    opacity: 0.5;
}
.arrow-up:hover{
    opacity: 1;
}

@keyframes seta{
    0%, 100% {
        bottom: 80px;
    }
    50%{
        bottom: 50px;
    }
}

@keyframes setaUp{
    0%, 100% {
        top: 30px;
    }
    50%{
        top: 50px;
    }
}

.arrow-nav{
    display: block;
    width: 16px;
    height: 16px;
    background-image: url(../img/i-nav.svg);
    position: absolute;
    top:12px;
    right: 15px;
    visibility: hidden;
    opacity: 0;
    transition: all ease 0.5s;
}

.i-arrowBack{
    display: block;
    width: 24px;
    height: 24px;
    background-image: url(../img/i-arrowBack.svg);
    background-size: contain;
    position: absolute;
    top:-5px;
    left: 0px;
}

section.descricao {
    width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
    background-image: url(../img/bg-descricao.jpg);
    background-size: cover;
    position: relative;
    display: flex;
    padding: 30px 40px;
    align-items: center;
    position: absolute;
    top:100vh;
    left:0;
}

section.descricao h2 {
    display: table;
    font-size: 75px;
    color: #fff;
    min-height: 165px;
}

section.descricao h2::after{
    content: '|';
    transition: all ease 0.5s;
    margin-left: 5px;
    opacity: 1;
    animation: piscando .8s infinite;
}

@keyframes piscando{
    0%, 100% {
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}

section.descricao h2 span {
    display: block;
}

section.descricao p {
    color: #022950;
    font-size: 50px;
    margin-top: 20px;
    transition: all ease 1s;
}

section.descricao p span {
    
}

section.categorias {
    width: 100vw;
    min-height: 100vh;
    background-color: #022950;
    background-image: url(../img/catalogo2.jpg);
    background-size: cover;
    padding:60px;
    position: absolute;
    left: 0;
    top:200vh;
}

section.categorias h3 {
    font-size: 25px;
    color: #fff;
    border-bottom: thin solid rgba(255,255,255,.1);
    padding-bottom: 10px;
    font-family: 'Rubik-Bold';
}

section.categorias h3 span {
    color: #fff;
    font-family: 'Rubik-Regular';
}

section.categorias .categoria,  section.categorias .categoria-woliflix{
    margin-top: 20px;
    margin-bottom: 60px;
    height: auto;
}

section.categorias .categoria ul, section.categorias .categoria-woliflix ul{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

section.categorias .categoria ul li,  section.categorias .categoria-woliflix ul li{
    /* box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.11), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.079074), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0655718), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.055), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0444282), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.030926); */
    border-radius: 50px;
    background: #f7f7f7;
    display: table;
    max-width: 400px;
    padding: 13px;
    margin-bottom: 20px;
    color: #022950;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all ease 0.5s;
    cursor: pointer;
    position: relative;
    backdrop-filter: blur(7px);
    font-size: 15px;
/* Note: backdrop-filter has minimal browser support */
}

section.categorias .categoria ul li:hover, section.categorias .categoria-woliflix ul li:hover{
    background-color: #C33442;
    color: #fff;
}
section.categorias .categoria ul li:hover > .arrow-nav, section.categorias .categoria-woliflix ul li:hover > .arrow-nav{
    visibility: visible;
    opacity: 1;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.content{
    width: 100vw;
    min-height: 100vh;
    /* background-image: url(../img/bgDetalhes.jpg);
    background-size: cover;
    background-attachment: fixed; */
    background-color: #f7f7f7;
    padding:60px;
    position: relative;
}

.navegacao .voltar{
    position: relative;
    display: table;
    color: #022950;
    text-transform: uppercase;
    padding-left: 28px;
    font-family: 'Rubik-Bold';
}
.navegacao .voltar span{
    display: inline-block;
}

.navegacao ul{
    margin-top: 15px;
}
.navegacao ul li{
    display: inline-block;
    color: #C33442;
    padding-right: 20px;
    position: relative;
}

.i-chevron{
    display: block;
    width: 16px;
    height: 16px;
    background-image: url(../img/i-chevron.svg);
    position: absolute;
    top:0px;
    right: 0px;
}

.cursos ul{
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
} 
.cursos ul li{
    width: 25%;
    padding: 20px;
    color: #022950;
    margin-bottom: 50px;
    border-right: thin solid rgba(0,0,0, .1);
    text-align: center;
    cursor: pointer;
    transition: all ease 0.5s;
}
.cursos ul li img{
    max-width: 90%;
}
.cursos ul li:hover{
    background-color: #e5e5e5;
}
.cursos ul li h3{
    margin-top: 10px;
    line-height: 1.5;
    font-family: 'Rubik-Bold';
    font-size: 15px;
}
.cursos ul li:nth-child(4n){
    border-right: none;
}
.cursos ul li img{
    display: table;
    border-radius: 3px;
    margin: 5px auto;
}
.overlay{
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,.8);
    position: fixed;
    top:0;
    z-index: 9998;
    padding: 60px;
    display: none;
    align-items: center;
    justify-content: center;
}
.popup{
    background-color: #f7f7f7;
    color: #022950;
    width: auto;
    max-width: 960px;
    height: auto;
    max-height: 90vh;
    padding: 50px 30px;
    position: relative;
    line-height: 1.3;
    border-radius: 5px;
}
.popup .contentPopUp{
    max-height: 70vh;
    overflow-y: scroll;
    scrollbar-width: thin;          /* "auto" or "thin" */
    scrollbar-color: rgba(41, 97, 156, 0.54) transparent; 
    padding-right: 20px;
}
.popup .contentPopUp::-webkit-scrollbar {
    width: 5px;        
}
.popup .contentPopUp::-webkit-scrollbar-track {
    background: #f7f7f7;
    border-radius: 3px;
}
.popup .contentPopUp::-webkit-scrollbar-thumb {
    background: rgba(41, 97, 156, 1);    /* color of the scroll thumb */
    border-radius: 20px;       /* roundness of the scroll thumb */
    border: 3px solid transparent;  /* creates padding around scroll thumb */
}

.contentPopUp p {
    margin-bottom: 15px;
}

.i-close{
    width: 24px;
    height: 24px;
    background-image: url(../img/i-close.svg);
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    right: 20px;
    top:20px;
    cursor:pointer;
}

.popup h2{
    font-size: 20px;
    margin-bottom: 20px;
    line-height: 1.3;
    border-bottom: thin solid rgba(0,0,0,.1);
    padding-bottom: 20px;
    font-family: 'Rubik-Bold';
}
.popup span{
    display: block;
    margin-bottom: 15px;
}
.popup span strong{
    font-size: 18px;
    color: #C33442;
    margin-bottom: 5px;
    display: block;
    font-family: 'Rubik-Bold';
}
.categoria-lxp ul{
    width: 100%;
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    padding: 0px;
}
.categoria-lxp ul li{
    width: 23%;
    padding: 5px;
    background-color: #f7f7f7;
    border-radius: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}
.categoria-lxp ul li img{
    display: table;
    max-width: 100%;
    border-radius: 5px;
    margin:0 auto;
}

/* LOADER */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }
  

  .loading{
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,.8);
    position: fixed;
    top:0;
    left: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .busca{
    width: 100%;
    margin:30px auto 50px auto;
    position: relative;
  }

  .busca input[type="text"]{
    width: 100%;
    height: 50px;
    border:none;
    border-radius: 5px;
    padding: 10px;
    outline: none;
  }

  .busca input[type="submit"]{
    position: absolute;
    top:2px;
    right:2px;
    padding: 15px 35px;
    cursor: pointer;
    border:none;
    border-radius: 5px;
    background-color: #022950;
    color: #fff;
    text-transform: uppercase;
  }