@charset "utf-8";
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
}
.anima{	
	-webkit-transition: all ease-in-out .4s;
    -moz-transition: all ease-in-out .4s;
    transition: all ease-in-out .4s; 
}
body, html { min-height: 100%; -moz-osx-font-smoothing: grayscale;}
body{
	margin: 0;
	padding: 0;
	color: #fff;
      font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;      
    font-size:17px; 
    font-weight: 300;
    line-height: 28px;
    font-style: normal;
    font-variation-settings:
      "wdth" 100,
      "YTLC" 400;
}
a{	text-decoration: none;  }
a:hover{ 	color: #00bbb4;}
a:focus, a:active, button:focus, button:active,.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline: none;}

h1{font-weight: 900; font-size:75px; line-height: 150%;}
h2{font-weight: 900; font-size:42px; line-height: 140%;}

.bg-black{
    background-color: #000;
}
.respiro-med{
    display: block;
    height: 65px;
}
.mask{
	-webkit-transition: all .6s;
    -moz-transition: all .6s;
    transition: all .6s; 
}
.hide{
    display: none;
}
.show{
    display: block;
}
.flex-v {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex-h {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
}


/* botoes */
.btn-white{
    border:2px solid #fff;
    color: #fff;
    font-weight: 500;
    font-size:14px;
    -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 14px 20px;  
  text-transform: uppercase;
  cursor: pointer;
  }
  .btn-white:hover{
    background: #fff;
    color: #000;
    transform: scale(0.9);
  }
  
/* header */
header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    padding: 0px 20px;    
    margin: 0;
    
}
header.active{
    background: linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,0),rgba(0,0,0,.7));
}
body header .logo-topo{
    width: 200px;
    display: block;
}
body header .logo-topo div{
    display: block;
    height: auto;
    width: 100%;
    height: 70px;        
    background-image: url('assets/img/logo.png'); 
    background-position: center center;
    background-size: cover !important;
}
body.single-protocolos header .logo-topo div,
body.light header .logo-topo div{ 
   
    background-image: url('assets/img/logo.png') !important; 
    background-position: center center;
    background-size: cover !important;
}
.page-template-page-home header .logo-topo{
    visibility: hidden;
    opacity: 0;
}
.page-template-page-home header.active .logo-topo{
    visibility: visible;
    opacity: 1;
}

/*  MENUFULLSCREEN     */

.font__styles, .nav__container ul, .menu {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px;
    color: white;
    padding: 0;
    
  }
  
  .mascara-menu {
    width: 100vw;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;

  }
  
  .nav-full {
    width: 100vw;
    z-index: 9;
    position: fixed;
    top:0;
    left: 0;
  }
  
  .menu {
    background: rgba(0,0,0,.35);
    border: 1px solid #fff;
    color:#fff;
    position: fixed;
    padding: 8px 20px;
    top: 18px;
    right: 50px;
    
    cursor: pointer;
    z-index: 999999;
    -webkit-border-top-left-radius: 17px;
-webkit-border-bottom-right-radius: 17px;
-moz-border-radius-topleft: 17px;
-moz-border-radius-bottomright: 17px;
border-top-left-radius: 17px;
border-bottom-right-radius: 17px;
  }
  .menu:hover{
    border: 1px solid #00bbb4;
    border-radius: 0px;
    background: rgba(0,0,0,.8);
    -webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
-moz-border-radius-topright: 17px;
-moz-border-radius-bottomleft: 17px;
border-top-right-radius: 17px;
border-bottom-left-radius: 17px;
  }
  body.light .menu { border-color:#333; color:#333; background: #fff; }
  body.light .menu:hover{ background:#333; color:#fff; }
  .block {
    border-right: 1px solid rgba(255,255,255,.1);
    height: 100vh;
    width: 25%;
    background: transparent;
  }
  .block:last-child {
    border-right: none;
  }
  
  .block__reveal {
    background: #000;
    height: 100vh;
    position: fixed;
    z-index: 9;
  }
  
  #block__01 {
    right: 0%;
  }
  
  #block__02 {
    right: 25%;
  }
  
  #block__03 {
    right: 50%;
  }
  
  #block__04 {
    right: 75%;
  }
  
  .nav__container {
    position: absolute;
    z-index: 99;
    width: 50%;
    left: 25%;    
    height: 100vh;
    text-align: center;
    
  }
  .nav__container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    font-size: 16px;
  }
  .nav__container ul li {
    padding: 8px 0;
    cursor: pointer;
    opacity: 0;
  }
  .nav__container ul li a{ color:#fff;}
.nav__container ul li a:hover{ 	color: #00bbb4;}
  /*//////////////
 PROTOCOLO INTERNO
///////////*/
#protocolo-int h1{
    font-size: 46px;
    font-weight: 800;
    margin: 0 0 12px 0;  
    padding: 0;
	line-height: 130% !important;      			
}  
#protocolo-int .minititle{
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10px;
    margin-bottom: 0;
    padding: 0;
}
#protocolo-int .container{    
    width: 100%;
}
#protocolo-int .flex-h .col{
    width: 50%;
	min-height: 90vh;	
    position: relative;
    z-index: 0;
    padding: 0;    
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#protocolo-int .flex-h .col article{
    margin: 0px auto;
    max-width: 87%;
    padding: 20px 35px;
}
#protocolo-int .flex-h .mask{
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
    background-color: #000;
    -webkit-animation: showProtocolo 2s ease-in-out forwards;
	-moz-animation: showProtocolo 2s ease-in-out forwards;
	animation: showProtocolo 2s ease-in-out forwards;
    animation-delay: .6s;
    transform-origin: right;

}
#protocolo-int .flex-h .left .mask{    background-color: #fff;}
#protocolo-int .flex-h .right .mask{    background-color: #000;}
#protocolo-int .flex-h .col.right{
    background-repeat: no-repeat;
    background-size: cover;
}

@-webkit-keyframes showProtocolo {
    0% {
        transform: scaleX(1); /* Largura cheia */
        width: 100%;
    }
    100% {
        width: 0%;
        transform: scaleX(0); /* Largura reduzida a 0 */
    }
}

@keyframes showProtocolo {
    0% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}
#protocolo-int .btns{
    display: block;
    position: relative;
    top: 20px;
}
#protocolo-int .btn-more{
    background-color: #333;
    border:2px solid #333;
    margin-left: 15px;
    color: #999;
    font-weight: 800;
    font-size:18px;
    -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 14px 20px;  
  text-transform: uppercase;
  cursor: pointer;
  }
  #protocolo-int .btn-more:hover{
    background: #fff;
    color: #000;
    transform: scale(0.9);
  }
/* SWITCHER */
.loader {    
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 150px;
  padding: 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;  
  position: relative;
  z-index: 0;
}

.words {
  overflow: hidden;
  position: relative;
  
}
.words::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--bg-color) 10%,
    transparent 30%,
    transparent 70%,
    var(--bg-color) 90%
  );
  z-index: 20;
}

.word {
  display: block;
  height: 100%;
  padding: 5px 6px 10px 6px;
  line-height: 60px;
  text-transform: uppercase;
  font-size: 60px;
  font-weight:900;
  text-align: center;
  margin: 0;
  animation: spin_4991 7s infinite; 
  
}
.word:last-child{
  padding-top: 15px !important;  
}
@keyframes spin_4991 {
  10% {
    -webkit-transform: translateY(-102%);
    transform: translateY(-102%);
  }

  25% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  35% {
    -webkit-transform: translateY(-202%);
    transform: translateY(-202%);
  }

  50% {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
  }

  60% {
    -webkit-transform: translateY(-302%);
    transform: translateY(-302%);
  }

  75% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }

  85% {
    -webkit-transform: translateY(-402%);
    transform: translateY(-402%);
  }

  100% {
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%);
  }
}


#protocolos .nav-arrows{
  position: absolute;
  left: 20px;
  top: 40%;
  z-index: 9;

}
#protocolos .nav-arrows .top{
  transform: rotate(45deg);
  cursor: pointer;
  display: block;
  position: absolute;
  top:0;
  left:0;
  opacity: .7;
}
#protocolos .nav-arrows .bottom{
  transform: rotate(225deg);
  cursor: pointer;
  display: block;
  position: absolute;
  top:50px;
  left:0;
  opacity: .7;
}
#protocolos .nav-arrows .top:hover *,
#protocolos .nav-arrows .bottom:hover *{
  fill: #00bbb4;
  opacity: 1;
}

/* MOUSE */
.mouse {
    background: #4e5559 linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);
    
    
    
    width: 26px;
    height: 44px;
    cursor: pointer;
    border-radius: 100px;
    background-size: 100% 200%;
    -webkit-animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
            animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
  }
  .mouse:before, .mouse:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .mouse:before {
    width: 23px;
    height: 40px;
    background-color: #222a30;
    border-radius: 100px;
  }
  .mouse:after {
    background-color: #ffffff;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    -webkit-animation: trackBallSlide 5s linear infinite;
            animation: trackBallSlide 5s linear infinite;
  }
  
  @-webkit-keyframes colorSlide {
    0% {
      background-position: 0% 100%;
    }
    20% {
      background-position: 0% 0%;
    }
    21% {
      background-color: #4e5559;
    }
    29.99% {
      background-color: #ffffff;
      background-position: 0% 0%;
    }
    30% {
      background-color: #4e5559;
      background-position: 0% 100%;
    }
    50% {
      background-position: 0% 0%;
    }
    51% {
      background-color: #4e5559;
    }
    59% {
      background-color: #ffffff;
      background-position: 0% 0%;
    }
    60% {
      background-color: #4e5559;
      background-position: 0% 100%;
    }
    80% {
      background-position: 0% 0%;
    }
    81% {
      background-color: #4e5559;
    }
    90%, 100% {
      background-color: #ffffff;
    }
  }
  
  @keyframes colorSlide {
    0% {
      background-position: 0% 100%;
    }
    20% {
      background-position: 0% 0%;
    }
    21% {
      background-color: #4e5559;
    }
    29.99% {
      background-color: #ffffff;
      background-position: 0% 0%;
    }
    30% {
      background-color: #4e5559;
      background-position: 0% 100%;
    }
    50% {
      background-position: 0% 0%;
    }
    51% {
      background-color: #4e5559;
    }
    59% {
      background-color: #ffffff;
      background-position: 0% 0%;
    }
    60% {
      background-color: #4e5559;
      background-position: 0% 100%;
    }
    80% {
      background-position: 0% 0%;
    }
    81% {
      background-color: #4e5559;
    }
    90%, 100% {
      background-color: #ffffff;
    }
  }
  @-webkit-keyframes trackBallSlide {
    0% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    6% {
      opacity: 1;
      transform: scale(0.9) translateY(5px);
    }
    14% {
      opacity: 0;
      transform: scale(0.4) translateY(40px);
    }
    15%, 19% {
      opacity: 0;
      transform: scale(0.4) translateY(-20px);
    }
    28%, 29.99% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    30% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    36% {
      opacity: 1;
      transform: scale(0.9) translateY(5px);
    }
    44% {
      opacity: 0;
      transform: scale(0.4) translateY(40px);
    }
    45%, 49% {
      opacity: 0;
      transform: scale(0.4) translateY(-20px);
    }
    58%, 59.99% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    60% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    66% {
      opacity: 1;
      transform: scale(0.9) translateY(5px);
    }
    74% {
      opacity: 0;
      transform: scale(0.4) translateY(40px);
    }
    75%, 79% {
      opacity: 0;
      transform: scale(0.4) translateY(-20px);
    }
    88%, 100% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
  }
  @keyframes trackBallSlide {
    0% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    6% {
      opacity: 1;
      transform: scale(0.9) translateY(5px);
    }
    14% {
      opacity: 0;
      transform: scale(0.4) translateY(40px);
    }
    15%, 19% {
      opacity: 0;
      transform: scale(0.4) translateY(-20px);
    }
    28%, 29.99% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    30% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    36% {
      opacity: 1;
      transform: scale(0.9) translateY(5px);
    }
    44% {
      opacity: 0;
      transform: scale(0.4) translateY(40px);
    }
    45%, 49% {
      opacity: 0;
      transform: scale(0.4) translateY(-20px);
    }
    58%, 59.99% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    60% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
    66% {
      opacity: 1;
      transform: scale(0.9) translateY(5px);
    }
    74% {
      opacity: 0;
      transform: scale(0.4) translateY(40px);
    }
    75%, 79% {
      opacity: 0;
      transform: scale(0.4) translateY(-20px);
    }
    88%, 100% {
      opacity: 1;
      transform: scale(1) translateY(-20px);
    }
  }
  @-webkit-keyframes nudgeMouse {
    0% {
      transform: translateY(0);
    }
    20% {
      transform: translateY(8px);
    }
    30% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(8px);
    }
    60% {
      transform: translateY(0);
    }
    80% {
      transform: translateY(8px);
    }
    90% {
      transform: translateY(0);
    }
  }
  @keyframes nudgeMouse {
    0% {
      transform: translateY(0);
    }
    20% {
      transform: translateY(8px);
    }
    30% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(8px);
    }
    60% {
      transform: translateY(0);
    }
    80% {
      transform: translateY(8px);
    }
    90% {
      transform: translateY(0);
    }
  }
  @-webkit-keyframes nudgeText {
    0% {
      transform: translateY(0);
    }
    20% {
      transform: translateY(2px);
    }
    30% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(2px);
    }
    60% {
      transform: translateY(0);
    }
    80% {
      transform: translateY(2px);
    }
    90% {
      transform: translateY(0);
    }
  }
  @keyframes nudgeText {
    0% {
      transform: translateY(0);
    }
    20% {
      transform: translateY(2px);
    }
    30% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(2px);
    }
    60% {
      transform: translateY(0);
    }
    80% {
      transform: translateY(2px);
    }
    90% {
      transform: translateY(0);
    }
  }
  @-webkit-keyframes colorText {
    21% {
      color: #4e5559;
    }
    30% {
      color: #ffffff;
    }
    51% {
      color: #4e5559;
    }
    60% {
      color: #ffffff;
    }
    81% {
      color: #4e5559;
    }
    90% {
      color: #ffffff;
    }
  }
  @keyframes colorText {
    21% {
      color: #4e5559;
    }
    30% {
      color: #ffffff;
    }
    51% {
      color: #4e5559;
    }
    60% {
      color: #ffffff;
    }
    81% {
      color: #4e5559;
    }
    90% {
      color: #ffffff;
    }
  }
  @media only screen and (max-width: 768px) {

 .word {
    font-size:50px;
  }
}