@charset "utf-8";
/* CSS Document */

.lightbox{
display:none;
}


.person1 {
  text-transform: uppercase;
  /*background: #499cd1;*/
  background: rgba(073,156,206,0.0);
  color: #277fb7;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 18px;
  margin: 0px 0px 0px 0px;
  padding: 5px 8px;
 /* margin: 100px 75px 10px 75px;*/
  /*padding: 15px 20px;*/
  position: relative;
  text-align: center;
  width: 129px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.person1 .tooltip {
  background: #e5e5e5;
  bottom: -175%; /* posição do box */
  color: #499cd1;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 180px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.person1 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.person1 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  /* border-top: solid #1496bb 10px; seta para baixo */
  border-bottom: solid #e5e5e5 10px; /* seta para cima */
  bottom: 105px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.person1:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .person1 .tooltip {
  display: none;
}

.lte8 .person1:hover .tooltip {
  display: block;
}


/* PERSONAGEM 2 */

@charset "utf-8";
/* CSS Document */

.lightbox{
display:none;
}


.person2 {
  text-transform: uppercase;
  /*background: #499cd1;*/
  background: rgba(073,156,206,0.0);
  color: #277fb7;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 18px;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px;
  position: relative;
  text-align: center;
  width: 129px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.person2 .tooltip {
  background: #e5e5e5;
  bottom: -175%; /* posição do box */
  color: #499cd1;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 180px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.person2 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.person2 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  /* border-top: solid #1496bb 10px; seta para baixo */
  border-bottom: solid #e5e5e5 10px; /* seta para cima */
  bottom: 105px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.person2:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .person2 .tooltip {
  display: none;
}

.lte8 .person2:hover .tooltip {
  display: block;
}



/* PERSONAGEM 3 */

@charset "utf-8";
/* CSS Document */

.lightbox{
display:none;
}


.person3 {
  text-transform: uppercase;
   background: rgba(073,156,206,0.0);
  /*background: #499cd1;*/
  color: #277fb7;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 18px;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px;
  position: relative;
  text-align: center;
  width: 129px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.person3 .tooltip {
  background: #e5e5e5;
  bottom: -175%; /* posição do box */
  color: #499cd1;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 180px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.person3 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.person3 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  /* border-top: solid #1496bb 10px; seta para baixo */
  border-bottom: solid #e5e5e5 10px; /* seta para cima */
  bottom: 105px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.person3:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .person3 .tooltip {
  display: none;
}

.lte8 .person3:hover .tooltip {
  display: block;
}


/* PERSONAGEM 4 */

@charset "utf-8";
/* CSS Document */

.lightbox{
display:none;
}


.person4 {
  text-transform: uppercase;
  background: rgba(073,156,206,0.0);
  /*background: #499cd1;*/
  color: #277fb7;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 18px;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px;
  position: relative;
  text-align: center;
  width: 129px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.person4 .tooltip {
  background: #e5e5e5;
  bottom: -175%; /* posição do box */
  color: #499cd1;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 180px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.person4 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.person4 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  /* border-top: solid #1496bb 10px; seta para baixo */
  border-bottom: solid #e5e5e5 10px; /* seta para cima */
  bottom: 105px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.person4:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .person4 .tooltip {
  display: none;
}

.lte8 .person4:hover .tooltip {
  display: block;
}


/* PERSONAGEM 5 */

@charset "utf-8";
/* CSS Document */

.lightbox{
display:none;
}


.person5 {
  text-transform: uppercase;
   background: rgba(073,156,206,0.0);
  /*background: #499cd1;*/
  color: #277fb7;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 18px;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px;
  position: relative;
  text-align: center;
  width: 129px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.person5 .tooltip {
  background: #e5e5e5;
  bottom: -175%; /* posição do box */
  color: #499cd1;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 180px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.person5 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.person5 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  /* border-top: solid #1496bb 10px; seta para baixo */
  border-bottom: solid #e5e5e5 10px; /* seta para cima */
  bottom: 105px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.person5:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .person5 .tooltip {
  display: none;
}

.lte8 .person5:hover .tooltip {
  display: block;
}


/* PERSONAGEM 6 */

@charset "utf-8";
/* CSS Document */

.lightbox{
display:none;
}


.person6 {
  text-transform: uppercase;
  background: rgba(073,156,206,0.0);
  /*background: #499cd1;*/
  color: #277fb7;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 18px;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px;
  position: relative;
  text-align: center;
  width: 129px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.person6 .tooltip {
  background: #e5e5e5;
  bottom: -175%; /* posição do box */
  color: #499cd1;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 180px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.person6 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.person6 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  /* border-top: solid #1496bb 10px; seta para baixo */
  border-bottom: solid #e5e5e5 10px; /* seta para cima */
  bottom: 105px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.person6:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .person6 .tooltip {
  display: none;
}

.lte8 .person2:hover .tooltip {
  display: block;
}


/* PERSONAGEM 7 */

@charset "utf-8";
/* CSS Document */

.lightbox{
display:none;
}


.person7 {
  text-transform: uppercase;
  background: #499cd1;
  color: #277fb7;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 18px;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px;
  position: relative;
  text-align: center;
  width: 129px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.person7 .tooltip {
  background: #e5e5e5;
  bottom: -175%; /* posição do box */
  color: #499cd1;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 180px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.person7 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.person7 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  /* border-top: solid #1496bb 10px; seta para baixo */
  border-bottom: solid #e5e5e5 10px; /* seta para cima */
  bottom: 105px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.person7:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .person7 .tooltip {
  display: none;
}

.lte8 .person7:hover .tooltip {
  display: block;
}


/* PERSONAGEM 8 */

@charset "utf-8";
/* CSS Document */

.lightbox{
display:none;
}


.person8 {
  text-transform: uppercase;
  background: #499cd1;
  color: #e5e5e5;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 18px;
  margin: 0px 0px 0px 0px;
  padding: 5px 5px;
  position: relative;
  text-align: center;
  width: 129px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.person8 .tooltip {
  background: #e5e5e5;
  bottom: -175%; /* posição do box */
  color: #499cd1;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 180px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.person8 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
  
}  

/* CSS Triangles - see Trevor's post */
.person8 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  /* border-top: solid #1496bb 10px; seta para baixo */
  border-bottom: solid #1496bb 10px; /* seta para cima */
  bottom: 105px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.person2:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .person8 .tooltip {
  display: none;
}

.lte8 .person8:hover .tooltip {
  display: block;
}


.profcolor {
color:#000000;
}