html, body {font-family: 'Montserrat', sans-serif;margin:0;font-size:1.15em;overflow-x: hidden;scroll-behavior:smooth;}
body {position: relative;}
a, a:visited, a:hover, a:active {color:inherit;text-decoration: none;}
a:hover {text-decoration: underline;}
ul {padding-left: 0;list-style: none;}
header, ul, .conteudo {display: grid; width:1400px;max-width:80%;margin:0 auto;text-align:center;}
.conteudo { text-align: left;}
nav {text-align: right;}
ul li {display: block;}

body {padding-top:140px;}
nav {display:grid; grid-template-columns: 2fr auto auto auto auto auto;align-items:center;position:fixed;top:0;background-color: rgba(0, 0, 0, 0.875);z-index:100;left:0;right:0;padding:0 1em;height:140px;}
nav a {text-align: center;padding:1em;color:#fff;}
nav a:hover, nav a:active {color:#aef;}
nav img {width: 207px;}
nav h1 {text-align: left;margin:0;padding:0.66em 0;}
nav p {line-height: 1.2em;}

ul.itens {grid-template-columns: 1fr 1fr 1fr;column-gap: 2em;}
ul.itens img {height: 250px;}
ul.itens h3 {padding:0.5em;}
ul.itens.maior {margin-bottom:5em;}
ul.itens.maior img {height: 300px;}

#h2, header img {transition: margin-left 3s, margin-right 3s;transition-timing-function: ease;margin-left:-1200px;margin-right:1200px;}
header img {margin-left:1200px;margin-right:-1200px;}

.conteudo {grid-template-columns: 1fr 1fr;overflow:visible;position: relative;}
.conteudo > div {overflow: visible;position: relative;}
.conteudo > div > img {position:absolute;left:-26%;top:70px;width:116%;max-width: 116%;}
.conteudo > div > img.tras {z-index: -1;}
.conteudo h2 {line-height: 1.37em;margin-left:-0.7em;padding-top:1.2em;}
.conteudo h2 span {color:#0076f5;background:#000;position: relative;z-index: 2;}
.conteudo .fundo {margin-top: 13.3em;position: relative;margin-right:3em;z-index:-1;}
.conteudo .fundo.semmargem {margin-top:0;}
.conteudo .fundo img {width:110%;z-index: 3;margin:1em 0;}
.conteudo .fundo img:first-child {margin-top: 3em;}
.conteudo .fundo img:last-child {margin-bottom: 3em;}
.conteudo .fundo img:nth-of-type(2n) {margin-left: -7.25em;}
.conteudo .fundo::before {content:"";background-color: #0076f5;position:absolute;left:-100%;width:100%;height:100%;z-index:-1;}

.conteudo .fundo p { background: #fff;padding:0.5em;margin-top:-2em;color:#0076f5;z-index:4;position:relative;float:left;}
.conteudo .fundo p:nth-of-type(2n) { float:right;}

.fundo {background-color: #0076f5;}
h1, h2, h3, h4, dt { color: #0076f5;text-transform: uppercase;margin-top:0;padding-top:1.33em;}
.fundo h1, .fundo h2, .fundo h3, .fundo h4, .fundo p {color:#fff;}
/*section h2, section h3, section h4, section p {text-align: center;}*/

img {max-width: 100%;}
button {border: 0;font-size: 1.2em;padding:0.8em 1.2em;font-family:inherit;display: block;cursor:pointer;}

h2 {font-size: 4.5em;text-align: left;}
section > h3 {font-size:3em;text-align: center;}
h3 {font-size:1.3em;}

p {line-height: 2em;}

h4 {font-size:2em;}

hr {border:0;border-top: 2px solid #000;width:20%;min-width:200px;margin-top:10px;margin-bottom:10px;z-index:1;position: relative;}
hr.left {margin-left:0;}
/*hr.left:first-of-type {margin-top:0;}*/
hr.left + hr.left {margin-left:4%;margin-top:0px;margin-bottom:-13px;}

hr.right {margin-right:4%;}
hr.right + hr.right {margin-right:0;margin-top:0px;margin-bottom:-13px;}

header {position:relative;grid-template-columns: 1fr 1fr;overflow: visible;margin-bottom:2em;}
header::before {content: url('img/fundo-esc-bolinhas.png');position:absolute;top:34%;left:-206px;width:206px;scale:47%; }
header img {max-width:120%;}
header button {position: relative;}
header button::after {content: url('img/fundo-esc-setinhas.png');position:absolute;right:-170px;top:0;scale:47%;}

iframe {height:70%;}

#menu-mobile {position:fixed;right:30px;top:80px;width:40px;cursor:pointer;display: none;z-index:105;}
#menu-mobile span {display: block;height:7px;margin-bottom:5px;border-radius:5px;background-color: #0076f5;width:100%;}

button, h2 span {background-color: #000;color:#fff;}
h2 span {letter-spacing: 0.15em;}

footer {background-color: #dadada;padding-bottom:2.8em;}
footer section {display: grid;grid-template-columns: 1.2fr 0.8fr;width:70%;margin:0 auto;}
footer img {width:4em;margin:3.6em 0.75em;}
.extras li {padding-bottom: 200px;}

.sociais {text-align: right;}
.sociais a {display: inline-block;}

.whats {position: relative;width:7em;display:block;margin:1.6em 0 1.3em 64px;font-size:2.3em;padding:0.15em 0.5em;font-weight: 700;border-top-right-radius: 0.5em;border-bottom-right-radius: 0.5em;border: solid 0.166em #000;border-left:0;padding-left:0.66em;}
.whats::before {content: url('img/whatsapp.png');scale:50%;position:absolute;left:-128px;top:-63px;}
address {display:block;margin-top:2.8em;font-size:1.1em;font-weight: 700;text-transform: uppercase;font-style:normal;}

#topo {display: none;}
.flutuante {max-width:15%;width:100px;position:fixed;bottom:2em;right:2em;display: block;z-index:10;}
.flutuante.esquerda {right:auto;left:2em;font-size: 0.8em;text-align: center;}


@media only screen and (max-width: 1600px) { body, html {font-size:1.1em;} }
@media only screen and (max-width: 1500px) { body, html {font-size:1.075em;} }
@media only screen and (max-width: 1400px) { body, html {font-size:1.05em;} }
@media only screen and (max-width: 1350px) { body, html {font-size:1.025em;} }
@media only screen and (max-width: 1300px) { body, html {font-size:1em;} }
@media only screen and (max-width: 1250px) { body, html {font-size:0.975em;} }
@media only screen and (max-width: 1200px) { body, html {font-size:0.95em;} }
@media only screen and (max-width: 1100px) { body, html {font-size:0.9em;} }

@media only screen and (max-width: 1025px) {
    body, html {font-size:1.2em;}
    header, ul.itens, footer section, .conteudo { grid-template-columns: 1fr;}
    .conteudo {max-width: 100%;width:100%;}
    .conteudo > div > img {width: 80%;left:auto;}
    .conteudo h2, .conteudo p {margin:0.66em auto 1.33em;width:80%;}
    .conteudo .fundo {margin-right: 0;max-width: 100%;width:100%;}
    .conteudo .fundo img:nth-of-type(2n) {margin-left: 0;}

/*    .conteudo .fundo::after {content:"";background-color: #0076f5;position:absolute;right:-100%;width:100%;top:0;height:100%;}*/

    header img {max-width:100%;}
    /*header button {font-size: 2em;}*/
    header img, header button {margin:2em auto;}
    nav {font-size: 0.55em;}
    h2 {font-size: 3.5em;}
    .sociais {text-align: center;}
    .whats::before {scale:66%;top:-46px;}
}
@media only screen and (max-width: 900px) {
    .conteudo > div > img {width: 90%;}
}

@media only screen and (max-width: 800px) {

    #menu-mobile {display: block;}

    body {padding-top: 200px;}
    nav {height:200px;}
    nav > a {display: none;border-bottom: solid 1px #0076f5;background-color:#eee;}
    nav > a:first-of-type {border-top: solid 1px #0076f5;}

    .itens > li > p {display: none;}
    nav {grid-template-columns: 1fr;font-size: 1em;}
    nav h1, nav a, nav p {text-align: center;margin:0;}
    nav img {width: 300px;max-width: 80%;}
    h2, section > h3 {font-size: 2.75em;}
    footer img {width:3em;}
    .whats {font-size:1.2em;width:7em;}
    .whats::before {scale:40%;top:-163%;}
    footer section {width:80%;}
}
@media only screen and (max-width: 700px) {
     h2, section > h3 {font-size: 2.5em;}
     .conteudo > div > img {width: 100%;}
}
@media only screen and (max-width: 600px) { h2, section > h3 {font-size: 2.25em;} }
@media only screen and (max-width: 500px) { h2, section > h3 {font-size: 2em;} header button {font-size:1em;} }
@media only screen and (max-width: 400px) {
    body, html {font-size:1.1em;}
    h2, section > h3 {font-size: 1.75em;}
    ul.itens img, ul.itens.maior img {height: 150px;}
    .whats::before {scale:32%;top:-192%;}
    footer section {width:90%;}
}