@charset "UTF-8";
/*configurações*/
html{height:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; scroll-behavior: smooth;}
*, *::before, *::after {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
h1, h2, h3, h4, h5, h6{line-height:1.2em; font-weight:500;}
* h1:first-child, * h2:first-child, * h3:first-child, * h4:first-child, * h5:first-child, * h6:first-child, * p:first-child{margin-top:0; padding-top:0;}
* h1:last-child, * h2:last-child, * h3:last-child, * h4:last-child, * h5:last-child, * h6:last-child, * p:last-child{margin-bottom:0; padding-bottom:0;}
h1{font-size:52px;}
h2{font-size:36px;}
h3{font-size:32px;}
h4{font-size:24px;}
h5{font-size:22px;}
h6{font-size:20px;}
p{font-size:18px; line-height:1.5em;}
ul:not(.reset-list) li {font-size:18px; line-height:1.2em;}
ul:not(.reset-list) li + li{margin-top: 1em;}
.chamada{font-size:22px;}
.legenda{font-size:14px;}
a{text-decoration:none; cursor:pointer;}
a img{border:none; max-width:100%;}
img{border:none; height:auto; display:block; margin:auto;}
strong{font-weight:500;}

/* id */
#body {font-size:62.5%; margin:0; padding:0; width:100%; height:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; font-family: "Google Sans Flex", sans-serif; font-optical-sizing: auto; font-weight: 400; color:#FFFFFF; min-width:360px;}
#container {margin:0; padding-right:0; padding-bottom: 240px; padding-left:0; height:100%; min-height:100%; height:auto !important; position:relative; overflow-x:hidden; min-width:360px; background-color: #0D181C;}

#termsfeed-com---nb{display:block; margin:5% auto 0 auto; max-width:800px; border:solid 1px #C6A256; padding: 0;}
#termsfeed-com---nb .cc-nb-main-container{padding: 2em 3em;}
#termsfeed-com---nb .cc-nb-title {color: #C6A256; font-size: 30px; margin-top: 0;}
#termsfeed-com---nb .cc-nb-okagree{background-color:#C6A256; color:#FFFFFF;}
#termsfeed-com---nb *:focus{outline: 3px solid #B8C0C6;}

#whatsapp{position:fixed; right:4.4%; bottom:30px; display:block; z-index:1000; transition: bottom 1s; border: solid 1px #FFFFFF;}
#whatsapp.hover{bottom: 90px;}
#whatsapp .pict{width: 80px; height: 80px;}

header {padding:0; position:fixed; z-index:20; left:0; top:0; font-size:0; width:100%; background-color: rgba(13,24,28,0); text-align:right; transition: background-color 1s; min-width:360px;}

header .bg-black:not(.button){padding:0 4.4%; line-height:30px; height:30px; position:relative; border-bottom: solid 1px #C6A256;}
header .bg-black:not(.button) a{display: inline-block;}
header .bg-black:not(.button) a:first-child{float: left;}
header .bg-black:not(.button) a + a {margin-left: 20px;}

header .dr-nicholas{width: 283px; margin: 30px 0 20px 4.4%; float: left; transition:width 1s, margin 1s;}
header .button{font-size: 16px; margin: 35px 4.4% 25px 0; border: solid 1px #C6A256; transition: background-color 1s, border 1s, margin 1s; }

header.hover{background-color:rgba(13,24,28,.9);}
header.hover .dr-nicholas{width:240px; margin:15px 0 15px 4.4%;}
header.hover .button{margin: 15px 4.4% 15px 0; border: solid 1px #FFFFFF;}

header.hover nav{margin:15px 0;}

nav{display:inline-block; vertical-align:middle; margin:35px 0 25px 0; transition:margin 1s;}
nav ul {white-space:nowrap;}
nav li{display:inline-block; position:relative; vertical-align:text-top; margin-right: 40px;}
nav li a{display:block; font-size:16px; line-height:20px; padding: 20px 0; font-weight:500; transition:color 1s;}
nav li a:hover{color:#8A959C;}

section.banner {display: block; width: 100%; height: 100vh; min-width:360px; min-height: 600px; z-index: 0;}
section.banner::before {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../img/svg/bg-nicholas.svg"); opacity: .05;}
section.banner .banner-content{padding: 0 4.4%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
section.banner .banner-content:not(:first-child){display: none;}
section.banner .content{height: 100%; display: flex; flex-direction: column; justify-content: center;}
section.banner .content::before{content: ""; position: absolute; top: 100px; bottom: 140px; background-repeat: no-repeat; background-position: center bottom; background-size: contain;}
.no-webp section.banner .content::before, .no-js section.banner .content::before{background-image:url("../img/large/dr-nicholas-zucchetto.png");}
.webp section.banner .content::before{background-image:url("../img/large/dr-nicholas-zucchetto.webp");}

section.banner .banner-content.catarata .content{align-items: flex-end; align-content: flex-end;}
section.banner .banner-content.catarata .content::before{right: 50%; left: 0;}

section.banner .banner-content.refratometria .content{align-items: flex-start; align-content: flex-start;}
section.banner .banner-content.refratometria .content::before{right: 0; left: 50%;}

section.banner .banner-content.catarata-congenita .content{align-items: flex-end; align-content: flex-end;}
section.banner .banner-content.catarata-congenita .content::before{right: 50%; left: 0;}

section.banner h1{margin: 0; line-height: .8em;}
section.banner h2{margin: 0;  line-height: .8em; font-size:52px;}
section.banner p{font-size: 24px; line-height: 1.2em; margin: .7em 0 .9em 0;}
section.banner p:last-child{margin-bottom: 0;}

section.contatos{height: 140px; margin-top: -140px;}
section.contatos .content{padding: 20px 0 0 0; max-width: 100%;}
section.contatos .column{width: 47.8%; display: inline-block; vertical-align: middle;}
section.contatos .column:last-child{margin-left: 4.4%; text-align: right;}
section.contatos .column:last-child a{font-size: 24px; padding-right: 90px;}
section.contatos a{display: block; line-height: 1.2em;}
section.contatos a + a{margin-top: 5px;}
section.contatos a .pict+span{display: inline-block; vertical-align: middle;}
section.contatos a .local+span{vertical-align: top; padding-top:10px;}
section.contatos a .whatsapp{display: none;}

section.procedimentos .content::after{content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background-size: contain; background-image: url("../img/svg/bg-olho.svg"); background-repeat: no-repeat; background-position: center; opacity: .1;}
section.procedimentos h2 + .column-2{display: block; margin:0 auto; z-index: 10;}
section.procedimentos h2 + .column-2 .gray{font-size: 24px;}
section.procedimentos .column-2{vertical-align: top; z-index: 10; margin-top: 50px;}
section.procedimentos .column-2 strong{display: block; font-size: 1.4em; margin-bottom: .5em;}
section.procedimentos .column-2 strong + span{display: block; font-size: 1.2em; margin-bottom: .5em;}

section.exames{border-top: solid 1px #C6A256; border-bottom: solid 1px #C6A256;}
section.exames::before{content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-size: auto 100%; background-position: right center;}
.no-webp section.exames::before, .no-js section.exames::before{background-image:url("../img/large/bg-exames.jpg");}
.webp section.exames::before{background-image:url("../img/large/bg-exames.webp");}
section.exames .reset-list{column-count:2; column-gap: 25px;}
section.exames li{font-size: 18px; font-weight: 500; text-align: left; display: flex; min-height: 50px; align-items: center; break-inside: avoid-column; text-shadow: 1px 1px 0 #0D181C, -1px 1px 0 #0D181C, 1px -1px 0 #0D181C, -1px -1px 0 #0D181C;} /* evita corte do conteúdo */
section.exames li + li{margin-top: 1em;}
section.exames li .bg-gold{width: 40px; min-width: 40px; aspect-ratio:1/1; margin-right: .5em; vertical-align: middle; background-image: url("../img/svg/exames.svg"); background-size: 80%; background-position: center; background-repeat: no-repeat;}
section.exames li .bg-gold + span{display: inline-block; vertical-align: middle; line-height: 1.2em; white-space: normal;}

.no-webp section.agendamento, .no-js section.agendamento{background-image:url("../img/large/bg-agendamento.jpg");}
.webp section.agendamento{background-image:url("../img/large/bg-agendamento.webp");}
section.agendamento::before{content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #0D181C; mix-blend-mode: multiply; opacity: .9;}
section.agendamento .content{padding: 150px 0;}
section.agendamento .article{max-width: 910px;}
section.agendamento h3{margin-bottom: 50px; line-height: 1.2em;}
section.agendamento p + p{margin-top: 50px;}
section.agendamento li{flex: 1; display: inline-block; aspect-ratio: 2/1; vertical-align: middle; position:relative; width:21.7%; margin-right: 4.4%; background-position: center; background-size: cover;}
section.agendamento li:first-child{background-image: url("../img/svg/convenio-unimed.svg");}
section.agendamento li:nth-child(2){background-image: url("../img/svg/convenio-ipe-saude.svg");}
section.agendamento li:nth-child(3){background-image: url("../img/svg/convenio-ssi-saude.svg");}
section.agendamento li:last-child{background-image: url("../img/svg/convenio-ipam.svg");}
section.agendamento li:nth-child(4n), section.agendamento li:last-child{margin-right: 0;}

section.sobre{min-height: 800px; display: flex; align-items: center; align-content: center; border-top: solid 1px #C6A256; border-bottom: solid 1px #C6A256;}
section.sobre::before {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../img/svg/bg-nicholas.svg"); opacity: .05;}
section.sobre::after{content: ""; display: block; position: absolute; top: 10%; right: 0; bottom: 0; left: 50%; background-position: center bottom; background-repeat: no-repeat; background-size: contain;}
.no-webp section.sobre::after, .no-js section.sobre::after{background-image:url("../img/large/dr-nicholas-zucchetto.png");}
.webp section.sobre::after{background-image:url("../img/large/dr-nicholas-zucchetto.webp");}
section.sobre .column-2{margin-left: 10%;}
section.sobre .dr-nicholas{width: 396px; font-size: 0;}

section.instagram{padding: 0; min-height: 51px; z-index: 0}

section.estrutura{margin-top: -51px; background-color: #0D181C;}
section.estrutura .column-2{vertical-align: top;}

section.mapa{padding: 0; border-top: solid 1px #C6A256; border-bottom: solid 1px #C6A256;}
section.mapa::after{content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #C6A256; pointer-events: none; mix-blend-mode:hue;}
section.mapa iframe{display: block; width: 100%; aspect-ratio: 3/1; border: none;}

section.novidades .lista-novidades li{margin-bottom: 0;}

footer{position:absolute; z-index:1; bottom:0; right: 0; left:0; padding:0 4.4%; min-width:360px; height: 240px; border-top: solid 1px #C6A256;}
footer .content{padding: 50px 0 25px 0; max-width: 100%;}

footer .column-3 .dr-nicholas{width:240px; display: block; margin: 0 auto 15px auto;}
footer .column-3 .dr-nicholas + a + a {margin-left: 15px;}

footer .column-3:nth-child(2){text-align:left; float: left;}
footer .column-3:nth-child(2) .pict{margin-right:7px;}
footer .column-3:nth-child(2) .pict + span{display:inline-block;}
footer .column-3:nth-child(2) .pict.local + span{vertical-align: top;}
footer .column-3:nth-child(2) a.white{white-space: nowrap; display: block;}
footer .column-3:nth-child(2) a.white + a.white{margin-top: 20px;}

footer .column-3:last-child{text-align:right; float: right; margin-top: 45px; margin-right: 0;}
footer .column-3:last-child a{font-size: 24px; padding-right: 90px;}
footer .column-3:last-child a .pict{display: none;}

section.titulo .content{padding: 150px 0 0 0;}
section.titulo h1{line-height: 1em;}

section.principal .content{padding-top: 50px;}
section.principal .article.dinamico {display:block; margin:0 auto 50px auto;}
section.principal .article.dinamico::after {content:"."; display:block; clear:both; visibility:hidden; height:0; overflow:hidden;}
section.principal .article.dinamico h2 .gray{display:block; font-size:.6em; font-weight:300; line-height:1em;}
section.principal .article.dinamico h2 .gray + span{font-size: 1.2em; text-transform: uppercase;}
section.principal .article.dinamico h3, section.principal .article.dinamico h4 {font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; color:#C6A256; margin-bottom:.5em; text-transform: uppercase;}
section.principal .article.dinamico img{max-width:100%; display:block; margin:0 auto 50px auto; border:solid 1px #C6A256; padding: 10px;}
section.principal .article.dinamico img.vertical{width:48.7%; margin:0 0 50px 4.4%; float:right;}
section.principal .article.dinamico iframe{display:block; width:100%; margin:50px auto; overflow:hidden; aspect-ratio:16/9;}
section.principal .article.dinamico p:not(.text-center) a{text-decoration:none; font-weight:400; color:#C6A256;}

/*estruturais*/
section{position:relative; z-index:1; padding:0 4.4%; min-width:360px;}
section .content{padding:100px 0;}
.content {margin:auto; width:100%; max-width:1800px; position:relative; font-size:0;}
.article {width:65.2%; margin:auto; position:relative; display:inline-block;}
.column-2 {width:47.8%; margin:0 4.4% 0 0; position:relative; display:inline-block;}
.column-2:nth-child(2n), .column-2:last-child{margin-right:0;}
.column-3 {width:30.4%; margin:0 4.4% 0 0; position:relative; display:inline-block;}
.column-3:nth-child(3n), .column-3:last-child{margin-right:0;}
.column-4 {width:21.7%; margin:0 4.4% 0 0; position:relative; display:inline-block;}
.column-4:nth-child(4n), .column-4:last-child{margin-right:0;}

/*cores*/
.white{color:#FFFFFF;}
.black{color:#0D181C;}
.gold{color:#C6A256;}
.gray{color:#8A959C;}
.gray-l{color:#B8C0C6;}
.gray-lll{color:#F6F8F9;}

/*backgrounds*/
.bg-white{background-color:#FFFFFF;}
.bg-black{background-color:#0D181C;}
.bg-gold{background-color:#C6A256;}
.bg-gray{background-color:#8A959C;}
.bg-gray-lll{background-color:#F6F8F9;}
.bg-image{background-size: cover; background-repeat: no-repeat; background-position: center;}

/*comportamentos*/
.float-left{float:left;}
.float-right{float:right;}
.clear{clear:both;}
.clear-right{clear:right;}
.clear-left{clear:left;}
.reset-list{margin:0; padding:0; font-size:0; list-style:none;}
.text-justify{text-align:justify;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.circle{border-radius:50%;position:relative;}
.round{border-radius: 15px;}
.alpha{transition:opacity 1s; cursor:pointer;}
.alpha:hover{opacity:0.50;}

/*fontes */
.cormorant{font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 500; font-style: normal;}
.google{font-family: "Google Sans Flex", sans-serif; font-optical-sizing: auto; font-weight: 400;}
strong.cormorant{font-weight: 700;}

/*botões*/
.button{display:inline-block; vertical-align:middle; position:relative; overflow:hidden; padding: 0 .5em;}
.button.hover{opacity:0.25; cursor:default;}

.button .label{display:inline-block; vertical-align: middle;}
.button.extra .label{line-height:30px; padding:45px 1em; font-size:1.4em;}
.button.large .label{line-height:24px; padding:18px 1em; font-size:1.2em;}
.button.medium .label{line-height:20px; padding:10px 1em; font-size:1em;}
.button.small .label{line-height:16px; padding:7px 1em; font-size:.8em;}

.button .pict:not(.local) + .label{padding-left:.5em;}
.button .pict.local + .label{padding-left:.5em; vertical-align: top;}

.pict{display:inline-block; vertical-align:middle; background-image:url(../img/svg/pictogramas.svg); background-repeat:no-repeat; background-size:1100% auto;}
.pict.hover{opacity:0.25; cursor:default;}

.pict.extra{width:120px; height:120px; line-height:120px; font-size:1.4em;}
.pict.large{width:60px; height:60px; line-height:60px; font-size:1.2em;}
.pict.medium{width:40px; height:40px; line-height:40px; font-size:1em;}
.pict.small{width:30px; height:30px; line-height:30px; font-size:.8em;}
.pict.text{background-image:none; text-align:center;}
.pict.text strong{font-size:1.2em;}

.pict.whatsapp{background-position:0% 0%;}
.pict.fone{background-position:10% 0%;}
.pict.local{background-position:20% 0%;}
.pict.home{background-position:30% 0%;}
.pict.link{background-position:40% 0%;}
.pict.no-link{background-position:50% 0%;}
.pict.download{background-position:60% 0%;}
.pict.agendamento{background-position:70% 0%;}
.pict.instagram{background-position:80% 0%;}
.pict.youtube{background-position:90% 0%;}
.pict.facebook{background-position:100% 0%;}
.pict.mais{background-position:0% 100%;}
.pict.menos{background-position:10% 100%;}
.pict.fechar{background-position:20% 100%;}
.pict.igual{background-position:30% 100%;}
.pict.check{background-position:40% 100%;}
.pict.duvida{background-position:50% 100%;}
.pict.anterior{background-position:60% 100%;}
.pict.seguinte{background-position:70% 100%;}
.pict.topo{background-position:80% 100%;}
.pict.base{background-position:90% 100%;}

.procedimento{display: block; aspect-ratio:1/1; width: 150px; margin: 0 auto; background-repeat: no-repeat; background-size: 200% auto; background-image: url("../img/svg/procedimentos.svg");}
.procedimento.refratometria{background-position: 0 0;}
.procedimento.catarata{background-position: 100% 0;}
.procedimento.oftalmopediatria{background-position: 0 100%;}
.procedimento.blefaroplastia{background-position: 100% 100%;}

.lista-novidades{display: flex; flex-wrap: wrap; justify-content: center;}
.lista-novidades li{font-size: 18px; min-width:21.7%; width:21.7%; max-width:21.7%; margin:0 4.4% 50px 0; flex: 1; text-align: left; border: solid 1px #C6A256; padding: 1.2em 1.2em 4em 1.2em; position: relative;}
.lista-novidades li:nth-child(4n), .lista-novidades li:last-child{margin-right: 0;}
.lista-novidades li a{display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #0D181C; z-index: 10; opacity: 0; transition: opacity 1s;}
.lista-novidades li a:hover{opacity: 0.7;}
.lista-novidades li .cormorant{display: block; font-size: 1.5em; line-height: 1em; text-transform: uppercase; margin-bottom: .5em;}
.lista-novidades li .cormorant .google{font-size: .5em; line-height: 1.2em; display: inline-block;}
.lista-novidades li .cormorant + .gray{margin-bottom: .5em; display: inline-block;}
.lista-novidades li .button{position: absolute; bottom: 1.2em; left: 1.2em;}

.gallery {font-size: 0;}
.gallery a{display:inline-block; width:21.7%; margin:4.4% 4.4% 0 0; vertical-align:text-top; padding:10px; border:solid 1px #946D53; cursor: zoom-in;}
.gallery a:nth-child(4n), .gallery a:last-child{margin-right:0;}
.gallery a span{display:block; width:100%; aspect-ratio: 1/1;}

.dr-nicholas{display: inline-block; font-size: 0; aspect-ratio:4/1; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../img/svg/nicholas-zucchetto-excelencia-em-oftalmologia.svg");}

@media screen and (max-width:1400px) {
/*configurações*/
h1{font-size:40px;}
h2{font-size:32px;}
h3{font-size:28px;}
h4{font-size:22px;}
h5{font-size:20px;}
h6{font-size:18px;}
p{font-size:16px;}
ul:not(.reset-list) li {font-size:16px;}
.chamada{font-size:20px;}
.legenda{font-size:12px;}

/* id */
#container {padding-bottom: 220px;}

#whatsapp.hover{bottom: 80px;}

header .button{font-size: 14px; margin: 35px 4.4% 15px 0;}

nav li{margin-right: 15px;}
nav li a{font-size:15px;}

.no-webp section.banner .content::before, .no-js section.banner .content::before{background-image:url("../img/medium/dr-nicholas-zucchetto.png");}
.webp section.banner .content::before{background-image:url("../img/medium/dr-nicholas-zucchetto.webp");}
section.banner h2{font-size:40px;}
section.banner p{font-size: 20px;}

section.contatos .column-2:last-child a{font-size: 22px;}

section.procedimentos h2 + .column-2 .gray{font-size: 22px;}
section.procedimentos .column-2{margin-top: 40px;}

.no-webp section.exames::before, .no-js section.exames::before{background-image:url("../img/medium/bg-exames.jpg");}
.webp section.exames::before{background-image:url("../img/medium/bg-exames.webp");}
section.exames .reset-list{column-gap: 20px;}
section.exames li{font-size: 16px; min-height: 40px;} /* evita corte do conteúdo */
section.exames li .exame{width: 40px; min-width: 40px;}

.no-webp section.agendamento, .no-js section.agendamento{background-image:url("../img/medium/bg-agendamento.jpg");}
.webp section.agendamento{background-image:url("../img/medium/bg-agendamento.webp");}
section.agendamento .content{padding: 120px 0;}
section.agendamento h3{margin-bottom: 40px;}

section.sobre{min-height: 640px;}
.no-webp section.sobre::after, .no-js section.sobre::after{background-image:url("../img/medium/dr-nicholas-zucchetto.png");}
.webp section.sobre::after{background-image:url("../img/medium/dr-nicholas-zucchetto.webp");}
section.sobre .column-2{margin-left: 0;}

footer{height: 220px;}
footer .content{padding: 40px 0 20px 0;}

footer .column-3:last-child a{font-size: 22px;}

section.principal .content{padding-top: 40px;}
section.principal .article.dinamico {display:block; margin:0 auto 40px auto;}
section.principal .article.dinamico img{margin:0 auto 40px auto;}
section.principal .article.dinamico img.vertical{margin:0 0 40px 4.4%;}
section.principal .article.dinamico iframe{margin:40px auto;}

/*estruturais*/
section .content{padding:80px 0;}
.content {max-width:1400px;}

.lista-novidades li{font-size: 16px; margin:0 4.4% 40px 0;}

}
@media screen and (max-width:1000px) {
h1{font-size:36px;}
h2{font-size:28px;}
h3{font-size:24px;}
h4{font-size:20px;}
h5{font-size:18px;}
h6{font-size:16px;}
p{font-size:14px;}
ul:not(.reset-list) li {font-size:14px;}
.chamada{font-size:18px;}
.legenda{font-size:10px;}

#body.static, #container.static{overflow: hidden;}
#container {padding-bottom: 450px;}

#whatsapp{right:30px; bottom:25px; }
#whatsapp.hover{bottom: 25px;}
#whatsapp .pict{width: 70px; height: 70px;}

/* id */
header .bg-black:not(.button){padding:0 30px;}
header .bg-black:not(.button) a{padding: 0 5px;}
header .bg-black:not(.button) a + a{margin-left: 5px;}

header .dr-nicholas, header.hover .dr-nicholas{width: 220px; margin: 20px 0 15px 30px;}
header .button, header.hover .button{margin: 25px 20px 15px 0;}

header.hover .button:hover{background-color: initial;}
header.hover nav{margin:0;}

header .panel-button{display: inline-block; vertical-align: middle; width: 55px; height: 55px; border-radius: 50%; margin: 10px 30px 0 0; z-index: 0; position: relative;}
header .panel-button span{display:block; position:absolute; height:3px; top: 26px; width:25px; left: 15px; background-color:#FFFFFF;}
header .panel-button span::before{content: ""; display: block; position: absolute; width: 25px; height: 3px; left: 0; background-color: #FFFFFF; top: 8px;}
header .panel-button span::after{content: ""; display: block; position: absolute; width: 25px; height: 3px; left: 0; background-color: #FFFFFF; bottom: 8px;}

header.panel-button-active .panel-button span{background-color: transparent;}
header.panel-button-active .panel-button span::before{transform:rotate(-45deg); top:0;}
header.panel-button-active .panel-button span::after{transform:rotate(45deg); bottom:0;}

header.panel-button-active nav {width: 100%;}

nav{width: 0; position: fixed; display: flex; flex-direction: column; justify-content: center; align-items: center; top:120px; right: 0; bottom: 0; left: auto; text-align: center; z-index: 5; border-bottom: none; margin: 0; padding: 30px 0; background-color:rgba(13, 24, 28,.9); transition: width 1s; overflow: hidden;}

nav ul{display: block;}
nav li{display:block; width: 300px; margin: 0 auto; border: solid 1px #C6A256; white-space: nowrap; overflow: hidden;}
nav li + li{margin-top: 25px;}
nav li a, nav li a.white:hover{font-size: 16px; padding: 10px; transition: none; color: #FFFFFF;}
nav li a.hover, nav li a.gold:hover{color: #C6A256;}
/*nav ul li .scroll-nav.black{font-size: 16px; line-height: 20px; padding: 10px; transition: none; background-color: #C6A256; }
nav ul li .scroll-nav.gold{font-size: 16px; line-height: 20px; padding: 10px; transition: none; background-color: #0D181C; color: #FFFFFF;}*/

section.banner .banner-content{padding: 0 30px;}
section.banner .content::before{bottom: 120px; background-position: bottom left 40%; background-size: auto 100%;}
.no-webp section.banner .content::before, .no-js section.banner .content::before{background-image:url("../img/small/dr-nicholas-zucchetto.png");}
.webp section.banner .content::before{background-image:url("../img/small/dr-nicholas-zucchetto.webp");}

section.banner .banner-content.catarata .content{align-items: center; align-content: center;}
section.banner .banner-content.catarata .content::before{right: 0;}

section.banner .banner-content.refratometria .content{align-items: center; align-content: center;}
section.banner .banner-content.refratometria .content::before{left: 0;}

section.banner .banner-content.catarata-congenita .content{align-items: center; align-content: center;}
section.banner .banner-content.catarata-congenita .content::before{right: 0;}

section.banner .column-2 {text-align: center; margin-top: 40%; padding: 20px 0; z-index: 10;}
section.banner .column-2::before{content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -230px; width: 460px; background-color:rgba(13, 24, 28,.8); z-index: -1;}
section.banner h1, section.banner h2{font-size:32px;}
section.banner p{font-size: 18px; color: #FFFFFF;}
    
section.contatos{height: 125px; margin-top: -125px;}
section.contatos .column{width: 50.6%;}
section.contatos .column:last-child{margin-left: 4.4%; width: 45%;}
section.contatos .column:last-child a{font-size: 20px; padding-right: 80px;}
section.contatos a .local+span{padding-top:7px;}
    
section.procedimentos h2 + .column-2 .gray{font-size: 20px;}
section.procedimentos .column-2{margin-top: 30px;}

section.exames::before{right: 0; margin-right: 0; opacity: .2; background-size: cover;}
.no-webp section.exames::before, .no-js section.exames::before{background-image:url("../img/small/bg-exames.jpg");}
.webp section.exames::before{background-image:url("../img/small/bg-exames.webp");}
section.exames .content{text-align: center;}
section.exames .column-2{text-align: center;}
section.exames .reset-list{column-count: 2; column-gap: 30px; margin-top: 30px;}

.no-webp section.agendamento, .no-js section.agendamento{background-image:url("../img/small/bg-agendamento.jpg");}
.webp section.agendamento{background-image:url("../img/small/bg-agendamento.webp");}
section.agendamento .content{padding: 90px 0;}
section.agendamento h3{margin-bottom: 30px;}

section.sobre{min-height: auto; display: block; align-items: inherit; align-content: inherit;}
section.sobre::after{top: 10%; right: 0; bottom: 0; left: 50%;}
.no-webp section.sobre::after, .no-js section.sobre::after{background-image:url("../img/small/dr-nicholas-zucchetto.png");}
.webp section.sobre::after{background-image:url("../img/small/dr-nicholas-zucchetto.webp");}
section.sobre .dr-nicholas{width: 300px;}
section.sobre p:nth-child(4){padding-right: 45%;}
section.sobre p:nth-child(5){padding-right: 50%;}

section.estrutura .column-2 + .column-2{margin-top: 30px;}

section.mapa iframe{aspect-ratio: 3/2;}

section.novidades .lista-novidades li:nth-child(3), section.novidades .lista-novidades li:nth-child(4){margin-top: 30px;}

footer{padding:0 30px; height: 450px;}
footer .content{padding: 30px 0 15px 0;}
    
footer .column-3:nth-child(2){text-align:center; float: none; margin-top: 25px;}
footer .column-3:nth-child(2) .pict{display: block; margin-right:auto; margin-left: auto;}
footer .column-3:nth-child(2) .pict + span{display:block;}

footer .column-3:last-child{text-align:center; float: none; margin-top: 25px; margin-right: 0;}
footer .column-3:last-child a{font-size: 16px; padding-right: 0;}
footer .column-3:last-child a .pict{display: block; margin-right:auto; margin-left: auto;}

section.principal .content{padding-top: 30px;}
section.principal .article.dinamico {display:block; margin:0 auto 30px auto;}
section.principal .article.dinamico img{margin:0 auto 30px auto;}
section.principal .article.dinamico img.vertical{margin:0 0 30px 4.4%;}
section.principal .article.dinamico iframe{margin:30px auto;}

/*estruturais*/
section{padding:0 30px;}
section .content{padding:60px 0;}
.content {max-width:700px;}
.article, .column-2, .column-3 {width:100%; margin:0; display:block;}

.alpha{transition:none;}
.alpha:hover{opacity:1;}

.button.extra .label{line-height:24px; padding:28px .5em; font-size:1.4em;}
.button.large .label{line-height:20px; padding:10px .5em; font-size:1em;}
.button.medium .label{line-height:16px; padding:7px .5em; font-size:.8em;}
.button.small .label{line-height:12px; padding:4px .5em; font-size:.6em;}

.pict.extra{width:80px; height:80px; line-height:80px; font-size:1.2em;}
.pict.large{width:40px; height:40px; line-height:40px; font-size:1em;}
.pict.medium{width:30px; height:30px; line-height:30px; font-size:.8em;}
.pict.small{width:20px; height:20px; line-height:20px; font-size:.6em;}

.procedimento{width: 120px;}

.lista-novidades li{font-size: 14px; width: 47.8%; min-width: 47.8%; max-width: 47.8%;  margin:0 4.4% 30px 0;}
.lista-novidades li:nth-child(2n), .lista-novidades li:last-child{margin-right: 0;}
.lista-novidades li a, .lista-novidades li a:hover{opacity: 0; transition: none;}

.gallery a{width:30.4%; padding:9px;}
.gallery a:nth-child(4n){margin-right:4.4%;}
.gallery a:nth-child(3n), .gallery a:last-child{margin-right:0;}

}
@media screen and (max-width:600px) {
h1{font-size:28px;}
h2{font-size:24px;}
h3{font-size:22px;}
h4{font-size:20px;}
h5{font-size:18px;}
h6{font-size:16px;}

/* id */
#whatsapp{right:25px;}
#whatsapp .pict{width: 60px; height: 60px;}

header .bg-black:not(.button){padding:0 20px;}

header .dr-nicholas, header.hover .dr-nicholas{width: 210px; margin: 10px 0 10px 20px;}
header .button, header.hover .button{font-size: 0; padding: 0 5px; border-radius: 50%; margin: 10px 10px 0 0;}

header .panel-button{margin: 10px 20px 0 0;}

nav{top:102px;}

section.banner .banner-content{padding: 0;}
section.banner .content{max-width: 100%;}

section.banner .content::before{padding: 0; bottom: 0; background-position: bottom left 100%;}
.no-webp section.banner .content::before, .no-js section.banner .content::before{background-image:url("../img/tiny/dr-nicholas-zucchetto.png");}
.webp section.banner .content::before{background-image:url("../img/tiny/dr-nicholas-zucchetto.webp");}

section.banner .column-2 {padding: 20px; position: absolute; right: 0; bottom: 0; left: 0; text-align: left;}
section.banner .column-2::before{right: 0; left: 0; margin-left: 0; width: auto;}
section.banner h1, section.banner h2{font-size:26px;}
section.banner p{font-size: 16px; padding-right: 60px;}
section.banner p br{display: none;}

section.contatos{margin-top: 0; height: auto;}
section.contatos .content{padding: 20px 0;}
section.contatos .column{width: 100%;}
section.contatos .column:last-child{margin-left: 0; width: 100%; text-align: left;}
section.contatos .column:last-child a{font-size: 16px; padding-right: 0;}
section.contatos a .local+span{padding-top:4px;}
section.contatos a .pict.whatsapp{display: inline-block;}

section.exames::before{background-position: center;}
.no-webp section.exames::before, .no-js section.exames::before{background-image:url("../img/tiny/bg-exames.jpg");}
.webp section.exames::before{background-image:url("../img/tiny/bg-exames.webp");}
section.exames .reset-list{column-count: 1; column-gap: 0;}
section.exames li .exame{width: 30px;}

.no-webp section.agendamento, .no-js section.agendamento{background-image:url("../img/tiny/bg-agendamento.jpg");}
.webp section.agendamento{background-image:url("../img/tiny/bg-agendamento.webp");}

section.agendamento li{width:47.8%;}
section.agendamento li:nth-child(3), section.agendamento li:last-child{margin-top: 20px;}
section.agendamento li:nth-child(2n), section.agendamento li:last-child{margin-right: 0;}

section.sobre{padding-bottom:30px}
section.sobre::after{top: auto; right: auto; bottom: auto; left: auto; width: 250px; aspect-ratio: 1/1; border-radius: 50%; position: relative; margin: -30px auto 0 auto; border: solid 1px #FFFFFF; background-color: #EAEAEA; }
.no-webp section.sobre::after, .no-js section.sobre::after{background-image:url("../img/tiny/dr-nicholas-zucchetto.png");}
.webp section.sobre::after{background-image:url("../img/tiny/dr-nicholas-zucchetto.webp");}
section.sobre .dr-nicholas{width: 250px; display: block; margin: auto;}
section.sobre .column-2{text-align: center;}
section.sobre p:nth-child(4){padding-right: 0;}
section.sobre p:nth-child(5){padding-right: 0;}

section.estrutura .column-2{text-align: center;}

section.mapa iframe{aspect-ratio: 1/1;}

section.novidades .lista-novidades li:nth-child(2){margin-top: 30px;}

/*estruturais*/
.content {max-width:400px;}

.lista-novidades{display: block; flex-wrap: initial; justify-content: initial;}
.lista-novidades li{display: block; flex: initial; width: 100%; min-width: 100%; max-width: 100%;}
}