@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Raleway:700);


body {
   
margin: 0px;
    
}

#wrapper {
    
width: 100%;
height: auto;
display: flex;
-webkit-display: flex;
-moz-display: flex;    
flex-direction: column; 
-webkit-flex-direction: column; 
-moz-flex-direction: column; 
    
}



/* CONTAINERS */

#homecontainer  {
    
width: 100%;
height: 993px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
background-attachment: fixed;
flex-direction: column; 
-webkit-flex-direction: column; 
-moz-flex-direction: column; 
background-image: url(imagens/handsup-blacklivesmatter-2.jpg); */
background-repeat: no-repeat;
background-size: cover;
margin-right: auto;
margin-left: auto;
opacity: 0.7;
justify-content: center;
    
}

#hometext {

width: 579px;
height: 475px;
background-image: url(imagens/fundo.png);
margin-top: 85px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: column; 
-webkit-flex-direction: column; 
-moz-flex-direction: column; 
margin-left: auto;
margin-right: auto;


}




#sistemacontainer  {
    
width: 100%;
height: 993px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
margin-right: auto;
margin-left: auto;
align-content: center;
background-color: #E6E6E6;

}

#digitalcontainer  {
    
width: 100%;
height: auto;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
margin-right: auto;
margin-left: auto;
align-content: center;
background-color: #E6E6E6;

}
/* MENUS */

#menu01  {

width: 170px;
height: 14px;
background-image: url(imagens/menu01.png);
margin-top: 29px;
margin-left: 40px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: column; 
-webkit-flex-direction: column; 
-moz-flex-direction: column; 
float: left;

}

#goback  {

width: 53px;
height: 11px;
background-image: url(imagens/go-back.png);
margin-top: 29px;
margin-left: 129px; 
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: column; 
-webkit-flex-direction: column; 
-moz-flex-direction: column; 
float: left;
background-repeat: no-repeat;
background-size: cover;

}
    
/* sistema home */

#subcontainertexts  {
    
/*width: 100%;*/
height: auto;
display: inline-block;
-webkit-display: inline-block;
-moz-display: inline-block; 
flex-direction: column; 
-webkit-flex-direction: column; 
-moz-flex-direction: column; 
margin-left: 200px;
align-content: center;
/*background-color: aquamarine;*/

}

#subcontainer01  {
    
width: 379;
height: auto;
display: inline-block;
-webkit-display: inline-block;
-moz-display: inline-block; 
flex-direction: column; 
-webkit-flex-direction: column; 
-moz-flex-direction: column; 
margin-left: 100px;
/*background-color: aquamarine;*/

}


#img01sistemahome  {

width: 378px;
height: 250px;
background-image: url(imagens/img1.png);
margin-top: 85px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: column; 
-webkit-flex-direction: column; 
-moz-flex-direction: column; 



}

#img01sistemahome:hover{
width: 378px;
height: 250px;
background-image: url(imagens/hoverimg01.png);
background-repeat: no-repeat;
background-size: cover;

}


#img02sistemahome  {

width: 359px;
height: 121px;
background-image: url(imagens/img02.png);
margin-top: 172px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: column; 
-webkit-flex-direction: column; 
-moz-flex-direction: column; 



}

#img02sistemahome:hover {

width: 359px;
height: 121px;
background-image: url(imagens/hoverimg02.png);
background-repeat: no-repeat;
background-size: cover;


}

#img03sistemahome  {

width: 250px;
height: 140px;
background-image: url(imagens/img03.png);
margin-top: 96px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: column; 
-webkit-flex-direction: column; 
-moz-flex-direction: column; 


}

#img03sistemahome:hover {

width: 250px;
height: 141px;
background-image: url(imagens/hoverimg03.png);
background-repeat: no-repeat;
background-size: cover;


}

#subcontainer02  {
    
width: 379px;
height: auto;
   /* background-color: chocolate; */
display: inline-block;
-webkit-display: inline-block;
-moz-display: inline-block; 
margin-left: 100px;


}

#img04sistemahome  {

width: 345px;
height: 172px;
background-image: url(imagens/img04.png);
margin-top: 172px;
margin-right:auto;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 

}

#img04sistemahome:hover{
width: 345px;
height: 172px;
background-image: url(imagens/hoverimg04.png);
background-repeat: no-repeat;
background-size: cover;

}

#img05sistemahome  {

width: 377px;
height: 323px;
background-image: url(imagens/img05.png);
margin-top: 172px;
margin-left:auto;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img05sistemahome:hover{
width: 377px;
height: 323px;
background-image: url(imagens/hoverimg05.png);
background-repeat: no-repeat;
background-size: cover;

}


/* CIVIL RIGTHS */


#img01civil  {

width: 383px;
height: 82px;
background-image: url(imagens/civilrigths01.png);
margin-top: 150px;
margin-left:auto;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img01civil:hover{
width: 383px;
height: 82px;
background-image: url(imagens/civilrigths01hover.png);
background-repeat: no-repeat;
background-size: cover;

}


#img02civil  {

width: 380px;
height: 400px;
background-image: url(imagens/civilrigths02.png);
margin-top: 260px;
margin-left:auto;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img02civil:hover{
width: 380px;
height: 400px;
background-image: url(imagens/civilrigths02hover.png);
background-repeat: no-repeat;
background-size: cover;

}

#img03civil  {

width: 379px;
height: 278px;
background-image: url(imagens/civilrigths03.png);
margin-top: 155px;
margin-left:auto;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img03civil:hover{
width: 379px;
height: 278px;
background-image: url(imagens/civilrigths03hover.png);
background-repeat: no-repeat;
background-size: cover;

}

#img04civil  {

width: 282px;
height: 162px;
background-image: url(imagens/civilrigths04.png);
margin-top: 300px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}


#img04civil:hover{
width: 282px;
height: 162px;
background-image: url(imagens/civilrigths04hover.png);
background-repeat: no-repeat;
background-size: cover;

}

/* GLOBAL CIVIL RIGTHS */

#img01globalcivil  {

width: 379px;
height: 106px;
background-image: url(imagens/globalcivilrigths01.png);
margin-top: 150px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img01globalcivil:hover{
width: 379px;
height: 106px;
background-image: url(imagens/globalcivilrigths01hover.png);
background-repeat: no-repeat;
background-size: cover;

}

#img02globalcivil  {

width: 376px;
height: 311px;
background-image: url(imagens/GLOBALcivilrigths02.png);
margin-top: 300px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img02globalcivil:hover{
width: 376px;
height: 308px;
background-image: url(imagens/GLOBALcivilrigths02hover.png);
background-repeat: no-repeat;
background-size: cover;

}


#img03globalcivil  {

width: 379px;
height: 237px;
background-image: url(imagens/globalcivilrigths03.png);
margin-top: 245px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img03globalcivil:hover{
width: 379px;
height: 237px;
background-image: url(imagens/globalcivilrigths03hover.png);
background-repeat: no-repeat;
background-size: cover;

}

/* CODE */

#img01code  {

width: 380px;
height: 163px;
background-image: url(imagens/img01code.png);
margin-top: 180px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img01code:hover{
width: 380px;
height: 163px;
background-image: url(imagens/img01codehover.png);
background-repeat: no-repeat;
background-size: cover;

}

#img02code  {

width: 380px;
height: 104px;
background-image: url(imagens/img02code.png);
margin-top: 490px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img02code:hover{
width: 380px;
height: 104px;
background-image: url(imagens/img02codehover.png);
background-repeat: no-repeat;
background-size: cover;

}

/* DIGITAL CITIZENSHIP */


#img01digitalcit  {

width: 384px;
height: 193px;
background-image: url(imagens/digitalcitimg01.png);
margin-top: 490px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img01digitalcit:hover{
width: 384px;
height: 193px;
background-image: url(imagens/digitalcitimg01hover.png);
background-repeat: no-repeat;
background-size: cover;

}


#img02digitalcit  {

width: 380px;
height: 165px;
background-image: url(imagens/digitalcitimg02.png);
margin-top: 155px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img02digitalcit:hover{
width: 380px;
height: 165px;
background-image: url(imagens/digitalcitimg02hover.png);
background-repeat: no-repeat;
background-size: cover;

}

/* DIGITAL VOICES */

#img01digitalvoices  {

width: 379px;
height: 249px;
background-image: url(imagens/img01digitalvoices.png);
margin-top: 200px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img01digitalvoices:hover{
width: 379px;
height: 249px;
background-image: url(imagens/img01digitalvoiceshover.png);
background-repeat: no-repeat;
background-size: cover;

}


#img02digitalvoices  {

width: 379px;
height: 206px;
background-image: url(imagens/img02digitalvoices.png);
margin-top: 200px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img02digitalvoices:hover{
width: 379px;
height: 206px;
background-image: url(imagens/img02digitalvoiceshover.png);
background-repeat: no-repeat;
background-size: cover;

}

#img03digitalvoices  {

width: 378px;
height: 253px;
background-image: url(imagens/img03digitalvoices.png);
margin-top: 463px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img03digitalvoices:hover{
width: 378px;
height: 253px;
background-image: url(imagens/img03digitalvoiceshover.png);
background-repeat: no-repeat;
background-size: cover;

}


#img04digitalvoices  {

width: 383px;
height: 302px;
background-image: url(imagens/img04digitalvoices.png);
margin-top: 120px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-bottom: 100px;


}

#img04digitalvoices:hover{
width: 383px;
height: 302px;
background-image: url(imagens/img04digitalvoiceshover.png);
background-repeat: no-repeat;
background-size: cover;

}

#img05digitalvoices  {

width: 379px;
height: 192px;
background-image: url(imagens/img05digitalvoices.png);
margin-top: 210px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 


}

#img05digitalvoices:hover{
width: 379px;
height: 192px;
background-image: url(imagens/img05digitalvoiceshover.png);
background-repeat: no-repeat;
background-size: cover;

}


/* textos */

#text01  {

width: 472px;
height: 1020px;
background-image: url(imagens/text01.png);
margin-top: 155px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;


}

#text02 {

width: 474px;
height: 664px;
background-image: url(imagens/text021.png);
margin-top: 155px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;


}

#text022 {

width: 401px;
height: 12px;
background-image: url(imagens/text022.png);
margin-top: 64px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;


}

#text03 {

width: 475px;
height: 1514px;
background-image: url(imagens/text03.png);
margin-top: 155px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;


}

#text032 {

width: 360px;
height: 33px;
background-image: url(imagens/text032.png);
margin-top: 64px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;


}

#text04 {

width: 468px;
height: 564px;
background-image: url(imagens/text04.png);
margin-top: 155px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;



}


#imgglobal01 {

width: 384px;
height: 231px;
background-image: url(imagens/imgtextglobal01.png);
margin-top: 64px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;



}


#imgglobal01:hover{
width: 384px;
height: 231px;
background-image: url(imagens/imgtextglobal01hover.png);
background-repeat: no-repeat;
background-size: cover;

}


#text042 {

width: 475px;
height: 315px;
background-image: url(imagens/text042.png);
margin-top: 64px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;



}

#imgglobal02 {

width: 384px;
height: 231px;
background-image: url(imagens/imgtextglobal02.png);
margin-top: 64px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;


}

#imgglobal02:hover{
width: 384px;
height: 231px;
background-image: url(imagens/imgtextglobal02hover.png);
background-repeat: no-repeat;
background-size: cover;

}

#text043 {

width: 475px;
height: 361px;
background-image: url(imagens/text043.png);
margin-top: 64px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;


}


#imgglobal03 {

width: 385px;
height: 279px;
background-image: url(imagens/imgtextglobal03.png);
margin-top: 64px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;


}

#imgglobal03:hover{
width: 385px;
height: 279px;
background-image: url(imagens/imgtextglobal03hover.png);
background-repeat: no-repeat;
background-size: cover;

}

#text044 {

width: 453px;
height: 12px;
background-image: url(imagens/text044.png);
margin-top: 64px;
display: flex;
-webkit-display: flex;
-moz-display: flex; 
flex-direction: row; 
-webkit-flex-direction: row; 
-moz-flex-direction: row; 
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;


}