*{
    padding: 0;
    margin: 0;
    border: 0;
}

#container{
    width: 750px;
	height: 447px;
    margin: 0px auto;
    /*margin-top: 50px;*/
}


body{
    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ffffff), to(#cacac9)); /* Safari 5.1+, Chrome 10+ */
    background: -webkit-radial-gradient(circle, #ffffff, #cacac9); /* Firefox 3.6+ */
    background: -moz-radial-gradient(circle, #ffffff, #cacac9); /* IE 10 */
    background: -ms-radial-gradient(circle, #ffffff, #cacac9);
}

article{
    font-family: 'Lato-Light', sans-serif;
    background: #ffffff;
    width: 766px;
    height: 400px;
    margin-top: 70px;
    position: absolute;
    border-radius:15px;
    border: 10px solid#ebebeb;
    z-index: 1;
}


h8{
    font-family: 'Lato-Light', sans-serif;
    font-size: 100%;
    color: #828282;
    margin-left: 5%;
}

p{
    font-family: 'Lato-Light', sans-serif;
    color: #696969;
    font-size: 80%;
}



  /*menu*/

nav{
    margin-left:150px;
}

nav ul {
    list-style: none;
}

nav ul li{
    float: left;
    margin-left: 37px;
    display: block;
}

.efeito3
{
    margin-left: -32px;
    padding: 0px;
    width: 182px;
    
}

nav ul li .menu3{
    visibility: hidden; 
    position: absolute;
    margin-left: 0px;
    top: 150px;
    padding: 2px 7px;
    width: 150px;
    background: #E8E8E8;
    font-family: 'Lato-Light', sans-serif;
    border-radius: 10px;
    border: solid#CFCFCF;
    height: 170px;
}


body ul li:hover ul{
    visibility: visible;
    text-align: left;
    color: #6495ED;
}

.menu{
    margin: 0px;
    float: left;
	margin-top:-160px;
	margin-left:10px;
}

.menu ul li{
    margin-left: 1%;
    margin-top: 15px;
}

#menu2 ol li a{
    text-decoration: none;
    color: black;
}

.menuplaneta{
    background: white;
}


#intro{
    width: 390px;
}

.parag{
    font-family: 'Lato-Light', sans-serif;
    color: black;
    font-size: 80%;
    opacity: 0.5;
}

.efeito{
    position: absolute;
    background: #9C9C9C;
    width: 90px;
    font-size: 12px;
    border-radius: 5px;
    color:#FFFAFA;
    opacity: 0;
    margin-left: -95px;
}

.cabecalho{
	position:absolute;
	font-size:16px;
	margin-top:-30px;
	margin-left:-140px;
}

.cabecalho2{
	position:absolute;
	font-size:16px;
	margin-top:-40px;
	margin-left:-140px;
}

.cabecalhointro{
	position:absolute;
	font-size:16px;
	margin-top:-28px;
	margin-left:-120px;
}



.parag2{
    font-family: 'Lato-Light', sans-serif;
    color: black;
    font-size: 80%;
    opacity: 0.5;
}



.efeito2{
    font-family: 'Lato-Light', sans-serif;
    position: absolute;
    background: #9C9C9C;
    width: 90px;
    font-size: 11px;
    border-radius: 5px;
    color:#FFFAFA;
    opacity: 0;
    margin-left: -95px;
    padding: 1px;
 
}


 

#conteudo{
    margin-top: -170px;
    margin-left: 130px;
}

#conteudointro{
     margin-left: 150px;
	 margin-top:-10px;
}

#pagina{
	margin-top:-2px;
    margin-left: -143px;
    width:730px;
    line-height: 2px;
}

#pagina9{
    margin-left: -15px;
    width:730px;
    line-height: 2px;
}

#paginaintro{
    margin-left: -140px;
    width:730px;
    line-height: 2px;
}

#paginaprox{
    margin-left: 598px;
    width:100px;
}

.paginacao{
    margin-top: 15px;
	margin-left:160px;
}

#btModal{
	position:absolute;
	margin-top:-150px;	
	cursor:pointer;
}
#btModal2{
	position:absolute;
	margin-top:-150px;	
	margin-left:350px;
	cursor:pointer;
}

.contmod1{
	margin:-100px;	
	margin-left:-150px;
}

    /*botões*/

.clique{
    font-family: 'Lato-Light', sans-serif;
    font-size: 11px;
    position: absolute;
    background: #9C9C9C;
    width: 90px;
    border-radius: 5px;
    color:#FFFAFA;
    bottom: 5.5%;

}

.btlinkant{
    float: right;
    cursor: pointer;
    margin-top: -20px;
}


.btlinkprox{
    float: right;
    padding-left: 50px;
    cursor: pointer;
     margin-top: -20px;
}

.btlink
{
	cursor: pointer;
}

.home{
	margin-left:-90px;
	margin-top: 40px;
}
    /*menu dentro do indexintro e indexconclusao biblioteca*/

.topbiblioteca{
    margin-top: -5%;
}
    
#rdmenu{
    width: 420px;
    height: 110px;
    background: #f1f0f0;
    border-radius: 10px;
    margin-left: 30px;
    margin-top: -20px;
	z-index:99999;
}    

#bibliotecabeca{
    margin-top: 20px;
}
    
h5{
    color:#696969;
    float: right;
    margin-right: 285px;
    font-family: 'Lato-Light', sans-serif;
}

h6{
    margin-left: 40px;
    font-size: 14px;
}

.menu5{
    margin-top: 10px;
    float: left;
    margin-left: 40px;
}

.menu5> .cinco{
    width: 170px;
}

.menu5 > .cinco > .cinco5{
    float: left;
    margin-top: 0px;
    font-size: 14px;
    width: 180px;
}

.menu5 > .cinco > .cinco5 > a{
    text-decoration: none;
    color: #696969;
    line-height: 20px;

}

.menu5 > .cinco > .cinco5 > a:hover{
    color:#019fda;
}

.menu6{
    margin-top: -78px;
    float: right;
}

.menu6> .seis{
    width: 170px;
}

.menu6 > .seis > .seis6{
    float: left;
    margin-top: 0px;
    font-size: 14px;
    font-family: 'Lato-Light', sans-serif;
}

.menu6 > .seis > .seis6 > a{
    text-decoration: none;
    color: #696969;
    line-height: 20px;
}

.menu6 > .seis > .seis6 > a:hover{
    color:#019fda;
}

#thmenu{
    width: 420px;
    height: 220px;
    background: #f1f0f0;
    border-radius: 10px;
    margin-left: 30px;
    margin-top: -20px;
}

.menu7{
    margin-top: 10px;
    float: left;
    margin-left: 40px;
}


.menu7 > .sete > .sete7{
    float: left;
    margin-top: 0px;
    font-size: 14px;
    font-family: 'Lato-Light', sans-serif;
    width: 240px;
}

.menu7 > .sete > .sete7 > a{
    text-decoration: none;
    color: #696969;
    line-height: 22px;
}

.menu7 > .sete > .sete7 > a:hover{
    color:#019fda;
}

.menu8{
    margin-top: -58px;
    float: right;
}

.menu8> .oito{
    width: 170px;
}

.menu8 > .oito > .oito8{
    float: left;
    margin-top: 0px;
    font-size: 14px;
    font-family: 'Lato-Light', sans-serif;
}

.menu8 > .oito > .oito8 > a{
    text-decoration: none;
    color: #696969;
    line-height: 20px;
}

.menu8 > .oito > .oito8 > a:hover{
    color:#019fda;
}

.textos{
    margin-right: 323px;
    font-size: 14px;
    font-family: 'Lato-Light', sans-serif;
    font-weight: 600;    
}

.dicas{
    margin-right: 350px;
    font-size: 14px;
    font-family: 'Lato-Light', sans-serif;
    font-weight: 600;  
}

#botprox{
    position: absolute;
    margin-top: 95px;
    margin-left: 450px;
}

#botprox1{
    position: absolute;
    margin-top: 154px;
    margin-left: 450px;
}

.proxbiblioteca{
   float: right;
   margin-right: -30px;
   cursor: pointer;
}

.antbiblioteca{
   float: right;
   margin-right: 10px;
   cursor: pointer;
}

#bibliotecasigni{
    width: 430px;
    height: 150px;
    margin-left: 20px;
    background: #f1f0f0;
    border-radius: 10px;
    margin-top: -80px;
}

#bibliotecasigni2{
    width: 430px;
    height: 250px;
    margin-left: 20px;
    background: #f1f0f0;
    border-radius: 10px;
    margin-top: -80px;
}

.bibliotecatexto{
    margin: 45px;
    margin-bottom: 20px;
    font-family: 'Lato-Light', sans-serif;
}

.bibliotecatexto2{
    margin: 15px;
    margin-left: 30px;
    font-family: 'Lato-Light', sans-serif;
}
    /*menu dentro do indexintro e indexconclusao passo a passo*/

#sdmenu{
    width: 420px;
    height: 300px;
    background: #f1f0f0;
    border-radius: 10px;
    margin-left: 30px;
    margin-top: -20px;
}

#fdmenu{
    width: 420px;
    height: 150px;
    background: #f1f0f0;
    border-radius: 10px;
    margin-left: 30px;
    margin-top: -20px;
}

.menu8{
    margin-top: 10px;
    float: left;
    margin-left: 40px;
}

.menu8> .sete{
    width: 280px;
}

.menu8 > .sete > .sete7{
    float: left;
    margin-top: 0px;
    font-size: 14px;
    font-family: 'Lato-Light', sans-serif;
}

.menu8 > .sete > .sete7 > a{
    text-decoration: none;
    color: #696969;
    line-height: 23px;
}

.menu8 > .sete > .sete7 > a:hover{
    color:#019fda;
}

#botprox2{
    position: absolute;
    margin-top: 84px;
    margin-left: 490px;
}

#botprox3{
    position: absolute;
    margin-top: 235px;
    margin-left: 490px;
}


    /*menu dentro do indexintro e indexconclusao Dicas*/
    
#tdmenu{
    width: 420px;
    height: 60px;
    background: #f1f0f0;
    border-radius: 10px;
    margin-left: 30px;
    margin-top: -20px;
}

.links{
    margin-right: 367px;
}

    /*rodape*/

.rodaintro{
    position: absolute;
    margin-top: 350px;
    margin-left: 545px;
	font-size:11px;
}

.rodaconclusao{
    position: absolute;
    margin-top: 15px;
    margin-left: 545px;
	font-size:11px;
}


.rodape{
    width: 100px;

}

.rodapedois{
    width: 100px;
	margin-left:200px;

}

    /*outros*/

.info{
    color: #CD2626;
}

.botao{
    width: 80px;
    padding:7px;
    border-radius:10px;
    border: 2px solid#B5B5B5;
    text-align: center;
    background: #FFD700;
    margin-top: 30px;
    font-family: arial;
    font-weight: bold;
    color: #696969;
    margin-left: 35%;
    cursor: pointer;
}


.casa{
    margin-top: 0 auto;
    margin-left: 20%;
	width:470px;
}

.risco{
    margin-left: 60px;
	width:700px;
}

.introducao{
    top: -60px;
    margin-left: 200px;
    width: 300px;
     position: relative;
}

.introducao a{
    text-decoration: none;
}


.conclusao{
    position: absolute;
    margin-left: 200px;
    top: 400px;
    z-index: 9999;
}

.conclusao a{
    text-decoration: none;
}

.efeito{
	font-family: 'Lato-Light', sans-serif;
    position: absolute;
    background: #9C9C9C;
    width: 90px;
    font-size: 11px;
    border-radius: 5px;
    color:#FFFAFA;
    opacity: 0;
    margin-left: -95px;
    padding: 1px;
}



.efeitoseta{
    position: absolute;
    font-size: 12px;
    border-radius: 5px;
    color:#FFFAFA;
    opacity: 0;
    margin-left: -95px;
}

.efeitoseta2{
    position: absolute;
    font-size: 12px;
    border-radius: 5px;
    color:#FFFAFA;
    opacity: 0;
    margin-left: -95px;
}

#figura{
    position: absolute;
    margin-left: 200px;
	margin-top:-40px;
}


.seta{
    width: 20px;
    height: 20px;
    margin-left: 95px;
}






    /*intro 1, 2, 3, 4, 5 e 6*/
        
.logo{
	width:90px;
	position:fixed;
    margin-top: 365px;
	margin-left:20px;
    cursor: pointer;
}
        

.cabeca{
    background: #fcfcfc;
    width: 100%;
    border-radius: 15px;
    line-height: normal;
}

.cabeca1{
    background: #fcfcfc;
    margin-left: 20%;
    width: 80%;
    border-radius: 15px;
    line-height: normal;
}



.planeta{
    float: right;
    margin-right: 350px;
    font-weight: bold;
}



#interno{
    padding: 20px;
    float: left;
    margin-top: 15px;
}

        /*indexintro1*/
        
.indexintro1{
    background: #e07373;
}

    /*indexintro2*/
    
.indexintro2{
    background: #EECD81;
}

    /*indexintro3*/
    
.indexintro3{
    background: #6B8F8A;
}    

    /*indexintro4*/
    
.indexintro4{
    background: #5792AF;
}

     /*indexintro5*/
     
.indexintro5{
    background: #8C8FAD;
}     

     /*indexintro6*/
     
.indexintro6{
    background: #B1B75C;
}

indexc0{
    background: #BEBEBE;
}
indexc7{
    background: #BEBEBE;
}

    /*janela modal*/

.janelamodal{
    position: fixed;
    font-family: 'Lato-Light', sans-serif;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    background: #F08080;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events:none;
}

.janelamodal:target{
    opacity: 1;
    pointer-events:auto;
}

.janelamodal > div{
    width:450px;
    position: relative;
    margin: 13% auto;
    padding:35px 35px 35px 35px;
    border: 12px solid#eac3c3;
    border-radius:10px;
    background: #f7e1e1;
    background: -moz-linear-gradient(#f7e1e1);
    background: -webkit-linear-gradient(#f7e1e1);
    background: o-linear-gradient(#f7e1e1);
}


.janelamodalamarelo{
    position: fixed;
    font-family: 'Lato-Light', sans-serif;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    background: #EECD81;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events:none;
}

.janelamodalamarelo:target{
    opacity: 1;
    pointer-events:auto;
}

.janelamodalamarelo > div{
    width:450px;
    position: relative;
    margin: 13% auto;
    padding:35px 35px 35px 35px;
    border: 20px solid#E8DCBE;
    border-radius:10px;
    background: #F6EDD9;
    background: -moz-linear-gradient(#F6EDD9);
    background: -webkit-linear-gradient(#F6EDD9);
    background: o-linear-gradient(#F6EDD9);
}

.janelamodalazul{
    position: fixed;
    font-family: 'Lato-Light', sans-serif;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    background: #6B8F8A;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events:none;
}

.janelamodalazul:target{
    opacity: 1;
    pointer-events:auto;
}

.janelamodalazul > div{
    width:450px;
    position: relative;
    margin: 13% auto;
    padding:35px 35px 35px 35px;
    border: 20px solid#B6C4C2;
    border-radius:10px;
    background: #D7E0DD;
    background: -moz-linear-gradient(#D7E0DD);
    background: -webkit-linear-gradient(#D7E0DD);
    background: o-linear-gradient(#D7E0DD);
}


.janelamodalescuro{
    position: fixed;
    font-family: 'Lato-Light', sans-serif;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    background: #5792AF;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events:none;
}

.janelamodalescuro:target{
    opacity: 1;
    pointer-events:auto;
}

.janelamodalescuro > div{
    width:450px;
    position: relative;
    margin: 13% auto;
    padding:35px 35px 35px 35px;
    border: 20px solid#B5C9D3;
    border-radius:10px;
    background: #DFE8EC;
    background: -moz-linear-gradient(#DFE8EC);
    background: -webkit-linear-gradient(#DFE8EC);
    background: o-linear-gradient(#DFE8EC);
}

.janelamodalroxo{
    position: fixed;
    font-family: 'Lato-Light', sans-serif;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    background: #8C8FAD;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events:none;
}

.janelamodalroxo:target{
    opacity: 1;
    pointer-events:auto;
}

.janelamodalroxo > div{
    width:460px;
    position: relative;
    margin: 13% auto;
    padding:35px 35px 35px 35px;
    border: 20px solid#CDCCD6;
    border-radius:10px;
    background: #ECEBEE;
    background: -moz-linear-gradient(#ECEBEE);
    background: -webkit-linear-gradient(#ECEBEE);
    background: o-linear-gradient(#ECEBEE);
}

.janelamodalverde{
    position: fixed;
    font-family: 'Lato-Light', sans-serif;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    background: #B1B75C;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events:none;
}

.janelamodalverde:target{
    opacity: 1;
    pointer-events:auto;
}

.janelamodalverde > div{
    width:450px;
    position: relative;
    margin: 13% auto;
    padding:35px 35px 35px 35px;
    border: 20px solid#D3D4B3;
    border-radius:10px;
    background: #EFEFDF;
    background: -moz-linear-gradient(#EFEFDF);
    background: -webkit-linear-gradient(#EFEFDF);
    background: o-linear-gradient(#EFEFDF);
}

.janelamodalintroducao{
    position: fixed;
    font-family: 'Lato-Light', sans-serif;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    background: #d8d8d8;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events:none;
}

.janelamodalintroducao:target{
    opacity: 1;
    pointer-events:auto;
}

.janelamodalintroducao > div{
    width:450px;
    position: relative;
    margin: 13% auto;
    padding:35px 35px 35px 35px;
    border: 20px solid#ededed;
    border-radius:10px;
    background: #f9f9f9;
    background: -moz-linear-gradient(#f9f9f9);
    background: -webkit-linear-gradient(#f9f9f9);
    background: o-linear-gradient(#f9f9f9);
}

.janelamodalconclusao{
    position: fixed;
    font-family: 'Lato-Light', sans-serif;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    background: #d8d8d8;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events:none;
}

.janelamodalconclusao:target{
    opacity: 1;
    pointer-events:auto;
}

.janelamodalconclusao > div{
    width:450px;
    position: relative;
    margin: 13% auto;
    padding:35px 35px 35px 35px;
    border: 20px solid#ededed;
    border-radius:10px;
    background: #f9f9f9;
    background: -moz-linear-gradient(#f9f9f9);
    background: -webkit-linear-gradient(#f9f9f9);
    background: o-linear-gradient(#f9f9f9);
}

.janelamodalbiblioteca{
    position: fixed;
    font-family: 'Lato-Light', sans-serif;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    background: #d9d3d3;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events:none;
}

.janelamodalbiblioteca:target{
    opacity: 1;
    pointer-events:auto;
}

.janelamodalbiblioteca > div{
    width:500px;
    height: 450px;
    position: relative;
    margin: 10% auto;
    margin-top: 5%;
    padding:35px 35px 35px 35px;
    border: 12px solid#efeeee;
    border-radius:10px;
    background: #fafafa;
    background: -moz-linear-gradient(#fafafa);
    background: -webkit-linear-gradient(#fafafa);
    background: o-linear-gradient(#fafafa);
}

.janelamodalpassoapasso{
    position: fixed;
    font-family: 'Lato-Light', sans-serif;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    background: #d9d3d3;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events:none;
}

.janelamodalpassoapasso:target{
    opacity: 1;
    pointer-events:auto;
}

.janelamodalpassoapasso > div{
    width:500px;
    height: 450px;
    position: relative;
    margin: 10% auto;
    margin-top: 5%;    
    padding:35px 35px 35px 35px;
    border: 12px solid#efeeee;
    border-radius:10px;
    background: #fafafa;
    background: -moz-linear-gradient(#fafafa);
    background: -webkit-linear-gradient(#fafafa);
    background: o-linear-gradient(#fafafa);
}


.btModal{
    position: fixed;
    font-family: 'Lato-Light', sans-serif;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    background: black;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events:none;
}

.btModal:target{
    opacity: 1;
    pointer-events:auto;
}

.btModal > div{
    width:450px;
    position: relative;
    margin: 10% auto;
    margin-top:10%;
    padding:35px 35px 35px 35px;
}

.fechar{
    color:#9a9aa4;
    line-height: 20px;
    position: absolute;
    right: 12px;
    text-align: center;
    top:10px;
    width: 65px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    -webkite-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;

}

.fechar2{
    background: #424242;
    width:20px;
    height: 19px;
    border-radius: 5px;
    float: right;
    font-size: 14px;
}

.fechar:hover{
    color: #9a0122;
}

.fecharMod{
    color:#9a9aa4;
    line-height: 20px;
    position: absolute;
    right: -180px;
    text-align: center;
    top:-120px;
    width: 65px;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    -webkite-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;

}

.fecharMod:hover{
    color: #9a0122;
}