@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{margin-top:0; padding-top:0;}
* h1:last-child, * h2:last-child, * h3:last-child, * h4:last-child, * h5:last-child, * h6:last-child{margin-bottom:0; padding-bottom:0;}
h1{font-size:36px;}
h2{font-size:30px;}
h3{font-size:28px;}
h4{font-size:24px;}
h5{font-size:22px;}
h6{font-size:20px;}
p{font-size:18px; line-height:1.6em;}
* p:first-child{margin-top:0;}
* p:last-child{margin-bottom:0;}
.chamada{font-size:22px;}
.legenda{font-size:14px;}
ul:not(.reset-list) li, ol:not(.reset-list) li{font-size:18px; line-height:1.6em;}
ul:not(.reset-list) li + li, ol:not(.reset-list) li + li{margin-top: .7em;}
a{text-decoration:none; cursor:pointer;}
a img{border:none; max-width:100%; height:auto; display:block; margin:auto;}
strong{font-weight:500;}

/* identificadores */
#body {font-size:62.5%; margin:0; padding:0; width:100%; height:100%; font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100; font-weight: 300; color:#000000; min-width:360px;}
#container {margin:0; padding: 155px 0 630px 0; height:100%; min-height:100%; height:auto!important; position:relative; z-index: 1; overflow-x:hidden; min-width:360px; transition: padding 1s;}
#container.hover {padding: 215px 0 630px 0;}

header {position: fixed; top:0; right: 0; left: 0; z-index:100; padding:10px 3.8% 60px 3.8%; font-size:0; transition: padding 1s; border-top-style:solid; border-top-width:5px; border-image: linear-gradient(to right, #5699B2 0%,#6EB8DC 100%); border-image-slice:5; text-align: right;}
header.hover{padding:40px 3.8% 90px 3.8%;}
header .logo{width: 360px; height: 80px; background-image:url("../images/svg/dr-marcio-boff.svg"); background-repeat: no-repeat; background-position: left center; background-size: contain; display: block; float: left;}

header .bg-gradient-blue-b{font-size: 14px; position: absolute; right: 0; bottom: 0; left: 0; padding: 5px 3.8%; z-index: 0; border-bottom: solid 1px #FFFFFF;}
header .bg-gradient-blue-b .local + span{vertical-align: middle;}
header .bg-gradient-blue-b a:nth-child(-n+4){float: left;}
header .bg-gradient-blue-b a + a{margin-left: 20px;}

nav{display: inline-block; position: relative; z-index: 10;}
nav li{display:inline-block; vertical-align:middle; z-index:0; position: relative;}
nav li + li{margin-left: 25px;}
nav li .blue{font-size: 16px; line-height: 40px; margin: 20px 0; display:block; position:relative; cursor:pointer; z-index:10; font-weight: 400; transition: color 1s;}
nav li .blue .base{margin: -.3em 0 0 -.3em;}
nav li .white{font-size: 16px; font-weight: 400;}

nav li:hover{z-index: 10;}
nav li:hover .blue, nav li .blue.hover{color:#6EB8DC;}
nav li:hover .reset-list{height: 200px;}

nav li .reset-list{display: block; position: absolute; left: 0; text-align: left; overflow: hidden; height: 0; z-index: 0; transition: height 1s; padding: 0; top: 60px}
nav li li{display: block;}
nav li li + li{margin-left: 0;}
nav li li + li::before{content: ""; position: absolute; top: 0; right: 20px; left: 20px; height: 1px; background-color: #FFFFFF;}
nav li li .white{font-size: 16px; display: block; white-space: nowrap; padding: 15px 20px; line-height: 20px; background: linear-gradient(to right, #5699B2 0%,#6EB8DC 100%); transition: color 1s;}
nav li li .white:hover, nav li li .white.hover{color: #011464;}

nav + a .pict{display: none;}

#banner {display: block; width: 100%; padding-bottom: 35%; min-height: 600px; min-width:360px; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover;}

#banner .banner-content{position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-position: center; background-size: cover;}
#banner .banner-content:not(:first-child){display: none;}

.no-webp #banner .cirurgia-oncologica, .no-js #banner .cirurgia-oncologica{background-image:url("../images/large/banner-cirurgia-oncologica.jpg");}
.webp #banner .cirurgia-oncologica{background-image:url("../images/large/banner-cirurgia-oncologica.webp");}

.no-webp #banner .cirurgia-robotica, .no-js #banner .cirurgia-robotica{background-image:url("../images/large/banner-cirurgia-robotica.jpg");}
.webp #banner .cirurgia-robotica{background-image:url("../images/large/banner-cirurgia-robotica.webp");}

.no-webp #banner .cirurgia-fpvb, .no-js #banner .cirurgia-fpvb{background-image:url("../images/large/banner-cirurgia-geral.jpg");}
.webp #banner .cirurgia-fpvb{background-image:url("../images/large/banner-cirurgia-geral.webp");}
#banner .cirurgia-fpvb::after{content: ""; position: absolute; top: 5%; left: 20%; bottom: 0; width: 40%; background-image: url("../images/svg/figado.svg"); background-size: contain; background-repeat: no-repeat; background-position: top; mix-blend-mode:color-dodge; opacity: .6; z-index: 10;}

#banner .bg-image-br{position: absolute; right: 34.6%; bottom: 0; left: 0; padding: 0 100px 0 3.8%; background: url("../images/svg/diagonal-br.svg") center right, linear-gradient(to left,  rgba(110,184,220,0) 0%,rgba(110,184,220,0) 178px,rgba(110,184,220,1) 178px,rgba(86,153,178,1) 100%); background-size: contain; background-repeat: no-repeat; height: 150px; display: flex; align-items: center; align-content: flex-start; z-index: 20;}

#banner h1, #banner h2{margin: 0;}
#banner h2 span{font-size: 1.15em;}
#banner p{margin-top: .5em; line-height: 1.2em;}
#banner a{position: absolute; bottom: 45px; right: 3.8%; z-index: 30;}

section.perfil {border-bottom-style:solid; border-bottom-width:1px; border-image: linear-gradient(to right, #5699B2 0%,#6EB8DC 100%); border-image-slice:1;}
section.perfil .column-2{vertical-align: middle;}
section.perfil .bg-image{aspect-ratio: 5/7; vertical-align: middle;}
.no-webp section.perfil .bg-image, .no-js section.perfil .bg-image{background-image:url("../images/large/dr-marcio-boff.jpg");}
.webp section.perfil .bg-image{background-image:url("../images/large/dr-marcio-boff.webp");}
section.perfil .roboto-serif.blue span{display: block; font-size: .5em; font-weight: 300; line-height: 1.3em;}
section.perfil p{padding-top: 1.5em;}

section.entidades {border-bottom-style:solid; border-bottom-width:1px; border-image: linear-gradient(to right, #5699B2 0%,#6EB8DC 100%); border-image-slice:1;}
section.entidades .content{padding: 60px 0;}
section.entidades .reset-list{display: flex; justify-content: space-between;}
section.entidades li {display: block; width: 160px; aspect-ratio: 1/1; position: relative;}
section.entidades li .entidade{position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: 80%;}
section.entidades li .entidade.cbc{background-image:url("../images/entidades/cbc.svg"); background-size: contain;}
section.entidades li .entidade.socigers{background-image:url("../images/entidades/socigers.svg"); }
.no-webp section.entidades li .entidade.sso, .no-js section.entidades li .entidade.sso{background-image:url("../images/entidades/sso.png");}
.webp section.entidades li .entidade.sso{background-image:url("../images/entidades/sso.webp");}
.no-webp section.entidades li .entidade.ahpba, .no-js section.entidades li .entidade.ahpba{background-image:url("../images/entidades/ahpba.png"); background-size: 90%;}
.webp section.entidades li .entidade.ahpba{background-image:url("../images/entidades/ahpba.webp"); background-size: 90%;}
.no-webp section.entidades li .entidade.ihpba, .no-js section.entidades li .entidade.ihpba{background-image:url("../images/entidades/ihpba.png");}
.webp section.entidades li .entidade.ihpba{background-image:url("../images/entidades/ihpba.webp");}
.no-webp section.entidades li .entidade.gbm, .no-js section.entidades li .entidade.gbm{background-image:url("../images/entidades/gbm.png");}
.webp section.entidades li .entidade.gbm{background-image:url("../images/entidades/gbm.webp");}

section.cirurgias{border-top: solid 1px #FFFFFF; border-bottom: solid 1px #FFFFFF;}
section.cirurgias .content{padding: 180px 0;}
section.cirurgias::before{content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-position: center bottom; background-size: contain; z-index: 0; mix-blend-mode:darken; opacity: .1;}
.no-webp section.cirurgias::before, .no-js section.cirurgias::before{background-image: url("../images/large/bg-vitruviano.jpg");}
.webp section.cirurgias::before{background-image:url("../images/large/bg-vitruviano.webp");}

section.cirurgias li{font-size: 28px; width:22.15%; margin:0 3.8% 0 0; position:relative; display:inline-block; vertical-align:top; line-height: 1.2em;}
section.cirurgias li:last-child{margin-right: 0;}
section.cirurgias li::before{content: ""; display: block; position: absolute; top: 0; left: 50%; width: 7em; margin-left: -3.5em; padding-bottom: 7em; background-color: #6EB8DC; z-index:0; border-radius: 50%; opacity: .2;}
section.cirurgias li .cirurgia{display: block; width: 7em; padding-bottom: 7em; margin: 0 auto .5em auto; position: relative; z-index: 10;}
section.cirurgias li .cirurgia::before{content: ""; display: block; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; border-radius: 50%; border: solid 1px #5699B2;}
section.cirurgias li .grifado span{display: block; font-size: .7em; font-weight: 400;}

section.robotica {border-top-style:solid; border-top-width:1px; border-image: linear-gradient(to right, #5699B2 0%,#6EB8DC 100%); border-image-slice:1;}
section.robotica .column-2, section.robotica .column-3{vertical-align: middle; text-align: left;}
section.robotica .column-3.bg-image{aspect-ratio: 21/20; background-size: contain;}
.no-webp section.robotica .column-3.bg-image, .no-js section.robotica .column-3.bg-image{background-image:url("../images/large/img-robotica.png");}
.webp section.robotica .column-3.bg-image{background-image:url("../images/large/img-robotica.webp");}
section.robotica h3{position: relative;}
section.robotica h3::before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 7em; padding-bottom: 7em; background-color: #6EB8DC; z-index:0; border-radius: 50%;}
section.robotica h3 .cirurgia{display: inline-block; width: 7em; padding-bottom: 7em; margin: 0 .5em 0 0; position: relative; z-index: 10; vertical-align: middle;}
section.robotica h3 .cirurgia::before{content: ""; display: block; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; border-radius: 50%; border: solid 1px #5699B2;}
section.robotica h3 .cirurgia + span {display: inline-block; vertical-align: middle;}
section.robotica h3 .cirurgia + span span{display: block; font-size: .7em; font-weight: 400;}

section.consulta{padding: 0 3.8%; border-top: solid 1px #6EB8DC; border-bottom: solid 1px #6EB8DC;}
section.consulta .content{padding: 200px 0;}
section.consulta .bg-image-tr{position: absolute; top: 0; right: 50%; left: 0; padding: 0 120px 0 3.8%; background: url("../images/svg/diagonal-tr.svg") center right, linear-gradient(to left,  rgba(110,184,220,0) 0%,rgba(110,184,220,0) 118px,rgba(110,184,220,1) 118px,rgba(86,153,178,1) 100%); background-size: contain; background-repeat: no-repeat; height: 100px; display: flex; align-items: center; align-content: flex-start;}
section.consulta .bg-image-bl{position: absolute; right: 0; bottom: 0; left: 50%; padding: 0 3.8% 0 120px; background: url("../images/svg/diagonal-bl.svg") center left, linear-gradient(to right,  rgba(110,184,220,0) 0%,rgba(110,184,220,0) 118px,rgba(110,184,220,1) 118px,rgba(86,153,178,1) 100%); background-size: contain; background-repeat: no-repeat; height: 100px; display: flex; justify-content: flex-end; align-items: center; align-content: flex-end;}

section.titulo{position: relative; padding: 0 3.8%; height: 180px; display: flex; align-items: center; align-content: flex-start; border-bottom-style:solid; border-bottom-width:1px; border-image: linear-gradient(to right, #5699B2 0%,#6EB8DC 100%); border-image-slice:1;}
.no-webp section.titulo.oncologica, .no-js section.titulo.oncologica{background-image:url("../images/large/titulo-cirurgia-oncologica.jpg");}
.webp section.titulo.oncologica{background-image:url("../images/large/titulo-cirurgia-oncologica.webp");}
.no-webp section.titulo.fpvb, .no-js section.titulo.fpvb{background-image:url("../images/large/titulo-cirurgia-geral.jpg");}
.webp section.titulo.fpvb{background-image:url("../images/large/titulo-cirurgia-geral.webp");}
.no-webp section.titulo.robotica, .no-js section.titulo.robotica{background-image:url("../images/large/titulo-cirurgia-robotica.jpg");}
.webp section.titulo.robotica{background-image:url("../images/large/titulo-cirurgia-robotica.webp");}
section.titulo::before{content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #6EB8DC; z-index: 0; mix-blend-mode: multiply;}
section.titulo h1{margin: 0; position: relative; z-index: 10;}
section.titulo h1 .roboto-serif{display: block; font-size: .6em;}
section.titulo .cirurgia{width: 120px; padding-bottom: 120px; position: absolute; right: 3.8%; top: 50%; margin-top: -60px; z-index: 10;}
section.titulo .cirurgia::after{content: ""; position: absolute; top: -3px; right: -3px; bottom: -3px; left: -3px; border: solid 1px #6EB8DC; border-radius: 50%;}

section.principal {border-bottom-style:solid; border-bottom-width:1px; border-image: linear-gradient(to right, #5699B2 0%,#6EB8DC 100%); border-image-slice:1;}
section.principal .box:not(:first-child){margin-top: 60px;}
section.principal * + p.chamada.blue-b{margin-top: 2em;}

section.principal .mapa{margin-top: 60px;}
section.principal .mapa iframe{width: 100%; aspect-ratio: 3/2; border: none;}

section.mapa{border-top-style:solid; border-top-width:1px; border-image: linear-gradient(to right, #5699B2 0%,#6EB8DC 100%); border-image-slice:1; padding: 0;}
section.mapa iframe{width: 100%; aspect-ratio: 3/1; display: block; border: 0;}

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

footer{position: absolute; right: 0; bottom: 0; left: 0; padding:0 3.8%; z-index: 90; height: 630px;}
footer .content{padding: 120px 0 0 0;}
footer .column-3.text-center .logo{width: 100%; height: 80px; background-image:url("../images/svg/dr-marcio-boff-cirurgia-oncologica.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; display: block; margin: 0 0 150px 0;}
footer .column-3.text-center .alpha + .alpha{margin-left: 5%;}
footer .column-3.text-center .roboto-serif{line-height: 1em; margin-top: 120px;}
footer .column-3.text-center .roboto-serif span{font-size: .6em;}
footer .bg-image-br{position: absolute; bottom: 0; right: 34.6%; left: 0; padding: 0 100px 0 3.8%; background: url("../images/svg/diagonal-br.svg") center right, linear-gradient(to left,  rgba(110,184,220,0) 0%,rgba(110,184,220,0) 118px,rgba(110,184,220,1) 118px,rgba(86,153,178,1) 100%); background-size: contain; background-repeat: no-repeat; height: 100px; display: flex; align-items: center; align-content: flex-start;}
footer .bg-image-br p{width: 100%;}
footer .bg-image-br p a + a{margin-left: 10%;}
footer .pict + span{display: inline-block; vertical-align: middle;}
footer .pict + span .blue-bb{display: block; font-size: .8em;}
footer .pict:not(.local) + span{line-height: 1.2em;}

/*cookie consent*/
#termsfeed-com---nb{display:block; margin:5% auto 0 auto; max-width:800px; border:solid 1px #5699B2;}
.termsfeed-com---nb .cc-nb-title {color: #5699B2; font-family: "Roboto", sans-serif; font-size:32px;}
.termsfeed-com---nb .cc-nb-text{color: #000000;}
.cc-nb-main-container{font-family: "Roboto", sans-serif; font-size:18px;}
.cc-nb-okagree{background-color:#5699B2!important; color:#FFFFFF!important;}
.cc-nb-reject{background-color:#C41F21; color:#FFFFFF!important;}
.cc-nb-changep{background-color:#6EB8DC!important; color:#FFFFFF!important;}

/*estruturais*/
section{padding:0 3.8%; position: relative;}
.standard .content{padding: 120px 0;}
.content {margin:auto; width:100%; max-width:1800px; position:relative; font-size:0;}
.article {width:65.4%; margin:auto; position:relative; display:inline-block; vertical-align:top;}
.column-2 {width:48.1%; margin:0 3.8% 0 0; position:relative; display:inline-block; vertical-align:top;}
.column-2:nth-child(2n), .column-2:last-child{margin-right:0;}
.column-3 {width:30.8%; margin:0 3.8% 0 0; position:relative; display:inline-block; vertical-align:top;}
.column-3:nth-child(3n), .column-3:last-child{margin-right:0;}
.column-4 {width:22.15%; margin:0 3.8% 0 0; position:relative; display:inline-block; vertical-align:top;}
.column-4:nth-child(4n), .column-4:last-child{margin-right:0;}

/*específicas*/
.grifado:not(:first-child){margin-top: 2em;}
.grifado::after{content: ""; display: block; margin: .5em 0 1em 0; width: 4em; height: .2em; border-radius:0 0.15em; transform: skewX(30deg); background: linear-gradient(to right,  #5699B2 0%,#6EB8DC 100%);}
.grifado:last-child::after{margin: .5em 0 0 0;}
.grifado.text-center::after{margin: .5em auto 1em auto;}
.grifado.text-center:last-child::after{margin: .5em auto 0 auto;}

.list-tipos{list-style-type: upper-latin;}
.list-tipos li {padding-left: .5em;}
.list-tipos li::marker{color: #5699B2; font-size: 1.3em; font-weight: 600;}
.list-tipos li strong.blue-b{font-size: 1.3em; margin-bottom: .5em; display: inline-block;}

.list-doses li{text-align: right; border-bottom: dotted 1px #6EB8DC; padding-bottom: .5em;}
.list-doses strong{float: left;}

/*fontes*/
.roboto {font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100;}
.roboto-condensed {font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-style: normal;}
.roboto-serif {font-family: "Roboto Serif", serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100, "GRAD" 0;}

/*cores*/
.white{color:#FFFFFF;}
.black{color:#000000;}
.blue{color:#011464;}
.blue-b{color:#5699B2;}
.blue-bb{color:#6EB8DC;}
.blue-bbb{color:#D5E5EC;}
.blue-bbbb{color:#EEF5F7;}

/*backgrounds*/
.bg-white{background-color:#FFFFFF;}
.bg-blue{background-color:#011464;}
.bg-blue-b{background-color:#5699B2;}
.bg-blue-bb{background-color:#6EB8DC;}
.bg-blue-bbb{background-color:#D5E5EC;}
.bg-blue-bbbb{background-color:#EEF5F7;}
.bg-gradient-blue-b{background: linear-gradient(to right, #5699B2 0%,#6EB8DC 100%);}
.bg-image{background-size: cover; background-repeat: no-repeat; background-position: center;}

/*estáveis*/
.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;}

.round{border-radius:5px;}
.circle{display:inline-block; vertical-align:middle; border-radius:50%;}
.two-column{column-count: 2; column-gap: 3.8%;}
.two-column li{line-height: 1.2em!important;}

.button{display:inline-block; vertical-align:middle; position:relative; line-height:1em; overflow: hidden;}
.button.hover{opacity:0.25;}

.button .label{display:inline-block; vertical-align:middle; text-align:center;}
.button.large .label{font-size:1em; line-height:20px; padding:20px 1.5em;}
.button.medium .label{font-size:.9em; line-height:16px; padding:12px 1.5em;}
.button.small .label{font-size:.8em; line-height:14px; padding:8px 1.5em;}
.button.tiny .label{font-size:.7em; line-height:12px; padding:4px 1.5em;}
.button .pict + .label{padding-right:1.5em; padding-left:.5em;}

.pict{display:inline-block; vertical-align:middle; background-repeat:no-repeat; background-size:1100% auto; background-image:url(../images/svg/pictogramas.svg); position: relative;}
.pict.text{background-image:none; font-size:1.4em;}
.pict.hover{opacity:0.25;}
.pict.block{display: block; margin: 0 auto;}

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

.pict.local + span{display: inline-block; vertical-align: top;}

.pict.white.whats{background-position:0% 0%;}
.pict.white.fone{background-position:10% 0%;}
.pict.white.email{background-position:20% 0%;}
.pict.white.home{background-position:30% 0%;}
.pict.white.local{background-position:40% 0%;}
.pict.white.agenda{background-position:50% 0%;}
.pict.white.agenda-24{background-position:60% 0%;}
.pict.white.linkedin{background-position:70% 0%;}
.pict.white.youtube{background-position:80% 0%;}
.pict.white.facebook{background-position:90% 0%;}
.pict.white.instagram{background-position:100% 0%;}
.pict.white.cronometro{background-position:0% 20%;}
.pict.white.link{background-position:10% 20%;}
.pict.white.mais{background-position:20% 20%;}
.pict.white.menos{background-position:30% 20%;}
.pict.white.fechar{background-position:40% 20%;}
.pict.white.anterior{background-position:50% 20%;}
.pict.white.seguinte{background-position:60% 20%;}
.pict.white.base{background-position:70% 20%;}
.pict.white.topo{background-position:80% 20%;}

.pict.blue-b.whats{background-position:0% 40%;}
.pict.blue-b.fone{background-position:10% 40%;}
.pict.blue-b.email{background-position:20% 40%;}
.pict.blue-b.home{background-position:30% 40%;}
.pict.blue-b.local{background-position:40% 40%;}
.pict.blue-b.agenda{background-position:50% 40%;}
.pict.blue-b.agenda-24{background-position:60% 40%;}
.pict.blue-b.linkedin{background-position:70% 40%;}
.pict.blue-b.youtube{background-position:80% 40%;}
.pict.blue-b.facebook{background-position:90% 40%;}
.pict.blue-b.instagram{background-position:100% 40%;}
.pict.blue-b.cronometro{background-position:0% 60%;}
.pict.blue-b.link{background-position:10% 60%;}
.pict.blue-b.mais{background-position:20% 60%;}
.pict.blue-b.menos{background-position:30% 60%;}
.pict.blue-b.fechar{background-position:40% 60%;}
.pict.blue-b.anterior{background-position:50% 60%;}
.pict.blue-b.seguinte{background-position:60% 60%;}
.pict.blue-b.base{background-position:70% 60%;}
.pict.blue-b.topo{background-position:80% 60%;}

.pict.blue.whats{background-position:0% 80%;}
.pict.blue.fone{background-position:10% 80%;}
.pict.blue.email{background-position:20% 80%;}
.pict.blue.home{background-position:30% 80%;}
.pict.blue.local{background-position:40% 80%;}
.pict.blue.agenda{background-position:50% 80%;}
.pict.blue.agenda-24{background-position:60% 80%;}
.pict.blue.linkedin{background-position:70% 80%;}
.pict.blue.youtube{background-position:80% 80%;}
.pict.blue.facebook{background-position:90% 80%;}
.pict.blue.instagram{background-position:100% 80%;}
.pict.blue.cronometro{background-position:0% 100%;}
.pict.blue.link{background-position:10% 100%;}
.pict.blue.mais{background-position:20% 100%;}
.pict.blue.menos{background-position:30% 100%;}
.pict.blue.fechar{background-position:40% 100%;}
.pict.blue.anterior{background-position:50% 100%;}
.pict.blue.seguinte{background-position:60% 100%;}
.pict.blue.base{background-position:70% 100%;}
.pict.blue.topo{background-position:80% 100%;}

.cirurgia{display:inline-block; background-repeat:no-repeat; background-size:300% auto; margin: 0 auto; background-image:url("../images/svg/cirurgias.svg"); position: relative;}

.cirurgia.oncologica{background-position: 0% 0%;}
.cirurgia.videocirurgia{background-position: 50% 0%;}
.cirurgia.robotica{background-position: 100% 0%;}
.cirurgia.figado{background-position: 0% 100%;}
.cirurgia.pancreas{background-position: 50% 100%;}
.cirurgia.vias-biliares{background-position: 100% 100%;}

/*variáveis*/
.alpha{transition:opacity 1s;}
.alpha:hover{opacity:.5;}

.box{padding: 30px;}

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

/* identificadores */
#container {margin:0; padding: 135px 0 550px 0;}
#container.hover {padding: 175px 0 550px 0;}

header {padding:10px 20px 60px 20px;}
header.hover{padding:30px 20px 80px 20px;}
header .logo{width: 22%; height: 60px;}

header .bg-gradient-blue-b{font-size: 13px;}
header .bg-gradient-blue-b a + a{margin-left: 15px;}

nav li + li{margin-left: 10px;}
nav li .blue{font-size: 14px; margin: 10px 0;}
nav li .white{font-size: 14px;}

nav li:hover .reset-list{height: 160px;}

nav li .reset-list{top: 50px}
nav li li + li::before{right: 15px; left: 15px;}
nav li li .white{font-size: 14px; padding: 10px 15px;}

#banner {padding-bottom: 42.5%; min-height: 500px;}

.no-webp #banner .cirurgia-oncologica, .no-js #banner .cirurgia-oncologica{background-image:url("../images/medium/banner-cirurgia-oncologica.jpg");}
.webp #banner .cirurgia-oncologica{background-image:url("../images/medium/banner-cirurgia-oncologica.webp");}

.no-webp #banner .cirurgia-robotica, .no-js #banner .cirurgia-robotica{background-image:url("../images/medium/banner-cirurgia-robotica.jpg");}
.webp #banner .cirurgia-robotica{background-image:url("../images/medium/banner-cirurgia-robotica.webp");}

.no-webp #banner .cirurgia-fpvb, .no-js #banner .cirurgia-fpvb{background-image:url("../images/medium/banner-cirurgia-geral.jpg");}
.webp #banner .cirurgia-fpvb{background-image:url("../images/medium/banner-cirurgia-geral.webp");}
#banner .cirurgia-fpvb::after{left: 10%; width: 50%;}

#banner a{bottom: 40px;}

.no-webp section.perfil .bg-image, .no-js section.perfil .bg-image{background-image:url("../images/medium/dr-marcio-boff.jpg");}
.webp section.perfil .bg-image{background-image:url("../images/medium/dr-marcio-boff.webp");}
section.perfil p{padding-top: 1.2em;}

section.entidades .content{padding: 50px 0;}
section.entidades li {width: 130px;}

section.cirurgias .content{padding: 130px 0;}
.no-webp section.cirurgias::before, .no-js section.cirurgias::before{background-image: url("../images/medium/bg-vitruviano.jpg");}
.webp section.cirurgias::before{background-image:url("../images/medium/bg-vitruviano.webp");}
section.cirurgias li{font-size: 24px;}

section.robotica .column-3.bg-image{width:48.1%;}
.no-webp section.robotica .column-3.bg-image, .no-js section.robotica .column-3.bg-image{background-image:url("../images/medium/img-robotica.png");}
.webp section.robotica .column-3.bg-image{background-image:url("../images/medium/img-robotica.webp");}

section.consulta .content{padding: 180px 0;}
section.consulta .bg-image-tr{right: 34.6%;}
section.consulta .bg-image-bl{left: 34.6%;}

section.titulo{height: 150px;}
.no-webp section.titulo.oncologica, .no-js section.titulo.oncologica{background-image:url("../images/medium/titulo-cirurgia-oncologica.jpg");}
.webp section.titulo.oncologica{background-image:url("../images/medium/titulo-cirurgia-oncologica.webp");}
.no-webp section.titulo.fpvb, .no-js section.titulo.fpvb{background-image:url("../images/medium/titulo-cirurgia-geral.jpg");}
.webp section.titulo.fpvb{background-image:url("../images/medium/titulo-cirurgia-geral.webp");}
.no-webp section.titulo.robotica, .no-js section.titulo.robotica{background-image:url("../images/medium/titulo-cirurgia-robotica.jpg");}
.webp section.titulo.robotica{background-image:url("../images/medium/titulo-cirurgia-robotica.webp");}
section.titulo .cirurgia{width: 100px; padding-bottom: 100px; margin-top: -50px;}

section.principal .box:not(:first-child){margin-top: 50px;}

section.principal .mapa{margin-top: 50px;}
section.mapa iframe{aspect-ratio: 5/2;}

footer{height: 550px;}
footer .content{padding: 100px 0 0 0;}
footer .column-3.text-center .logo{height: 60px; margin: 0 0 180px 0;}
footer .column-3.text-center .alpha .pict{width: 50px; height: 50px;}
footer .column-3.text-center .alpha + .alpha{margin-left: 5px;}
footer .column-3.text-center .roboto-serif{margin-top: 80px;}
footer .bg-image-br p a + a{margin-left: 5%;}

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

/*variáveis*/
.box{padding: 25px;}
}


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

/* identificadores */
#body.scroll, #container.scroll{overflow: hidden;}
#container, #container.hover {padding: 115px 0 630px 0;}

header, header.hover {padding:15px 20px 45px 20px;}
header .logo{width: 260px; height: 50px;}

header .bg-gradient-blue-b{font-size: 0; padding: 0 20px; text-align: center;}
header .bg-gradient-blue-b a:nth-child(-n+4){float: none;}
header .bg-gradient-blue-b a + a{margin-left: 20px;}

header .panel-button{display: inline-block; position: relative; vertical-align: middle; width: 50px; height: 50px; background-color: #6EB8DC;}
header .panel-button span{display:block; position:absolute; height:2px; width:24px; left: 13px; background-color:#FFFFFF;}
header .panel-button span:first-child{top: 16px;}
header .panel-button span:nth-child(2){top: 24px;}
header .panel-button span:last-child{top: 32px;}

header.panel-button-active .panel-button span:first-child{transform:rotate(-45deg); top:24px;}
header.panel-button-active .panel-button span:nth-child(2){background-color: transparent;}
header.panel-button-active .panel-button span:last-child{transform:rotate(45deg); top:24px;}
header.panel-button-active nav {width: 280px;}    

nav {width: 0; position:fixed; top:115px; right:0; bottom:0; overflow: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; transition: width 1s;}
nav::before{content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #6EB8DC; opacity: .95;}
nav .reset-list{display: block; width: 100%;}
nav li{display:block; width:100%; text-align: left; padding: 0;}
nav li + li{margin-left: 0;}

nav li .blue{font-size: 16px; white-space: nowrap; color: #FFFFFF; line-height: 40px; padding: 0 30px; margin: 0; transition: none; border-top:solid 1px #FFFFFF;}
nav li .blue.hover{background-color: #5699B2;color:#FFFFFF;}
nav li span.blue{display: none; visibility: hidden;}

nav li .button{white-space: nowrap; line-height: 40px; padding: 0 30px; margin: 0; transition: none; border-top:solid 1px #FFFFFF;border-bottom: solid 1px #FFFFFF; background-color: transparent; width: 100%;}
nav li .button.medium .label{font-size: 16px; padding: 0;}
nav li .button .pict{display: none;}

nav li:hover{z-index: 10;}
nav li:hover .blue {color:#FFFFFF;}
nav li:hover .reset-list{height: auto;}

nav li .reset-list{display: block; position: relative; left: auto; overflow: auto; height: auto; transition: none; top: auto;}
nav li li + li::before{display: none; background-color: transparent;}
nav li li .white, nav li li .white:hover{font-size: 16px; color:#FFFFFF; display: block; white-space: nowrap; line-height: 40px; padding: 0 30px; background: inherit; transition: none; border-top:solid 1px #FFFFFF;}
nav li li .white.hover{background-color: #5699B2; color:#FFFFFF;}

nav + a{padding: 3px; margin-right: 10px;}
nav + a .pict{display: inline-block;}

#banner {padding-bottom: 50%; min-height: 400px;}

.no-webp #banner .cirurgia-oncologica, .no-js #banner .cirurgia-oncologica{background-image:url("../images/small/banner-cirurgia-oncologica.jpg");}
.webp #banner .cirurgia-oncologica{background-image:url("../images/small/banner-cirurgia-oncologica.webp");}

.no-webp #banner .cirurgia-robotica, .no-js #banner .cirurgia-robotica{background-image:url("../images/small/banner-cirurgia-robotica.jpg");}
.webp #banner .cirurgia-robotica{background-image:url("../images/small/banner-cirurgia-robotica.webp");}

.no-webp #banner .cirurgia-fpvb, .no-js #banner .cirurgia-fpvb{background-image:url("../images/small/banner-cirurgia-geral.jpg");}
.webp #banner .cirurgia-fpvb{background-image:url("../images/small/banner-cirurgia-geral.webp");}
#banner .cirurgia-fpvb::after{top: 5%; left: 5%; width: 60%;}

#banner .bg-image-br{right: 0; padding: 0 100px 0 25px; background: url("../images/svg/diagonal-br.svg") center right, linear-gradient(to left,  rgba(110,184,220,0) 0%,rgba(110,184,220,0) 142px,rgba(110,184,220,1) 142px,rgba(86,153,178,1) 100%); background-size: contain; background-repeat: no-repeat; height: 120px;}

#banner h2 span{font-size: 1.17em;}
#banner a{bottom: 40px; right: 40px;}

section.perfil .bg-image{display: block; max-width: 250px; margin: 0 auto 40px auto;}
.no-webp section.perfil .bg-image, .no-js section.perfil .bg-image{background-image:url("../images/small/dr-marcio-boff.jpg");}
.webp section.perfil .bg-image{background-image:url("../images/small/dr-marcio-boff.webp");}
section.perfil h1, section.perfil h2{text-align: center;}
section.perfil p:nth-child(4) .button{margin: 0 auto; display: block; text-align: center; max-width: 8em;}

section.entidades .content{padding: 40px 0;}
section.entidades li {width: 80px;}

section.cirurgias .content{padding: 80px 0;}
.no-webp section.cirurgias::before, .no-js section.cirurgias::before{background-image: url("../images/small/bg-vitruviano.jpg");}
.webp section.cirurgias::before{background-image:url("../images/small/bg-vitruviano.webp");}

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

section.robotica:not(.titulo)::before{content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; mix-blend-mode:soft-light; background-position: center; background-repeat: no-repeat; background-size: contain;}
.no-webp section.robotica:not(.titulo)::before, .no-js section.robotica:not(.titulo)::before{background-image:url("../images/small/img-robotica.png");}
.webp section.robotica:not(.titulo)::before{background-image:url("../images/small/img-robotica.webp");}
section.robotica .column-3.bg-image{display: none;}
section.robotica p:last-child{text-align: right;}

section.consulta{padding: 0 25px;}
section.consulta .content{padding: 120px 0;}
section.consulta .bg-image-tr{right: 20%; padding: 0 50px 0 25px; background: url("../images/svg/diagonal-tr.svg") center right, linear-gradient(to left,  rgba(110,184,220,0) 0%,rgba(110,184,220,0) 70px,rgba(110,184,220,1) 70px,rgba(86,153,178,1) 100%); background-size: contain; background-repeat: no-repeat; height: 60px;}
section.consulta .bg-image-bl{left: 20%; padding: 0 25px 0 50px; background: url("../images/svg/diagonal-bl.svg") center left, linear-gradient(to right,  rgba(110,184,220,0) 0%,rgba(110,184,220,0) 70px,rgba(110,184,220,1) 70px,rgba(86,153,178,1) 100%); background-size: contain; background-repeat: no-repeat; height: 60px;}

section.titulo{padding: 0 25px; height: 120px;}
.no-webp section.titulo.oncologica, .no-js section.titulo.oncologica{background-image:url("../images/small/titulo-cirurgia-oncologica.jpg");}
.webp section.titulo.oncologica{background-image:url("../images/small/titulo-cirurgia-oncologica.webp");}
.no-webp section.titulo.fpvb, .no-js section.titulo.fpvb{background-image:url("../images/small/titulo-cirurgia-geral.jpg");}
.webp section.titulo.fpvb{background-image:url("../images/small/titulo-cirurgia-geral.webp");}
.no-webp section.titulo.robotica, .no-js section.titulo.robotica{background-image:url("../images/small/titulo-cirurgia-robotica.jpg");}
.webp section.titulo.robotica{background-image:url("../images/small/titulo-cirurgia-robotica.webp");}
section.titulo .cirurgia{width: 80px; padding-bottom: 80px; right: 25px; margin-top: -40px;}

section.principal .box:not(:first-child){margin-top: 40px;}

section.principal .mapa{margin-top: 40px;}
section.principal .mapa .column-2{text-align: center;}
section.principal .mapa .column-2 + .column-2{margin-top: 40px;}
section.principal .mapa .local{display: block; margin: auto;}

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

footer{padding:0 25px; height: 630px;}
footer .content{padding: 80px 0 0 0;}
footer .column-3.text-center{width: 100%; margin: 40px 0 0 0;}
footer .column-3.text-center .logo{width: 100%; height: 50px; margin: 0 auto 40px auto;}
footer .column-3.text-center .roboto-serif{margin-top: 40px;}
footer .column-3:not(.text-center){width:48.1%;}
footer .column-3:nth-child(2){margin-right: 0; text-align: right;}
footer .column-3:nth-child(2) .pict{float: right; margin-left: 5px;}
footer .bg-image-br{right: 0; padding: 0 50px 0 25px; background: url("../images/svg/diagonal-br.svg") center right, linear-gradient(to left,  rgba(110,184,220,0) 0%,rgba(110,184,220,0) 70px,rgba(110,184,220,1) 70px,rgba(86,153,178,1) 100%); background-size: contain; background-repeat: no-repeat; height: 60px; display: flex; align-items: center; align-content: flex-start;}
footer .bg-image-br p{text-align: center;}
footer .bg-image-br p a + a{margin-left: 10%;}

/*estruturais*/
section{padding:0 25px;}
.standard .content{padding: 80px 0;}
.content {max-width:800px;}
.article, .column-2 {width:100%; margin:0; position:relative; display:block;}

/*estáveis*/
.two-column{column-count: 1; column-gap: 0;}

.button.large .label{line-height:20px; padding:10px 1.5em;}
.button.medium .label{line-height:16px; padding:7px 1.5em;}
.button.small .label{line-height:14px; padding:3px 1.5em;}
.button.tiny .label{line-height:12px; padding:2px 1.5em;}

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

/*variáveis*/
.alpha{transition:none;}
.alpha:hover{opacity:1;}

.box{padding: 20px;}

}

@media screen and (max-width:600px) {
/*configurações*/
h1{font-size:24px;}
h2{font-size:22px;}
h3{font-size:20px;}
h4{font-size:18px;}
h5{font-size:16px;}
h6{font-size:14px;}
.chamada{font-size:16px;}

/* identificadores */
#container, #container.hover {padding: 115px 0 900px 0;}

header, header.hover {padding:15px 20px 45px 20px;}
header .logo{width: 220px;}

header .bg-gradient-blue-b{padding: 0;}
header .bg-gradient-blue-b a + a{margin-left: 14px;}

header .panel-button{width: 40px; height: 40px; margin-top: 5px;}
header .panel-button span{width:20px; left: 10px;}
header .panel-button span:first-child{top: 13px;}
header .panel-button span:nth-child(2){top: 19px;}
header .panel-button span:last-child{top: 25px;}

header.panel-button-active .panel-button span:first-child{top:19px;}
header.panel-button-active .panel-button span:last-child{top:19px;}

nav + a{margin-top: 5px;}

#banner {padding-bottom: 57.5%;}

.no-webp #banner .cirurgia-oncologica, .no-js #banner .cirurgia-oncologica{background-image:url("../images/tiny/banner-cirurgia-oncologica.jpg");}
.webp #banner .cirurgia-oncologica{background-image:url("../images/tiny/banner-cirurgia-oncologica.webp");}

.no-webp #banner .cirurgia-robotica, .no-js #banner .cirurgia-robotica{background-image:url("../images/tiny/banner-cirurgia-robotica.jpg");}
.webp #banner .cirurgia-robotica{background-image:url("../images/tiny/banner-cirurgia-robotica.webp");}

.no-webp #banner .cirurgia-fpvb, .no-js #banner .cirurgia-fpvb{background-image:url("../images/tiny/banner-cirurgia-geral.jpg");}
.webp #banner .cirurgia-fpvb{background-image:url("../images/tiny/banner-cirurgia-geral.webp");}
#banner .cirurgia-fpvb::after{top: 10%; left: 0; width: 65%; min-width: 280px;}

#banner .bg-image-br{padding: 0 70px 0 25px; background: url("../images/svg/diagonal-br.svg") center right, linear-gradient(to left,  rgba(110,184,220,0) 0%,rgba(110,184,220,0) 95px,rgba(110,184,220,1) 95px,rgba(86,153,178,1) 100%); background-size: contain; background-repeat: no-repeat; height: 80px;}

#banner h2 span{font-size: 1.1em;}
#banner p{display: none;}
#banner a{bottom: 20px; right: 20px;}

section.perfil .bg-image{max-width: 200px; margin: 0 auto 30px auto;}
.no-webp section.perfil .bg-image, .no-js section.perfil .bg-image{background-image:url("../images/tiny/dr-marcio-boff.jpg");}
.webp section.perfil .bg-image{background-image:url("../images/tiny/dr-marcio-boff.webp");}

section.entidades{padding: 0 15px;}
section.entidades li {width: 15%;}

section.cirurgias .content{padding: 60px 0;}
section.cirurgias::before{background-size: cover;}
.no-webp section.cirurgias::before, .no-js section.cirurgias::before{background-image: url("../images/tiny/bg-vitruviano.jpg");}
.webp section.cirurgias::before{background-image:url("../images/tiny/bg-vitruviano.webp");}

section.cirurgias li{width:48.1%; margin:0 3.8% 0 0;}
section.cirurgias li:nth-child(2n){margin-right: 0;}
section.cirurgias li:nth-child(3), section.cirurgias li:last-child{margin-top: 30px;}
section.cirurgias li::before{width: 5em; margin-left: -2.5em; padding-bottom: 5em;}
section.cirurgias li .cirurgia{width: 5em; padding-bottom: 5em;}

.no-webp section.robotica:not(.titulo)::before, .no-js section.robotica:not(.titulo)::before{background-image:url("../images/tiny/img-robotica.png");}
.webp section.robotica:not(.titulo)::before{background-image:url("../images/tiny/img-robotica.webp");}

section.robotica h3{font-size: 16px;}

section.consulta .content{padding: 100px 0;}
section.consulta .bg-image-tr{right: 0; padding: 0 25px;}
section.consulta .bg-image-bl{left: 0; padding: 0 25px;}
section.consulta h4 span{font-size: .8em;}

section.titulo{height: 100px;}
.no-webp section.titulo.oncologica, .no-js section.titulo.oncologica{background-image:url("../images/tiny/titulo-cirurgia-oncologica.jpg");}
.webp section.titulo.oncologica{background-image:url("../images/tiny/titulo-cirurgia-oncologica.webp");}
.no-webp section.titulo.fpvb, .no-js section.titulo.fpvb{background-image:url("../images/tiny/titulo-cirurgia-geral.jpg");}
.webp section.titulo.fpvb{background-image:url("../images/tiny/titulo-cirurgia-geral.webp");}
.no-webp section.titulo.robotica, .no-js section.titulo.robotica{background-image:url("../images/tiny/banner-cirurgia-robotica.jpg");}
.webp section.titulo.robotica{background-image:url("../images/tiny/banner-cirurgia-robotica.webp");}
section.titulo .cirurgia{width: 60px; padding-bottom: 60px; margin-top: -30px;}

section.principal .box:not(:first-child){margin-top: 30px;}
section.principal .mapa{margin-top: 30px;}
section.principal .mapa .column-2 + .column-2{margin-top: 30px;}
section.principal ul:not(.reset-list), section.principal ol{padding-left: 20px;}
section.principal blockquote{margin: 0 25px;}

footer{padding:0 25px; height: 900px;}
footer .content{padding: 60px 0 0 0;}
footer .column-3.text-center{margin: 30px 0 0 0;}
footer .column-3.text-center .logo{height: 40px; margin: 0 auto 30px auto;}
footer .column-3.text-center .roboto-serif{margin-top: 30px;}
footer .column-3:not(.text-center){width:100%; margin-right: 0; text-align: center;}
footer .column-3:first-child{margin-bottom: 20px;}
footer .column-3:first-child .pict{display: block; margin-right: auto; margin-left: auto;}
footer .column-3:nth-child(2){text-align: center;}
footer .column-3:nth-child(2) .pict{display: block; float: none; margin-right: auto; margin-left: auto;}

footer .bg-image-br{padding: 0 25px;}
footer .bg-image-br p a span{display: inline-block; line-height: 1em; vertical-align: middle; max-width: 6em; text-align: left;}
footer .bg-image-br p a + a{margin-left: 15px;}

/*estruturais*/
.standard .content{padding: 60px 0;}
.content {max-width:400px;}
.column-3 {width:100%;}

/*variáveis*/
.box{padding: 15px;}
}