html, body { margin:0; padding:0; width: 100%; height: 100%; position: relative; overflow: hidden; }

body { background-color:black; }

.fix-float { width: 100%; height: 1px; display: block; clear: both; float: none; }

.content { margin: 0; width: 100%; height: 100%; background-color: black; display: block; position: relative; margin-top: 21px; }

.content .text { width: 400px; position:absolute; right: 0; background-color: rgba(0,0,0,0.7); padding: 10px; margin-right: 80px; }

.content .open { width: 400px; height: 30px; background:url(setas.png) no-repeat top; display: block; }

.content .closed { width: 400px; height: 30px; background:url(setas.png) no-repeat bottom; display: block; }

.content .text h3 { color: white; font: bold 26px arial; margin: 0; }

.content .text h4 { color: white; font: normal 18px arial; margin: 0; }

.content .text p { color: white; font: 12px arial;}

.first { display: block; }



.tutorial { margin: 0; width: 100%; height: 100%; background: white url(telainicio.png) no-repeat center center; position: absolute; top:
	0; left: 0; z-index: 1; }

#tutorial-btn { margin: 0; width: 75px; height: 75px; background: url(info.png) no-repeat; position: absolute; top:	24px; left: 4px; z-index: 1; cursor: pointer; }



.box_prev { width: 80px; padding: 10px; cursor: pointer; position: absolute; top: 0; left: 0; height: 100%; transition: all 0.5s linear; }
.box_prev:hover { background-color: rgba(0,0,0,0.7); }

.box_next { width: 80px; padding: 10px; cursor: pointer; position: absolute; top: 0; right: 0; height: 100%; transition: all 0.5s linear; }
.box_next:hover { background-color: rgba(0,0,0,0.7); }

.prev { width: 0px; height: 0px; position: absolute; top: 50%; margin-top: -30px; left: 50%; margin-left: -20px;
      border-style: solid;
      border-width: 20px 20px 20px 0;
      border-color: transparent #ffffff transparent transparent;
      line-height: 0px;
      _border-color: #000000 #ffffff #000000 #000000;
      _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 
	}

.next { width: 0px; height: 0px; position: absolute; top: 50%; margin-top: -30px; right: 50%; margin-right: -20px;
      border-style: solid;
      border-width: 20px 0 20px 20px;
      border-color: transparent transparent transparent #ffffff;
      line-height: 0px;
      _border-color: #000000 #000000 #000000 #ffffff;
      _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    }




/* BARRA BARRA BARRA BARRA */

#barra {
  position: absolute;
  width: 100%;
  height: 20px;
  left: 0;
  top: 0;
  background-color: #4c7ab8;
  border-bottom-style: solid #000 1px;
}

#barra-zh {
  position: absolute;
  width: 111px;
  height: 20px;
  left: 0;
  top: 0;
  background-image: url('barra_zh.jpg');
  background-position: 0 0;
  background-repeat: no-repeat;
  cursor: pointer;
}

#barra-zh:hover {
  background-position: 0 -20px;
}

#barra-dsm {
  position: absolute;
  width: 111px;
  height: 20px;
  left: 0;
  top: 0;
  background-image: url('barra_dsm.jpg');
  background-position: 0 0;
  background-repeat: no-repeat;
  cursor: pointer;
}

#barra-dsm:hover {
  background-position: 0 -20px;
}

#barra-fb {
  position: absolute;
  width: 78px;
  height: 20px;
  right: 78px;
  top: 0;
  background-image: url('barra_fb.jpg');
  background-position: 0 0;
  background-repeat: no-repeat;
  cursor: pointer;
}

#barra-fb:hover {
  background-position: 0 -20px;
}

#barra-tw {
  position: absolute;
  width: 78px;
  height: 20px;
  right: 0;
  top: 0;
  background-image: url('barra_tw.jpg');
  background-position: 0 0;
  background-repeat: no-repeat;
  cursor: pointer;
}

#barra-tw:hover {
  background-position: 0 -20px;
}

#sombra-barra {
  position: absolute;
  width: 100%;
  height: 10px;
  left: 0;
  top: 20px;
}



/*.familia1::after { content:""; background-image: url(familia1.jpg) no-repeat top left; background-size: 100% 100%; opacity: 0.5; }*/



.familia { display: block; position: relative; width: 100%; height: 100%; }


div.familia1 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/alexandre_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=30); background-size: 100% 100%;
}

span.familia1 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/alexandre_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=30); background-size: 100% 100%;
}



div.familia2 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/andressa_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia2 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/andressa_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}



div.familia3 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/andrielle_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia3 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/andrielle_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}



div.familia4 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/augusto_01.jpg) no-repeat top left; opacity: 01; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia4 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/augusto_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}



div.familia5 {  content: ""; top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/bibiana_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia5 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/bibiana_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}



div.familia6 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/carolina_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia6 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/carolina_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}



div.familia7 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/danrlei_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia7 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/danrlei_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}



div.familia8 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/deivis_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia8 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/deivis_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}



div.familia9 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/jennefer_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia9 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/jennefer_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}



div.familia10 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/lucas_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia10 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/lucas_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}


div.familia11 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/luiz_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia11 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/luiz_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}


div.familia12 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/maria_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia12 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/maria_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}


div.familia13 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/ricardo_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia13 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/ricardo_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}


div.familia14 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/rogerio_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia14 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/rogerio_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}


div.familia15 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/vinicius_01.jpg) no-repeat top left; opacity: 1; filter: alpha(Opacity=50); background-size: 100% 100%;
}

span.familia15 { top: 0; left: 0; bottom: 0; right: 0; position: absolute;  
  background: url(img/vinicius_02.jpg) no-repeat top left; opacity: 0; filter: alpha(Opacity=50); background-size: 100% 100%;
}