@charset "UTF-8"; 
/* Redefinir */
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:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child{margin-top:0;}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child{margin-bottom:0;}
h2{font-size: 36px; line-height: 1.1em; font-weight: 500;}
h2 span{font-weight: 300;}
h3{font-size: 32px; line-height: 1.1em; font-weight: 500;}
h4{font-size: 28px; line-height: 1.1em; font-weight: 500;}
p{font-size:20px; line-height:1.7em; font-weight: 300; letter-spacing: .01em;}
* p:first-child{margin-top:0;}
* p:last-child{margin-bottom:0;}
ul:not(.reset-list) li{font-size:20px; line-height:1.3em; font-weight: 300; letter-spacing: .01em;}
ul:not(.reset-list) li + li{margin-top: .8em;}
a{text-decoration:none;}
a img{border:none;max-width:100%;}
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: "Roboto", sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 300;}
#container {margin:0; padding:0 0 500px 0; height:100%; min-height:100%; height:auto !important; position:relative; background:#FFFFFF; overflow-x:hidden;}
#container::before{content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-image: url("../svg/background.svg"); background-position: center top; background-size: 80% auto; background-repeat: no-repeat;}

header {position:fixed; left:0; top:0; z-index:100; width:100%; padding:60px 3.2% 20px 3.2%; transition:background 1s; background: rgba(255,255,255,0);}
header .content{max-width:100%; width:100%; padding:0; z-index: 10;}
header .bg-green-l{position: absolute; top: 0; right: 0; left: 0; padding: 0 3.2%; z-index: 20;}
header .bg-green-l .alpha{font-size: 12px; display: inline-block;}
header .bg-green-l .alpha + .alpha{margin-left: 30px;}
header .bg-green-l .alpha:nth-last-child(-n+2){float: right;}
header .bg-green-l .pict + span{display: inline-block; vertical-align: middle; line-height: 1.1em;}
header .logo{display:block; width:400px; padding-bottom:60px; margin-top: -200px; float: left; background-image: url("../svg/bbg-oftalmo-header.svg"); background-repeat:no-repeat; background-position:center; background-size: contain; transition: margin 1s; font-size: 0; position: relative;  z-index: 10;}

header.hover, header.panel-button-active{background: rgba(255,255,255,0.9);}
header.hover .logo, header.panel-button-active .logo{margin-top: 0;}

header .panel-button{display: block; position: relative; width: 60px; height: 60px; background-color: #005264; margin: 0 0 0 auto;  z-index: 10;}
header .panel-button span{display:block; position:absolute; height:4px; top: 27px; width:30px; left: 15px; background-color:#FFFFFF;}
header .panel-button span::before, header .panel-button span::after{content: ""; position: absolute; display: block; height: 4px; width: 30px; background-color:#FFFFFF;}
header .panel-button span::before{top: -9px;}
header .panel-button span::after{bottom: -9px;}

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); top:0;}

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

header nav{width: 0; margin: 0; position: fixed; display: block; top:0; right: 0; bottom: 0; text-align: center; z-index: 5; border-bottom: none; padding: 0; background-color: rgba(179,194,175,.8); transition: width 1s;}
nav .reset-list {display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; overflow-y: auto; background-color: transparent;}
nav li{display:block; width: 100%; max-width: 300px; border-radius: 33px; margin: 0 auto 30px auto; white-space: nowrap; overflow: hidden; border: solid 1px #005264; padding: 2px;}
nav li:last-child{margin-bottom: 0;}
nav li a {font-size:16px; height:60px; line-height:60px; border-radius: 30px; transition:none 1s; background-color: #005264; color: #FFFFFF; min-width: 294px; display: block; letter-spacing: .1em}

section.banner{height: 70vh;}
section.banner .content{width:100%; min-width: 100%; height:100%; min-height:100%; padding: 0 3.2%; display: flex; align-items: center;}
section.banner h1{margin: 0; padding: 0; font-size: 0; background-image: url("../svg/bbg-oftalmo.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; height: 300px; width: 100%;}

section.sobre::before{content: ""; position: absolute; top: -3px; right: 0; left: 0; border-top: solid 1px #B3C2AF;}
section.sobre::after{content: ""; position: absolute; bottom: -3px; right: 0; left: 0; border-top: solid 1px #B3C2AF;}
section.sobre .column-4:last-child{vertical-align: bottom; padding-bottom: 7%; background-image: url("../svg/bbg.svg"); background-position: center; background-repeat: no-repeat; background-size: contain;}

section.equipe ul{display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; margin-top: 50px;}
section.equipe li{font-size: 22px; flex: 1; width:33%; min-width:33%; max-width:33%; padding:25px 25px 50px 25px; font-weight: 300; position: relative;}
section.equipe li strong{display: block; margin-bottom: .25em; font-size: 1.4em;}
section.equipe li .green-l{display: block; font-size: .8em; line-height: 1.4em; margin-bottom: .25em;}
section.equipe li .pict{position: absolute; bottom: 0; left: 50%; margin-left: -20px;}

section.equipe .layer {position:fixed; left:0; top:0; right:0; bottom:0; z-index:90;  background-color: rgba(179,194,175,.8); display:none; padding: 190px 0 0 0;}
section.equipe .layer .content{display:none; padding: 0;}
section.equipe .layer .article{display:block; margin:auto; background-color:#FFFFFF; padding:50px; border:solid 1px #005264; overflow-y:auto; border-radius: 50px;}
section.equipe .layer a.fechar{display: block; position: absolute; right:17.3%; z-index: 100; margin: 20px 20px 0 0;}

section.cirurgias .article{display: block; margin: 0 auto;}

section.exames .article{display: block; margin: 0 auto 50px auto;}
section.exames ul{column-count:3; column-gap: 3.2%;}

footer{padding: 0 3.2%; position:absolute; right: 0; bottom:0; left:0; z-index: 10;}
footer::before{content: ""; position: absolute; top: -3px; right: 0; left: 0; border-top: solid 1px #B3C2AF;}
footer .content{height: 500px; padding: 100px 0 0 0;}

footer .article{position: absolute; left: 50%; margin-left: -32.8%; bottom: 0; padding: 20px 0;}
footer .article p{line-height: 1.2em;}

footer .column-2{margin-right: 0;}

footer .column-4{white-space: nowrap;}
footer .column-4 .white{display: inline-block; position: relative;}
footer .column-4 br + .white{margin-top: 20px;}
footer .column-4 .pict + span{display:inline-block; vertical-align: middle;}

footer .column-4:nth-child(3){text-align:left; float: left;}
footer .column-4:nth-child(3) .pict{margin-right:7px;}

footer .column-4:nth-child(2){text-align:right; float: right; margin-right: 0;}
footer .column-4:nth-child(2) .white:not(.pict){line-height: 40px; padding-right: 57px;}
footer .column-4:nth-child(2) .pict{position: absolute; right: 0;}

footer .logo{display:block; width: 300px; max-width: 100%; padding-bottom:120px; margin: 0 auto 50px auto; background-image: url("../svg/bbg-oftalmo-footer.svg"); background-repeat:no-repeat; background-position:center; background-size: contain;}

/*estruturais*/
section{position: relative; padding: 0 3.2%;}
.content {position:relative; margin:0 auto; padding:100px 0; max-width:1800px; font-size: 0;}
.article {width:65.6%; margin:auto; position:relative; display:inline-block;}
.column-2 {width:48.4%; margin-right:3.2%; position:relative; display:inline-block; vertical-align:text-top;}
.column-2:nth-child(2n), .column-2:last-child{margin-right:0;}
.column-3 {width:31.2%; margin-right:3.2%; position:relative; display:inline-block; vertical-align:text-top;}
.column-3:nth-child(3n), .column-3:last-child, .column-3.float-right{margin-right:0;}
.column-4 {width:22.6%; margin-right:3.2%; position:relative; display:inline-block; vertical-align:text-top;}
.column-4:nth-child(4n), .column-4:last-child{margin-right:0;}

/*fontes*/
.ubuntu {font-family: "Ubuntu", sans-serif;}
.oswald {font-family: "Oswald", sans-serif; font-optical-sizing: auto; font-style: normal;}

/*cores*/
.white{color:#FFFFFF;}
.green{color:#005264;}
.green-l{color:#B3C2AF;}
.bg-white{background-color:#FFFFFF;}
.bg-green{background-color:#005264;}
.bg-green-l{background-color:#B3C2AF;}
.bg-green-ll{background-color:#D8DFD7;}
.bg-image{background-position:center; background-repeat:no-repeat; background-size:cover;}

/*gerais*/
.float-left{float:left;}
.float-right{float:right;}
.clear{clear:both;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-justify{text-align:justify;}
.reset-list{margin: 0; padding: 0; font-size: 0; list-style: none;}
.chamada{font-size:24px;}
.legenda{font-size:16px;}
.circle{border-radius:50%;}
.alpha{transition:opacity 1s;}
.alpha.hover{opacity:0.25;}
a.alpha:hover{opacity:0.50;}
.ancora{display:block;position:absolute; width:10px; height:10px; top:-140px; z-index: -10;}

.button{display:inline-block; position:relative; border-radius:50px; overflow:hidden;}
.button .label{display: inline-block; vertical-align: middle;}
.button.large .label{font-size: 1.4em; line-height: 40px; padding: 30px 1em;}
.button.medium .label{font-size: 1.2em; line-height: 30px; padding: 15px 1em;}
.button.small .label{font-size: 1em;  line-height: 20px; padding: 10px 1em;}
.button.tiny .label{font-size: .8em; line-height: 10px; padding: 10px 1em;}

.button.large .pict + .label{padding: 30px .75em 30px .25em;}
.button.medium .pict + .label{padding: 15px .75em 15px .25em;}
.button.small .pict + .label{padding: 10px .75em 10px .25em;}
.button.tiny .pict + .label{padding: 10px .75em 10px .25em;}

.pict{display:inline-block; vertical-align: middle; background-image: url("../svg/pictogramas-ok.svg"); background-repeat:no-repeat; background-size:1100% auto;}
.pict.large{width:100px; height:100px;}
.pict.medium{width:60px; height:60px;}
.pict.small{width:40px; height:40px;}
.pict.tiny{width:30px; height:30px;}

.pict + .info{display:inline-block; vertical-align: middle; line-height:1.2em; margin-left: 10px;}

.pict.green.whats{background-position: 0% 0%;}
.pict.green.phone{background-position: 10% 0%;}
.pict.green.home{background-position: 20% 0%;}
.pict.green.location{background-position: 30% 0%;}
.pict.green.youtube{background-position: 40% 0%;}
.pict.green.linkedin{background-position: 50% 0%;}
.pict.green.instagram{background-position: 60% 0%;}
.pict.green.facebook{background-position: 70% 0%;}
.pict.green.date{background-position: 80% 0%;}
.pict.green.scheduling{background-position: 90% 0%;}
.pict.green.time{background-position: 100% 0%;}
.pict.green.parking{background-position: 0% 10%;}
.pict.green.academy{background-position: 10% 10%;}
.pict.green.lunch{background-position: 20% 10%;}
.pict.green.auditorium{background-position: 30% 10%;}
.pict.green.download{background-position: 40% 10%;}
.pict.green.link{background-position: 50% 10%;}
.pict.green.imc{background-position: 60% 10%;}
.pict.green.blog{background-position: 70% 10%;}
.pict.green.ebooks{background-position: 80% 10%;}
.pict.green.meeting{background-position: 90% 10%;}
.pict.green.structure{background-position: 100% 10%;}
.pict.green.more{background-position: 0% 20%;}
.pict.green.less{background-position: 10% 20%;}
.pict.green.close{background-position: 20% 20%;}
.pict.green.next{background-position: 30% 20%;}
.pict.green.prev{background-position: 40% 20%;}
.pict.green.top{background-position: 50% 20%;}
.pict.green.bottom{background-position: 60% 20%;}
.pict.green.email{background-position: 70% 20%;}

.pict.green-l.whats{background-position: 0% 30%;}
.pict.green-l.phone{background-position: 10% 30%;}
.pict.green-l.home{background-position: 20% 30%;}
.pict.green-l.location{background-position: 30% 30%;}
.pict.green-l.youtube{background-position: 40% 30%;}
.pict.green-l.linkedin{background-position: 50% 30%;}
.pict.green-l.instagram{background-position: 60% 30%;}
.pict.green-l.facebook{background-position: 70% 30%;}
.pict.green-l.date{background-position: 80% 30%;}
.pict.green-l.scheduling{background-position: 90% 30%;}
.pict.green-l.time{background-position: 100% 30%;}
.pict.green-l.parking{background-position: 0% 40%;}
.pict.green-l.academy{background-position: 10% 40%;}
.pict.green-l.lunch{background-position: 20% 40%;}
.pict.green-l.auditorium{background-position: 30% 40%;}
.pict.green-l.download{background-position: 40% 40%;}
.pict.green-l.link{background-position: 50% 40%;}
.pict.green-l.imc{background-position: 60% 40%;}
.pict.green-l.blog{background-position: 70% 40%;}
.pict.green-l.ebooks{background-position: 40% 40%;}
.pict.green-l.meeting{background-position: 90% 40%;}
.pict.green-l.structure{background-position: 100% 40%;}
.pict.green-l.more{background-position: 0% 50%;}
.pict.green-l.less{background-position: 10% 50%;}
.pict.green-l.close{background-position: 20% 50%;}
.pict.green-l.next{background-position: 30% 50%;}
.pict.green-l.prev{background-position: 40% 50%;}
.pict.green-l.top{background-position: 50% 50%;}
.pict.green-l.bottom{background-position: 60% 50%;}
.pict.green-l.email{background-position: 70% 50%;}

.pict.white.whats{background-position: 0% 60%;}
.pict.white.phone{background-position: 10% 60%;}
.pict.white.home{background-position: 20% 60%;}
.pict.white.location{background-position: 30% 60%;}
.pict.white.youtube{background-position: 40% 60%;}
.pict.white.linkedin{background-position: 50% 60%;}
.pict.white.instagram{background-position: 60% 60%;}
.pict.white.facebook{background-position: 70% 60%;}
.pict.white.date{background-position: 80% 60%;}
.pict.white.scheduling{background-position: 90% 60%;}
.pict.white.time{background-position: 100% 60%;}
.pict.white.parking{background-position: 0% 70%;}
.pict.white.academy{background-position: 10% 70%;}
.pict.white.lunch{background-position: 20% 70%;}
.pict.white.auditorium{background-position: 30% 70%;}
.pict.white.download{background-position: 40% 70%;}
.pict.white.link{background-position: 50% 70%;}
.pict.white.imc{background-position: 60% 70%;}
.pict.white.blog{background-position: 70% 70%;}
.pict.white.ebooks{background-position: 80% 70%;}
.pict.white.meeting{background-position: 90% 70%;}
.pict.white.structure{background-position: 100% 70%;}
.pict.white.more{background-position: 0% 80%;}
.pict.white.less{background-position: 10% 80%;}
.pict.white.close{background-position: 20% 80%;}
.pict.white.next{background-position: 30% 80%;}
.pict.white.prev{background-position: 40% 80%;}
.pict.white.top{background-position: 50% 80%;}
.pict.white.bottom{background-position: 60% 80%;}
.pict.white.email{background-position: 70% 80%;}

@media screen and (max-width:1400px) {
h2{font-size: 32px;}
h3{font-size: 28px;}
h4{font-size: 24px;}
p{font-size:18px;}
ul:not(.reset-list) li{font-size:18px;}

/* id */
#container {padding:0 0 460px 0;}

header {padding:50px 3.2% 10px 3.2%;}
header .bg-green-l .alpha + .alpha{margin-left: 20px;}

nav li{margin: 0 auto 20px auto;}

section.banner h1{height: 230px;}

section.equipe ul{margin-top: 40px;}
section.equipe li{font-size: 20px;}

section.equipe .layer {padding: 160px 0 0 0;}
section.equipe .layer .article{padding:40px; border-radius: 40px;}

section.exames .article{margin: 0 auto 40px auto;}

footer .content{height: 460px; padding: 80px 0 0 0;}

footer .article{padding: 16px 0;}

footer .logo{margin: 0 auto 40px auto;}

/*estruturais*/
.content {padding:80px 0;}

/*gerais*/
.chamada{font-size:22px;}
.legenda{font-size:14px;}

/*gerais*/
.ancora{top:-120px;}
}

@media screen and (max-width:1000px) {
h2{font-size: 28px;}
h3{font-size: 24px;}
h4{font-size: 20px;}
p{font-size:16px;}
ul:not(.reset-list){padding-left: 25px;}
ul:not(.reset-list) li{font-size:16px;}

/* id */
#container {padding:0 0 500px 0;}

header {padding:40px 30px 10px 30px;}
header .bg-green-l{padding: 0 30px;}
header .bg-green-l .alpha{font-size: 10px;}
header .bg-green-l .alpha:first-child .pict + span{font-size: 0;}
header .bg-green-l .alpha + .alpha{margin-left: 10px;}
header .logo{width:360px; padding-bottom:50px;}

header .panel-button{width: 50px; height: 50px;}
header .panel-button span{height:2px; top: 24px; width:24px; left: 13px;}
header .panel-button span::before, header .panel-button span::after{height: 2px; width: 24px;}
header .panel-button span::before{top: -7px;}
header .panel-button span::after{bottom: -7px;}

nav li{border-radius: 28px; margin: 0 auto 15px auto;}
nav li a {height:50px; line-height:50px; border-radius: 25px;}

section.banner{height: 70vh;}
section.banner .content{padding: 0 30px;}
section.banner h1{height: 160px;}

section.sobre .column-4:first-child{text-align: center; margin-bottom: 30px;}
section.sobre .column-4:last-child{padding-bottom: 60px; margin-top: 30px;}

section.equipe ul{display: block; align-items: initial; justify-content: initial; flex-wrap: initial; margin-top: 30px;}
section.equipe li{font-size: 18px; flex: initial; width:100%; min-width:100%; max-width:100%; padding:15px 15px 40px 15px;}
section.equipe li + li{margin-top: 30px;}
section.equipe li .pict{margin-left: -15px;}

section.equipe .layer {padding: 130px 30px 0 30px;}
section.equipe .layer .article{padding:30px; border-radius: 30px;}
section.equipe .layer a.fechar{right:0; margin: 10px 10px 0 0;}

section.exames .article{margin: 0 auto 30px auto;}
section.exames ul{column-count:2;}

footer{padding: 0 30px;}
footer .content{height: 500px; padding: 60px 0 0 0;}

footer .article{position: absolute; left: 0; margin-left: 0; padding: 12px 0;}

footer .column-4{width: 50%; margin-top: 30px;}
footer .column-4:nth-child(2) .white:not(.pict){line-height: 30px; padding-right: 47px;}

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

/*gerais*/
.chamada{font-size:20px;}
.legenda{font-size:12px;}
.alpha{transition:none;}
a.alpha:hover{opacity:1;}
.ancora{top:-100px;}

.button{border-radius:30px;}
.button.large .label{font-size: 1.2em; line-height: 30px; padding: 15px 1em;}
.button.medium .label{font-size: 1em;  line-height: 20px; padding: 10px 1em;}
.button.small .label{font-size: .8em; line-height: 10px; padding: 10px 1em;}
.button.tiny .label{font-size: .6em; line-height: 10px; padding: 5px 1em;}

.button.large .pict + .label{padding: 15px .75em 15px .25em;}
.button.medium .pict + .label{padding: 10px .75em 10px .25em;}
.button.small .pict + .label{padding: 10px .75em 10px .25em;}
.button.tiny .pict + .label{padding: 10px .75em 10px .25em;}

.pict.large{width:60px; height:60px;}
.pict.medium{width:40px; height:40px;}
.pict.small{width:30px; height:30px;}
.pict.tiny{width:20px; height:20px;}

.pict + .info{margin-left: 5px;}
}
@media screen and (max-width:600px) {
h2{font-size: 24px;}
h3{font-size: 22px;}
h4{font-size: 18px;}
p{font-size:14px;}
ul:not(.reset-list) li{font-size:14px;}

#container {padding:0 0 640px 0;}
#container::before{background-size: contain;}

header {padding:40px 15px 10px 15px;}
header .bg-green-l{padding: 0 15px;}
header .bg-green-l .alpha{font-size: 10px;}
header .bg-green-l .alpha:first-child .pict + span{font-size: 0;}
header .bg-green-l .alpha + .alpha{margin-left: 5px;}
header .logo{max-width:360px; width: 80%;}

nav li{max-width: 280px; border-radius: 26px; margin: 0 auto 15px auto;}
nav li a {height:40px; line-height:40px; border-radius: 20px; min-width: 274px;}

section.equipe li{font-size: 16px;}

section.equipe .layer .article{padding:20px;}

section.exames ul{column-count:initial;}

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

footer .article{position: absolute; left: 0; margin-left: 0; padding: 12px 0;}

footer .column-4{width: 100%; margin-top: 22px; white-space: normal; display: block;}
footer .column-4 p{margin: 0;}
footer .column-4 .white{line-height: 2em; display: block; padding-right: 0;}
footer .column-4 br + .white{margin-top: 0;}
footer .column-4 .pict{display: block; margin: 0 auto;}
footer .column-4 .pict + span{display:block;}

footer .column-4:nth-child(3){text-align:center; float: none;}
footer .column-4:nth-child(3) .pict{margin-right:auto;}

footer .column-4:nth-child(2){text-align:center; float: none; margin-right: 0;}
footer .column-4:nth-child(2) .white:not(.pict){line-height: 1em; padding-right: 0!important;}
footer .column-4:nth-child(2) .pict{position: relative; right: auto;}
    
footer .column-4:nth-child(2) .white:not(.pict){line-height: 2em; padding-right: 47px;}

footer .logo{padding-bottom:80px;}

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

/*gerais*/
.chamada{font-size:18px;}
.legenda{font-size:10px;}
.ancora{top:-100px;}
}