@font-face {font-family:'Metropolis-Regular'; src: url('Metropolis-Regular.woff') format('woff'), url('Metropolis-Regular.otf') format('opentype');}
@font-face {font-family:'Metropolis-ExtraBold'; src: url('Metropolis-ExtraBold.woff') format('woff'), url('Metropolis-ExtraBold.otf') format('opentype');}
@font-face {font-family:'Metropolis-Light'; src: url('Metropolis-Light.woff') format('woff'), url('Metropolis-Light.otf') format('opentype');}

.container {position:relative; width:100%; margin:0 auto; padding: 0; box-sizing:border-box; }
.container-fluid {position:relative; width:100%; margin:0 auto; padding: 0; box-sizing:border-box; }
.column,.columns {width:100%; float:left; box-sizing:border-box}
.pad{padding:14px 0}
.pad2{padding:20px 0}.pad3{padding:30px 0}.pad4{padding:40px 0}.pad5{padding:50px 0}.pad6{padding:60px 0}
.padd{padding:80px 0; min-height:60px}
.br{color:#fff}
.brbg{background-color:#fff}
.douradobg{background: rgb(208,173,117); background: -moz-linear-gradient(320deg, rgba(208,173,117,1) 20%, rgba(235,213,155,1) 70%); background: -webkit-linear-gradient(320deg, rgba(208,173,117,1) 20%, rgba(235,213,155,1) 70%); background: linear-gradient(320deg, rgba(208,173,117,1) 20%, rgba(235,213,155,1) 70%);}
.redeg{background: rgb(131,14,12);background: linear-gradient(180deg, rgba(130,14,12,1) 21%, rgba(53,21,10,1) 93%); }
.txtdeg{background: -webkit-linear-gradient(#a1a1a1, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.ouro{color:#ab7b05}
.ourobg{background-color:#ab7b05}
.darkred{color:#660712}
.marrom{color:#7e6141}
.marrombg{background-color:#7e6141}
.red{color:#BB1726}
.redbg{background-color:#BB1726}
.orange{color:#f7921c}
.vd{color:#bad636}
.vdesc{color:#4e5736}
.vdescbg{background-color:#4e5736}
.bk{color:#000}
.marrom{color:#7e6141}
.marrombg{background-color:#7e6141}
.blu{color:#2d3337}
.blubg{background-color:#2d3337}
.cz{color:dimgray}
.som{text-shadow:1px 1px 19px rgba(0, 0, 0, 0.4);}
.somd{-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);}
.over{position:absolute; float:left;z-index:100;}
.trans{background-color:cornflowerblue;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);opacity:0.5}
.oki{text-transform:uppercase}
.img-circle {border-radius: 50%;}
.round{border-radius:12px}
#ganhadores{padding:120px 0 80px 0}

.selo{-webkit-box-shadow:0px 20px 34px 0px rgba(74,74,74,0.35);-moz-box-shadow:0px 20px 34px 0px rgba(74,74,74,0.35);box-shadow: 0px 20px 34px 0px rgba(74,74,74,0.35); background-color:#eee; padding:30px 20px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; border:1px solid #fff; margin-bottom:20px}
.no{color:#f7c600; float:left; font-size:45px; font-family:'Metropolis-ExtraBold'; margin-right:12px}
.deg{background:rgb(185,151,85);background:-moz-linear-gradient(180deg, rgba(185,151,85,1) 25%, rgba(222,199,153,1) 72%); background:-webkit-linear-gradient(180deg, rgba(185,151,85,1) 25%, rgba(222,199,153,1) 72%); background:linear-gradient(180deg, rgba(185,151,85,1) 25%, rgba(222,199,153,1) 72%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#b99755",endColorstr="#dec799",GradientType=1); }
.degred{ background: rgb(127,14,27); background: -moz-linear-gradient(0deg, rgba(127,14,27,1) 23%, rgba(213,7,42,1) 90%);
background: -webkit-linear-gradient(0deg, rgba(127,14,27,1) 23%, rgba(213,7,42,1) 90%); background: linear-gradient(0deg, rgba(127,14,27,1) 23%, rgba(213,7,42,1) 90%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7f0e1b",endColorstr="#d5072a",GradientType=1); }
.czbg{background:rgb(143,143,143);background:linear-gradient(90deg, rgba(143,143,143,1) 0%, rgba(255,255,255,1) 51%, rgba(177,177,177,1) 100%); }

.row {padding:0 20px}




.modal-window {position:fixed; background-color: rgba(5, 5, 5, 0.8); top:0; right:0; bottom:0; left:0; z-index:99999; visibility:hidden; opacity:0; pointer-events:none; -webkit-transition: all 0.3s; transition: all 0.2s}
.modal-window:target { visibility:visible; opacity:1; pointer-events:auto;}
.modal-window > div {max-width:300px; width:100%; padding:0px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%);transform: translate(-50%, -50%); padding:2em; background:#ffffff; -webkit-box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.7); -moz-box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.7); box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.7); border-radius:8px}
.modal-close {line-height:50px; font-size:80%; font-weight:bolder; position:absolute; right:12px; text-align:center; top:0; text-decoration:none}
.modal-close:hover {color: black;}
.modal-window div:not(:last-of-type) { margin-bottom: 15px;}

.zoom{transition: transform 0.3s;}
.zoom:hover{transform: scale(1.07)}


@media (min-width: 600px) {
    .container {width: 85%; padding: 0; }
    .row {padding:0}
}


@media (min-width: 800px) {
  .container { width: 80%; }
  .column, .columns { margin-left: 4%; }
  .column:first-child, .columns:first-child { margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .dois.columns                  { width:19%}
  .three.columns                  { width: 22%}
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%}
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%}
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}



html {font-size: 62.5%; scroll-behavior:smooth; margin:0; padding:0; overflow-x:hidden}
body {width:100%; max-width:100vw; font-size:1.5em; font-family:'Metropolis-Regular', sans-serif; line-height:1.4;font-weight:400; color:#555; background-position:top left; background-attachment:fixed; overflow-x:hidden}


h1, h2, h3, h4, h5, h6 {margin-top:1rem; margin-bottom:1.2rem; color:#434b2e; font-family:"Metropolis-ExtraBold", sans-serif; letter-spacing:-0.012em; line-height:1.1}
h1 { font-size: 4.0rem; }
h2 { font-size: 3.5rem; }
h3 { font-size: 2.8rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.6rem; }

@media (min-width: 950px) {
  h1 { font-size: 5rem;}
  h2 { font-size: 4.5rem; }
  h3 { font-size: 3.3rem; }
  h4 { font-size: 2.5rem; }
  h5 { font-size: 2.0rem; }
  h6 { font-size: 1.6rem; }
}

p {margin:0; font-size:1.2em; font-weight:300}
.normal{font-family:'Metropolis-Regular', sans-serif;}
.leve{font-family:'Metropolis-Light', sans-serif; font-weight:lighter}
.b,b{font-family:'Metropolis-ExtraBold', sans-serif; font-weight:bolder}

a {color:#660712; text-decoration:none;-webkit-transition:color 0.2s ease-in; -moz-transition:color 0.2s ease-in; -o-transition:color 0.2s ease-in}
a:hover {color:#3b1210}
#pp h6 a {color:#fff}


.button,button,input[type="submit"],input[type="reset"],
input[type="button"] {display:inline-block; height:48px; padding:0 33px; color:#fff; text-align:center; font-size:15px; font-weight:600; line-height:44px; text-decoration:none; text-transform:lowercase; white-space:nowrap; background-color:#4e5736; border-radius:7px; cursor:pointer; box-sizing:border-box; border:1px none #fff; letter-spacing:0.03em}
.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus {border-color:#fff; outline: 0; background-color:#000}
.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,input[type="button"].button-primary {background-color:#663300; font-size:1.12em; padding:8px 33px; height:58px;background-image:url(https://natalcaedu.com.br/img/dourado.webp); background-position:bottom right; text-shadow:1px 1px 14px rgba(0, 0, 0, 0.4);}
.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus {color:#FFF; background-color:#000}
.btnhm{position:absolute; bottom:4vh; width:auto; left:19%; font-size:1.2em; background-color:#ab7b05; color:#FFF; text-shadow:1px 1px 14px rgba(0, 0, 0, 0.4);}

.button-sec{height:38px; padding:8px 12px 8px 12px; color:#fff; text-align:center; font-size:12px; font-weight:600; line-height:38px; text-decoration: none; white-space: nowrap; background-color:#ccc; border-radius:19px; cursor: pointer; box-sizing: border-box; margin:0 10px}
.button-sec:hover {color:#fff; background-color:#000}

.bred{height:60px; padding:0 22px 9px 22px; color:#fff; text-align:center; font-size:18px; font-weight:bolder; letter-spacing:0.03em; line-height:60px; text-decoration: none; white-space: nowrap; background-color:#660712; border-radius:9px; cursor: pointer; box-sizing: border-box;}
.bred:hover {color:#fff; background-color:#000}

.bbr{height:58px; padding:0 27px 9px 27px; color:#663300; text-align:center; font-size:28px; font-weight:bolder; letter-spacing:-0.03em; line-height:58px; text-decoration: none; white-space: nowrap; background-color:#fff; border-radius:19px; cursor: pointer; box-sizing: border-box}
.bbr:hover {background-color:#000}

.botout{background-image:url(https://natalcaedu.com.br/img/dourado.webp); border-radius:9px}


input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],input[type="date"],textarea,select {height:42px; padding:9px 10px; background-color:#fff; border:1px solid #D1D1D1; border-radius:4px; box-shadow:none; box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],
textarea {-webkit-appearance: none; -moz-appearance: none;appearance: none; }
textarea {min-height: 65px; padding-top: 6px; padding-bottom: 6px; }
input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus {border: 1px solid #000; outline: 0; }
label,legend {display: block; margin-bottom: .5rem; font-weight: 600; }
fieldset { padding: 0; border-width: 0; }
input[type="checkbox"],input[type="radio"] { display: inline; padding: 5px}
label > .label-body { display: inline-block; margin-left: .5rem; font-weight: normal; }


#datan {background-color:#fff;width:250px;margin:2px 0 0 3px;padding:8px 5px 4px 7px;position:absolute;z-index:50;display:block}
#datan a {color:#aaa;cursor:default}


ul {list-style: circle inside; }
ol {list-style: decimal inside; }
ol, ul {padding-left: 0; margin-top: 0; }
ul ul,ul ol,ol ol,ol ul {margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }
li {margin-bottom: 1rem; }


table {border-collapse: collapse; margin:0; padding:0; width:100%; table-layout:fixed}
table caption {font-size:1.5em; margin:.5em 0 .75em 0}
table tr {padding:2em 0}
table th,table td { padding:.625em 0; text-align: center; border-bottom: 1px solid #E1E1E1}
table th, thead {font-size: .8em; text-transform: uppercase; font-weight: bold}
.padr{font-size:22px}
.ttd {font-size:15px}

@media screen and (max-width: 600px) {
  table thead {border:none; clip: rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }
  table tr {background-color:#fff; display:block; padding:0 10px; border-bottom:12px solid #e7eff3}
  table td {border-bottom: 1px solid #ddd; display:block; font-size:11px; text-align:right}
  table td:before {content: attr(data-label); float: left; }
  .ttd {font-size:12px}
}



button,.button {margin-bottom: 1rem; }
input,textarea,select,fieldset {margin-bottom: 1.5rem; }
pre,blockquote,dl,figure,table,p,ul,ol,form {margin-bottom: 2.5rem; }


.u-full-width {width:100%; box-sizing: border-box}
.u-half-width {width:49.7%; box-sizing: border-box}
.u-max-full-width {max-width: 100%;  box-sizing: border-box}
.u-pull-right {float:right}
.u-pull-left {float:left}
.tcenter{text-align: center}
.tjust{text-align: justify}
.tleft{text-align: left}


hr {margin-top:2rem; margin-bottom:2.5rem; border-width:0; border-top: 1px solid #E1E1E1}
.container:after,.row:after,.u-cf { content:""; display:table; clear:both}


@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
  0%, 100% { transform: scale(0.0);-webkit-transform: scale(0.0);
  } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); }
}







@media (min-width: 320px) {
.selo {display:inline-block; margin:auto 10px; width:auto; z-index:30; height:40px; padding:8px;  background: rgb(143,143,143); background: linear-gradient(90deg, rgba(143,143,143,1) 0%, rgba(255,255,255,1) 51%, rgba(177,177,177,1) 100%); border-radius:40px}
.selim{padding-bottom:40px}
.selo h1{font-size:1.4rem; color:#fff; padding:0 0 0 0; height:0.95em}
.selo h3{font-size:1.5rem; letter-spacing:0; margin-bottom:0; margin:0; text-align:left; text-transform:uppercase}
.ic{width:16px;height:auto;float:left;margin-right:8px}

button.bop {display:inline-block; margin-top:-8px; height:auto; width:110px; padding:15px 8px 8px 8px; color:#fff; text-align:center; font-size:0.75em; font-weight:700; line-height:11px; text-decoration:none; white-space:normal; word-wrap:break-word; background-color:#ab7b05; text-shadow:1px 1px 14px rgba(0, 0, 0, 0.4); cursor:pointer; box-sizing:border-box; -webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-bottomright:8px;-moz-border-radius-bottomleft:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px}

.tab {display: none;}
#prevBtn { background-color:#aaa}
.step {height:14px; width:14px; margin:12px 6px; background-color:#bbbbbb; border:none; border-radius:50%; display:inline-block; opacity:0.5}
.step.active {opacity: 1;}
.step.finish {background-color:#4CAF50}
.cad {max-width:540px;width:100%}
.tab input {padding:15px; width:100%; font-size:17px}
.tab input.invalid {background-color:#ffdddd}
input.rd{width:25px}
#pass {width:100%;padding-right:20px}
.olho {cursor:pointer; margin-top:10px; margin-left:75%; position:absolute; width:20px}

#top {z-index:50; position:absolute; top:0; width:100%; height:70px}
#cartao{background-color:#2d3337; background-image: url(https://natalcaedu.com.br/img/mao-cartao23.png); background-position:bottom right; background-size:contain; background-repeat:no-repeat; height:410px}
.rs{width:26px;height:auto;margin:-10px 2px 15px 2px}

	.hero{width:100%; height:620px; background-size:360%; padding:0 5%; background-image:url(https://natalcaedu.com.br/img/hero-desk.webp); background-repeat:no-repeat; background-position:top right; z-index:-2}
	.toplogo{position:absolute; top:12px; left:7%; width:54px; z-index:+1;}
	.marcas{align-content:center; align-items:center; flex-wrap:nowrap; justify-content:space-around}
	.marcas img{width:auto; height:25px; align-self:center; margin:15px}
	.luzes{position:absolute; background-image:url(https://natalcaedu.com.br/img/luzes.webp); background-repeat:repeat-x; background-size:85%; top:35px; left:0; width:100%; height:90px; z-index:-1}
	.mob-d{position:absolute; width:82%; height:auto; left:8.4%; top:120px; z-index:1}
    .natal,.natalin{position:absolute; width:40%; height:auto; left:0; top:0px; z-index:+2}
    .carrosmob{position:absolute; width:60%; height:auto; z-index:+5; left:20%; top:62%}
	.carros{display:none}
	.btnhm{position:fixed; bottom:-10px; z-index:10; font-size:1.1em; border-radius:10px 10px 0 0; width:64%; left:18%}
	.logos{position:absolute; width:49%; left:44%; top:90px; z-index:+5}
	.dourado{background-image:url(https://natalcaedu.com.br/img/dourado.webp); background-repeat:no-repeat; background-position:top center; background-size:cover}
	.titin {position:absolute; top:220px; left:12%}
	.heroin{width:100%; height:450px; background-size:250%; padding:0 5%; background-image:url(https://natalcaedu.com.br/img/hero-desk.webp); background-repeat:no-repeat; background-position:top left; z-index:-2}
	
	#como{padding-top:40px; padding-bottom:60px}
	#como p{font-size:2rem; margin:10px}
	.ico{width:50px; height:auto; position:relative}
	.seta{width:35px; height:auto; margin-top:20px; margin-bottom:30px}
	.botout img{width:100%; height:auto}
	.botout {margin-bottom:20px}

.nome{width:80%; margin:80px 0 0 10%}
.comofastmob{margin:-20px auto 25px auto}
.comofast{display:none}
.aviso{position:absolute; top:360px;right:5%;width:160px; color:#000; font-size:0.57em; text-align:right}

#in{padding-top:20px;padding-bottom:20px;background-image:url(https://natalcaedu.com.br/img/bg23.png); background-size:cover; background-attachment:fixed; -webkit-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.2);-moz-box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.2);box-shadow: 0px 20px 30px 0px rgba(0,0,0,0.2); z-index:10}
.seal{min-height:84px; margin-bottom:15px; padding:14px 20px}

.bgvd,#pp{height:auto; padding:0;background-color:#2d3337}
#pp{padding-top:0px; padding-bottom:80px}
#pp .row{padding:0}
#pp a{color:#fff}
#pp h6{text-align:center}
.nomein{font-size:1.4em; margin:45px 0 0 90px; width:160px; line-height:100%}
.logope{width:40%;height:auto; top:0; left:30%}
.luzespe{position:relative; background-image:url(https://natalcaedu.com.br/img/blu1.webp); background-repeat:repeat-x; background-size:95%; width:100%; height:80px; z-index:0}

.bloco{position:relative; z-index:20}

.topreg{display:none}
#nav-icon4 {width:20px; height:20px; position:fixed; top:5px; right:15px; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out; transition:.5s ease-in-out; cursor:pointer; z-index:99999; background:#151e0e; padding:20px; border-radius:80px}
#nav-icon4 span {display:block; position:absolute; height:5px; width:59%; margin:13px auto 10px 20.4%; background:#fff; border-radius:2px; opacity: 1; left: 0; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg); -webkit-transition: .25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;}
#nav-icon4 {}
#nav-icon4 span:nth-child(1) {top:0px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center;}
#nav-icon4 span:nth-child(2) {top:10px; -webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center;}
#nav-icon4 span:nth-child(3) {top:20px;-webkit-transform-origin:left center;-moz-transform-origin:left center; -o-transform-origin:left center; transform-origin:left center;}
#nav-icon4.open span:nth-child(1) {-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg); transform: rotate(45deg); top:-7px; left:7px; background-color:#f2cf13}
#nav-icon4.open span:nth-child(2) { width:0%; opacity:0;}
#nav-icon4.open span:nth-child(3) {-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform: rotate(-45deg); top:18px; left:5px; background-color:#f2cf13}
.menu{color:#fff; font-size:10px; position:fixed; top:40px; letter-spacing:0.1em; right:13px}

.overlay {position:fixed; top:0; left:0; width:100%; height:0%; opacity:0; visibility:hidden; -webkit-transition:opacity .35s, visibility .35s, height .35s; transition:opacity .35s, visibility .35s, height .35s; overflow: hidden; z-index:250; background-color:#262a04}
.overlay.open {opacity:1; visibility:visible; height:100%;}
.overlay.open li {-webkit-animation:fadeInRight .5s ease forwards; animation:fadeInRight .5s ease forwards; -webkit-animation-delay:.35s; animation-delay:.35s;}
.overlay.open li:nth-of-type(2) {-webkit-animation-delay:.4s; animation-delay:.4s;}
.overlay.open li:nth-of-type(3) {-webkit-animation-delay:.45s; animation-delay:.45s;}
.overlay.open li:nth-of-type(4) {-webkit-animation-delay:.50s; animation-delay:.50s;}
.overlay nav {position:relative; height:70%; top:45%; -webkit-transform:translateY(-50%); transform:translateY(-50%); text-align:center}
.overlay ul {list-style:none; padding:0; margin:0 auto; display:inline-block; position:relative; height:100%; width:70%}
.overlay ul li {display:block; height:12%; height:calc(100%/7); min-height:22px; position:relative; opacity:100; text-align:center}
.overlay ul li a {display:block; position:relative; text-decoration:none; font-family:'Metropolis-ExtraBold'; color:#4e5736 ; letter-spacing:-0.01em; z-index:99999; font-size:1.12em; background-color:#fff; padding:11px 29px; border-radius:30px}
.overlay ul li a:hover {color:#000}
.selomenu{width:110px;height:auto; margin:-80px 0 5px 0; background-color:none; padding:auto}
.logomenu{width:77px;height:auto; margin:-18px 0 5px 0; background-color:none; padding:auto}

.wrap-collapsible {margin:2rem 0}
.lbl-toggle h4{padding:0; font-size:2rem; text-transform:none; line-height:110%}
input[type='checkbox'] {}
.lbl-toggle {display:block; font-size:1.8rem; line-height:1rem; text-transform:uppercase; padding:1.4rem 0.7rem 0 1.4rem; color:#1c2f6e; background:#fff; cursor:pointer; border-radius:10px; transition:all 0.25s ease-out; margin-bottom:0; box-shadow:rgba(15, 20, 31, 0.15) 0px 0px 18px 0px;}
.lbl-toggle:hover { color:#673300}
.lbl-toggle::after { content:' '; display:inline-block; vertical-align:middle; transition:transform .2s ease-out; margin:0 0 0 6px}
.collapsible-content { max-height:0px; overflow:hidden; transition:max-height .15s ease-in-out; box-shadow:rgba(15, 20, 31, 0.15) 0px 0px 18px 0px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.toggle:checked + .lbl-toggle + .collapsible-content { max-height:2250px; height:auto}
.toggle:checked + .lbl-toggle { border-bottom-right-radius:0; border-bottom-left-radius:0;}
.collapsible-content .content-inner { background:#fff; border-bottom-left-radius:10px; border-bottom-right-radius:10px; padding:1.7rem;}
.content-inner p {margin-bottom:1.4rem}
}


@media (min-width: 360px) {
#cartao{height:440px;padding-top:20px}
.hero{min-height:720px; height:100vh; background-size:390%}
.mob-d{top:140px}
.carrosmob{top:63%}
}

@media (min-width:375px) {
.hero{min-height:750px}
	.titin {top:250px}
	.heroin{height:480px; background-size:240%}
	.mob-d{top:140px}
	.logos{top:97px}
}

@media (min-width: 412px) {
.hero{min-height:820px; height:100vh; background-size:390%}
#participe{margin-top:120px}
.aviso{top:390px;right:5%;width:160px}
	.titin {top:270px}
	.heroin{height:520px; background-size:252%}
    .natal{top:0px}
    .carrosmob{top:64%}
	.mob-d{top:23vh}
	.logos{top:110px}
	.btnhm{position:fixed; bottom:-10px; font-size:1.1em; width:64%; left:18%;}
}


@media (min-width: 600px) {
	.hero{height:700px; min-height:auto; background-size:200%}
	.toplogo{top:12px; left:7%; width:70px;}
	.marcas{align-content:center; align-items:center; flex-wrap:nowrap; justify-content:space-around}
	.marcas img{width:auto; height:25px; align-self:center; margin:15px}
	.luzes{background-size:cover; top:55px; height:90px}
	.mob-d{width:49%; left:25.6%; top:50px}
    .natal{width:30%; left:2%; top:-40px}
	.logos{width:25%; left:2%; top:47%}
	.carros{display:block; position:absolute; width:30%; height:auto; z-index:+5; left:70%; top:31vh}
	.carrosmob{display:none}
	.btnhm{position:absolute; bottom:auto; top:68%; left:3%; z-index:10; font-size:1.1em; border-radius:10px; width:auto; }

.nome{width:26%; margin:110px 0 0 28px; clear:both}
.nomein{font-size:1.6em; margin:53px 0 0 90px; width:170px}
.rs{width:29px;margin:-5px 2px 25px 2px}
.olho {margin-left:92%}
.logoin{max-width:100%; height:auto; margin-top:40px}
#cartao{height:200px; background-size:contain}
.cct{max-width:50%}
.natalin{width:32%; left:0; top:0px}
}


@media (min-width: 780px) {
.nome{width:89%; margin:133px 0 0 45px}
.logo{width:70px; margin:10px 0 10px 80px}
#como{padding-top:0px; padding-bottom:60px; padding-left:2%; padding-right:0}
.comofast{display:block; margin:-40px auto 20px auto}
.comofastmob{display:none}
.cct{max-width:65%}
	.hero{height:100vh; background-size:cover; padding:0 5%; background-image: url(../img/hero-desk.webp) }
	.toplogo{position:absolute; top:15px; left:9%; width:77px; z-index:+1;}
	.marcas img{width:auto; height:40px}
	.luzes{position:absolute; background-size:35%; top:50px; left:0; width:100%; height:90px; z-index:-1}
	.mob-d{position:absolute; width:49%; height:auto; left:25.6%; top:50px; z-index:+3}
	.natal{width:24%; left:5%; top:-20px}
	.carros{width:30%; left:69%; top:34% }
	.btnhm{left:4%; top:72%;}
	.logos{width:26%; left:4%; top:51%}
	.natalin{width:25%; left:8%; top:0px}
	.logope{width:120%;height:auto; top:0; left:30%}
	.three.columns.offset-by-seven{margin-top:40px}
	#pp h6{text-align:left;}
	#pp{padding:0 0 70px 0}
	.luzespe{background-size:auto; width:100%; height:100px; margin-top:0px; z-index:0}
}


@media (min-width:960px) {
.foot p{font-size:15px}.foot h3{font-size:26px}
.promologo{padding-left:7%}
.nome{width:100%; margin:130px 0 0 0}
.b{top:10px; left:auto; right:5%; width:60%}
#cartao{height:250px; background-size:contain}
.cct{max-width:80%}
.czbg.pad.round{min-height:140px}
.topreg{display:inline-block}
#nav-icon4 {width:38px; height:38px; padding:20px; top:17px; right:30px;}
#nav-icon4 span {height:5px; width:55%; margin:19px auto 10px 23%}
.menu{font-size:12px;top:48px; letter-spacing:0.14em; right:17px}
#nav-icon4.open span:nth-child(1) {top:-6px; left:7px}
#nav-icon4.open span:nth-child(3) {top:24px; left:5px}
.overlay ul li a {font-size:1.4em}
button.bop {font-size:0.9em; padding:15px 10px 8px 10px; height:44px; width:auto}
.nomein{font-size:1.7em; margin:60px 0 0 110px; width:190px}
.aviso{top:90px;right:13%;width:190px; font-size:0.7em}
	.hero{height:100vh; background-size:cover; padding:0 5%;}
	.toplogo{top:15px; left:9%; width:77px;}
	.marcas{display:flex; align-content:center; align-items:center; flex-wrap:nowrap; justify-content:space-around}
	.marcas img{height:40px}
	.luzes{background-size:35%; top:45px; height:90px;}
	.mob-d{width:47%; left:26%; top:30px}
	.natal{width:22%; left:10%; top:-40px}
	.logos{width:17.5%; left:12%; top:49%}
	.carros{width:25%; left:68%; top:25% }
	.btnhm{left:12%; top:70%; height:60px}
	.heroin{width:100%; height:370px; left:0; background-size:125%; background-image:url(https://natalcaedu.pages.dev/img/hero-desk-in.webp); background-position:top right;}
	.natalin{width:24%; left:8%; top:0px}
	.titin {top:170px; left:32%; width:60%}
.nomein{font-size:1.4em; margin:45px 0 0 90px; width:160px; line-height:100%}
}



@media (min-width: 1200px) {
#cartao{height:360px; padding-top:7%}
.nome{width:100%; margin:150px 0 0 15px}
.rs{width:33px;height:auto;margin:0px 2px 32px 2px}
.seal{min-height:184px}
	.toplogo{top:15px; left:11%; width:90px;}
	.marcas img{height:40px}
	.luzes{background-size:35%; top:55px; height:90px;}
	.natal{width:22%; left:10%; top:-40px}
	.logos{width:17.3%; left:12%; top:50%}
	#como{padding-left:15%; padding-right:8%}
	#como h2{margin-left:-13%}
	.seta{width:45px; margin-top:30px}
	.heroin{height:420px; background-size:105%;}
	.natalin{width:23%; left:8%}
	.titin {top:200px; left:32%; width:60%}
}



@media (min-width: 1360px) {
.nome{width:103%; margin:160px 0 0 15px}
#cartao{height:400px}
.rs{width:38px;height:auto;margin:0px 3px 32px 3px}
.aviso{top:120px;right:13%;width:300px; font-size:0.72em;}
	.toplogo{top:15px; left:11%; width:90px;}
	.logope{width:90%}
	.btnhm{left:14%; top:70%; height:60px}
	.heroin{height:420px; background-size:cover}
	.natalin{width:22%; left:6%}
	.titin {top:220px; left:29%; width:60%}
}


@media (min-width: 1600px) {
#participe{margin-top:240px}
#reg{margin-top:-110px}
.logo{width:80px; margin:20px 0 10px 120px}
.nome{width:102%; margin:190px 0 0 30px}
.b{top:5px; right:9.8%; width:55%}
.rs{width:40px;height:auto;margin:0px 3px 32px 3px}
.seal{min-height:140px}
.aviso{top:140px; right:15%}
	#nav-icon4 {width:44px; height:44px; padding:20px; top:20px; right:40px;}
	#nav-icon4 span {height:5px; width:60%; margin:21px auto 10px 21.4%}
	.menu{font-size:14px;top:50px; letter-spacing:0.1em; right:17px}
	#nav-icon4.open span:nth-child(1) {top:-10px; left:7px}
	#nav-icon4.open span:nth-child(3) {top:24px; left:5px}
	.toplogo{top:15px; left:11%; width:100px}
	.marcas img{height:40px}
	.luzes{top:60px; height:90px; background-size:auto}
	.mob-d{top:50px}
	.natal{width:22%; left:10%; top:-40px}
	.logos{width:18%; left:11%; top:50%}
	.btnhm{left:16%; top:70%; height:60px}
	.luzespe{background-size:auto}
	.heroin{height:500px}
	.natalin{width:22%; left:6%}
	.titin {top:260px; left:28%}
}


@media (min-width: 1900px) {
#menu{margin:0px auto 0 auto;}
.promologo{padding-left:7%}
#participe{margin-top:280px}
.nome{width:103%; margin:200px 0 0 30px}
.aviso{top:180px}
	.heroin{height:600px}
	.titin {top:330px}
	.mob-d{top:70px}
}





#return-to-top {position:fixed; bottom:18px; right:20px;background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.5); width:48px; height:48px; display: block; text-decoration:none; -webkit-border-radius:34px; -moz-border-radius:34px; border-radius:34px; display:none; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;}
#return-to-top i{color:#fff; margin:0; position:relative; left:18px; top:16px; font-size:19px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease;  transition:all 0.3s ease;}
#return-to-top:hover {background:rgba(0, 0, 0, 0.7)}
#return-to-top:hover i {color:#fff; top:14px}
.arrow {border:solid #fff; border-width:0 4px 4px 0; display:inline-block; padding:4px; transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}



.heroel {width:100vw; height:100vh; z-index:0; position:absolute; top:0;left:0}
.background {width:90vw; height:100vh; z-index:0; position:fixed; top:0;left:0}
.background span { width:20vmin; height:20vmin; backface-visibility:hidden; position:absolute; animation-name:move; animation-duration:6s; animation-timing-function:linear; animation-iteration-count: infinite;}
.background span:nth-child(1) {background-image:url(https://natalcaedu.com.br/img/star-ama.webp); background-size:cover; top:18%; left:32%; animation-duration:12.8s; animation-delay:-2s; transform-origin:10vw 2vh;}
.background span:nth-child(4) {background-image:url(https://natalcaedu.com.br/img/star-ama.webp); background-size:cover; top:10%; left:93%; animation-duration:12.8s; animation-delay:-2s; transform-origin:10vw 2vh;}
.background span:nth-child(5) {background-image:url(https://natalcaedu.com.br/img/star-br.webp); background-size:cover; top:72%; left:85%; animation-duration:15.8s; animation-delay:-12.5s; transform-origin:17vw 20vh}
.background span:nth-child(6) {background-image:url(https://natalcaedu.com.br/img/star-br.webp); background-size:cover; top:23%; left:45%; animation-duration:10.8s; animation-delay:-0.1s; transform-origin:7vw 25vh}
.background span:nth-child(7) {background-image:url(https://natalcaedu.com.br/img/star-br.webp); background-size:cover; top:2%; left:75%; animation-duration:16s; animation-delay:-10.3s; transform-origin:17vw 19vh}
.background span:nth-child(8) {background-image:url(https://natalcaedu.com.br/img/star-ama.webp); background-size:cover; top:44%; left:48%; animation-duration:15.1s; animation-delay:-14.4s; transform-origin:25vw 16vh}
.background span:nth-child(9) {background-image:url(https://natalcaedu.com.br/img/star-ama.webp); background-size:cover; top:57%; left:26%; animation-duration:10.1s; animation-delay:-2s; transform-origin:-2vw 17vh}
.background span:nth-child(10) {background-image:url(https://natalcaedu.com.br/img/star-ama.webp); background-size:cover; top:30%; left:49%; animation-duration:12.3s; animation-delay:-0.4s; transform-origin:-23vw 6vh}
.background span:nth-child(11) {background-image:url(https://natalcaedu.com.br/img/star-br.webp); background-size:cover; top:72%; left:85%; animation-duration:15s; animation-delay:-12.5s; transform-origin:25vw -4vh}
.background span:nth-child(12) {background-image:url(https://natalcaedu.com.br/img/star-br.webp); background-size:cover; top:30%; left:7%; animation-duration:15.8s; animation-delay:-11.7s; transform-origin:21vw 3vh}
@keyframes move { 100% { transform: translate3d(0, 0, 1px) rotate(360deg); }}