/* CSS Document */


@media (min-width: 100px) {


html {
background:#000000;
/* background-size: cover; */
/* background-image: linear-gradient(to right , #111111, #330066, #111111); */
font-family:Geneva,Arial,Helvetica,sans-serif;
font-size:16px;
margin: auto;
 /* cursor:url(imagens/black.ani), url(imagens/black.gif), auto; */
}

@media (min-width:800px){
html {
/* background-attachment:fixed; */
  /*  max-width:900px;   */
 /*border:solid 2px; */
}
}

body{
padding-top:1rem;
margin:auto;
/* background-image:linear-gradient(to right, green 10%, red 110% ),url(imagens/dragon.jpg); */
/* background-image: linear-gradient(to right, black , green, black); */
/*background-attachment:fixed; 
background-blend-mode:color;
background-size: 100% 100%;
background-repeat:no-repeat; */
/*
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 */
 
/* background-color:rgba(00,10,00,0.3); */
/*background-image:url(imagens/Eyes.jpg);  */

/*
background-size:80% 80%;     
-webkit-background-size: 80% 80%;
-o-background-size: 80% 80%;
-khtml-background-size: 80% 80%;
-moz-background-size: 80% 80%;
*/
z-index:18;
}

/*   ________________________________________________________________________________________________________*/

*, *::after, *::before {
  box-sizing: border-box;   /*  nao soma padding nem bordas na largura definida      */
}



.apply{
padding-right:5px;
}

.obrigatorio{
color:#FF0000;
font-size:1rem;
}


.blocopesquisa{    /*       ______________________________________________________   BLEND MODE ________________________________     */
width:65vw;
/* background-image:linear-gradient(to right, green 10%, white 90%),url(imagens/Eyes.jpg); */
 background-color:rgba(20,20,0,0.4); 
/*background-image:url(imagens/Eyes.jpg);  */
/*background-blend-mode:color;*/
/*background-repeat:no-repeat;*/
/*background-size:100% 60%; */    
/*-webkit-background-size: 100% 60%;*/
/*-o-background-size: 100% 60%;*/
/*-khtml-background-size: 100% 60%;*/
/*-moz-background-size: 100% 60%;*/


/*
background-size:695px 310px;     
-webkit-background-size: 695px 310px;
-o-background-size: 695px 310px;
-khtml-background-size: 695px 310px;
-moz-background-size: 695px 310px;
*/
text-align:center;
padding:0.8rem;


margin:10px auto; /*  É isso que centraliza !!!!!!    */
margin-bottom:5%;
 -webkit-box-shadow:4px 4px 30px lightyellow; 
 -moz-box-shadow:4px 4px 30px white;
}

.janela {

border:1px;
background-color:rgba(0,40,50,0.1);
border-color:lightyellow;
    border-radius:15px;
text-align:center;
margin: 15px auto;
width:90%;
height:50%;
padding:5px;
border-collapse:collapse;
}

.janela2 { 
border:1px;
/* 
border-color:rgba(0,80,0,0.8);
*/
border-color:lightyellow;
text-align:center;
margin: 0 auto;
max-width:90%;
}

.linhaespaco{
background:none;
border:none;
max-width:90%;
margin:0 auto;
padding:0px;
height:2rem;
}

.titulo{
color:lightyellow ;
text-align:center;
text-shadow: 3px 3px 10px #00FFFF;  /*  direita,  baixo, raio,  cor  #00FF00; */

font-size:1.3rem;
}


.buscainput{
color:black;
background-color:#fcffd6; /* amarelinho suave */
width:80%;
border:1px;
border-color: lightgreen;
height:1.2rem;
font-size:1rem;
margin: 0 auto;
}


.busca1{
color:lightyellow ;
text-align:center;
text-shadow: 3px 3px 10px #00FFFF;  /*  direita,  baixo, raio,  cor  */

font-size:1rem;
width:45%;
}


.busca2{
color:lightyellow ;
text-align:center;
text-shadow: 3px 3px 10px #00FFFF;  /*  direita,  baixo, raio,  cor  */

font-size:1rem;
width:40%;
cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}


th{
color:lightyellow ;
text-align:center;
text-shadow: 3px 3px 10px #00FF00;  /*  direita,  baixo, raio,  cor  */

width:5%;
padding-top:10px;
padding-bottom:10px;
}

.thx{
background-color:rgba(0,0,0,0.4);
padding:10px;}

.thxpointer{
background-color:rgba(0,0,0,0.4);
padding:10px;
 /* cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto; */
}

.thd{
background-color:rgba(0,0,0,0.6);
font-weight:bold;
color:lightyellow ;
text-align:center;
text-shadow: 3px 3px 10px #FFFF00;  /*  direita,  baixo, raio,  cor  */
width:5%;
padding-top:10px;
padding-bottom:10px;
cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}

.thdpointer{
background-color:rgba(0,0,0,0.6);
font-weight:bold;
color:lightyellow;
text-align:center;
text-shadow: 3px 3px 10px  #FFFF00;  /*  direita,  baixo, raio,  cor  */
width:5%;
padding-top:10px;
padding-bottom:10px;
cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}

.thdmateria{
background-color:rgba(0,0,0,0.6);
font-weight:bold;
color:lightyellow ;
text-align:center;
text-shadow: 3px 3px 10px  #FFFF00;  /*  direita,  baixo, raio,  cor  */
width:45%;
margin: 0 auto;
cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}

.thdcategoria{
background-color:rgba(0,0,0,0.6);
font-weight:bold;
color:lightyellow ;
text-align:center;
text-shadow: 3px 3px 10px #FFFF00;  /*  direita,  baixo, raio,  cor  */

width:40%;
margin: 0 auto;
}



.materia{
color:lightyellow ;
text-align:center;
text-shadow: 3px 3px 10px #00FFFF;  /*  direita,  baixo, raio,  cor  */
background-color: rgba(0,0,0,1);
width:45%;
margin: 0 auto;
}

.categoria{
color:lightyellow ;
text-align:center;
text-shadow: 3px 3px 10px #00FFFF;  /*  direita,  baixo, raio,  cor  */
background-color: rgba(0,0,0,1);
width:40%;
margin: 0 auto;
}


td{
color:lightyellow;


}























 /* __________________________________________________________________________________*/


.exibe{
display:block;
}

.naoexibe{
display:none;
}



.imagemfundo{
position:relative;
margin:auto;
top:0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: none;
/*
background-image: rgba(0, 80, 0, 0.6);
*/
background-image:linear-gradient(to right, red 5%, green 10%, red 90% ),url(imagens/dragon.jpg);
background-attachment:fixed;
/* background-color:rgba(00,10,00,0.3); */
/*background-image:url(imagens/Eyes.jpg);  */
background-blend-mode:color;
background-repeat:no-repeat;
/*
background-size:80% 80%;     
-webkit-background-size: 80% 80%;
-o-background-size: 80% 80%;
-khtml-background-size: 80% 80%;
-moz-background-size: 80% 80%;
*/
z-index:0;
}

.moment-clipper {
    position: absolute;
    width: 100vw;
    height: 100vh;   
}

.moment {
   text-align:center;
   background-image:linear-gradient(to right, #FFFF00 10%, #000000 110% ),url(imagens/matrix.gif);
   background-blend-mode:color;
  /* opacity:0.6; */
 /*  background-repeat:repeat; */
   position: fixed;
   width: 100vw;
   height: 100vh;
   top: 0;
   z-index:-1;
}


.ofertacontainer{
 position: absolute;
    width: 100vw;
    height: 100vh;  
}

.oferta{
  text-align:center;
   background-image:url(imagens/oferta2.png);
   background-repeat:no-repeat;
   background-size:9%;
   opacity:0.8;
   position:fixed;
   width:100%;
   height:100%;
   top:2vh;
   left:2vw;
 /*  background-repeat:repeat; */
  
   z-index:99;

}

    
 .imagegd{
margin-top:10px;

padding-top:20px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;

} 
    
.imagemedia{
margin-top:10px;
width:25rem;
 /* height:22rem; */
padding-top:20px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;

}  
    
    
.imageresponsive{ 
margin:0;
width:25rem;
align:center;
}     
    
    
    
    

.image{
margin-top:10px;
width:12rem;
height:18rem;
padding-top:20px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}

.imapq{
margin-top:10px;
width:10rem;
height:15rem;
padding-right:10px;
padding-bottom:10px;

}
    
    
.imagematlogin{
text-align:center;
margin-top:10px;
width:200px;
height:200px;
}    
    
    
    
    
    

.pcateg{
  color: LightYellow;
  text-align:left;
  cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;	
}

.pmateria{
	color:LightYellow;
	text-align:center;
	visibility:hidden;
}


.add:link{
  color:yellow;
  font-size:1.125rem;
  text-decoration:none;
  cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}

.add:active{
  color:yellow;
  font-size:1.125rem;
  text-decoration:none;
  cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}

.add:visited{
  color:yellow;
  font-size:1.125rem;
  text-decoration:none;
  cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}

.add:hover{
  color:yellow;
  font-size:1.125rem;
  text-decoration:none;
  cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}




.addfoot:link{
  color:red;
  font-size:0.7rem;
  text-decoration:none;
  cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}

.addfoot:active{
  color:red;
  font-size:0.7rem;
  text-decoration:none;
  cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}

.addfoot:visited{
  color:red;
  font-size:0.7rem;
  text-decoration:none;
  cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}

.addfoot:hover{
  color:red;
  font-size:0.7rem;
  text-decoration:none;
  cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}









p {
  color: lightYellow;
  font-size:1rem;
  padding: 10px;
  text-align:left;
}


header {
  margin:auto;
  width:90%;
  display:block;
  color:black;
  text-align:center;
  text-shadow: 0.075em 0.08em 0.1em yellow;
  background-image:linear-gradient(to right, #363004 , yellow, #363004);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow:2px 2px 10px lightyellow;
  -moz-box-shadow:2px 2px 10px #888;
 /* text-shadow: 1px 1px 5px  #00ff00;  */
}


    
    
    
    
    
    
    
    
    
    
.ponteiro{
cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
}

.esoterikoheader {
opacity:1;
margin:auto;
width:100vw;
display:block;
color:lightyellow;
text-align:center;
background-image:linear-gradient(to right, black , yellow, black);

/* background-image:url(imagens/fundos.jpg); */
background-position:center;
background-repeat:no-repeat;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:2px 2px 20px lightyellow;
-moz-box-shadow:2px 2px 20px #888;
}

.logoeso{
opacity:1;
width:28vw;
height:7vh;
}

header h6 {
margin:2px;
color:black;    
 /* color:#D5FFD0; */
font-size:1rem;
font-style:italic;
}


header h1 {
	margin:auto;
	padding:5px;
	text-align:center;
	}
		    
    
    
    
    
h1 {
	margin:auto;
	padding:0px;
	text-align:center;
	}
		
h2{
font-size:1.125rem;
   margin:0px;
   text-align:center;
   color:#ffffcc;
}


h3{
font-size:1.2rem;
font-style:italic;
margin:0px;
text-align:center;
color:#ffffcc;
}	


header h4{
color: #000;
cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
background-color:yellow;
-webkit-box-shadow:2px 2px 20px lightyellow;
-moz-box-shadow:2px 2px 20px #888;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
position:fixed;
padding:0px 100px; /*  afasta a faixa do corner */
top:50px;
left:-120px;
text-align:center;
}

.tabelamenuhoriz{
/*border:solid 1px;
border-color:#000033; */
text-align:center;
width:80vw;
display:visible;
}

.tabelamenu{
background-image: linear-gradient(to right, black , green, black);
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display:visible;
}

.tabelapagina{
/* background-image: linear-gradient(to right, blue , yellow, purple); */
/*
border:solid 1px;
border-color:#000033;
*/
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:2px 2px 20px lightgreen;
-moz-box-shadow:2px 2px 20px #888;
display:visible;
}

.tabelacoment{
/* background-image: linear-gradient(to right, blue , yellow, purple); */
text-align:center;
display:visible;
}

.celulapagina{
color: LightYellow;
text-align:center;
font-size:1.125rem;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.celulapaginatxt{
color: Lightgreen;
text-align:justify;
font-size:1.125rem;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.celulacoment{
color: #AAAAAA;
text-align:justify;
font-size:1rem;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}


.celulapaginapost{
font-weight:900;
color: #880000;
text-align:left;
font-size:1rem;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}


.tabelamenuinv{
background-image: linear-gradient(to right, black , blue, black);
/*
border:solid 1px;
border-color:#000033;
*/
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:2px 2px 20px lightgreen;
-moz-box-shadow:2px 2px 20px #888;
display:none;
}

.entrada{
color:#000;
text-align:left;
}


.celulamenu{
padding:2px;
color:#E1F3FE;
text-align:center;
/*
border:solid 1px;
border-color:#000033;
*/
font-size:1rem;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:2px 2px 20px lightgreen;
-moz-box-shadow:2px 2px 20px #888;
}

.celulamenuok{
font-size:1.125rem;
padding:2px;
color:yellow;
text-align:center;
background-color:#000000;    
/*background-image: -webkit-radial-gradient(1% 100%,#393B0B,black);*/
/*
background-color:#222222;
*/
/*
border:solid 1px;
border-color:#000033;
*/
cursor:url(imagens/green-light.ani), url(imagens/green-light.gif), auto;
font-weight:bold;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:2px 2px 10px lightyellow;
-moz-box-shadow:2px 2px 10px #888;

}


.celulamenucadastro{
text-align:left;
/*
border:solid 1px;
border-color:#000033;
*/
font-size:1rem;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow:2px 2px 20px lightgreen;
-moz-box-shadow:2px 2px 20px #888;
padding:2px;
}


.celulamenu2{
padding:0px;
font-size:0.4375rem;
}

.main {
top: 400vh;
left: 40vh;
margin-top: -250px;
margin-left: -250px;
position: absolute;
}


#containercentro{
padding:0px;
margin:1.125rem;
width:85vw;
}


.box{
float:left;
}

.boxcateg{
float:left;
top:auto;
}

.boxespaco{
float:left;
top:auto;
}

.boxcategfixo{
display:inline-block;
position:fixed;
top:1.125rem;
}

#containermargem{
   background:none;
   width:10%;
   margin-right:2vw;  
  }  

#containermateria{
  background:none;
  width:50%;
  margin-right:2vw;
  }

#containercategoria{
   background:none;
   width:25%;
   margin-right:2vw;   
  }
  

#containerespaco{
   background:none;
   width:25%;
   margin-right:2vw;   
  } 
  
  
  /*   alinhar divs que nem tabela    */   

#div-table {
  padding:20px; /* altura do form contato no article */
  display: table;
  margin:20px;
  text-align:left;
  border-radius: 10px;
-webkit-box-shadow:1px 1px 20px lightyellow;
-moz-box-shadow:1px 1px 20px #888;
  
}
  

 #div-table-login {
  padding:20px; /* altura do form contato no article */
  display: table;
  margin:20px;
  text-align:center;
  border-radius: 10px;
-webkit-box-shadow:1px 1px 20px lightyellow;
-moz-box-shadow:1px 1px 20px #888;
  
} 
  
  
  
  

#div-table .divcontato  { 
  display: table-row;
  height:30px;
}

#div-table .divcontato .buttoncontato {
margin-top:20px;
  
}

#div-table .divcontato .cell { 
  display: table-cell;
  
}

.green {
    background-color: green;
}

.blue {
    background-color: blue;
}

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}



.divcontato {
color:yellow;                   /* #E1F3FE;  */
}
 

.buttoncontato{
font:Verdana, Arial, Helvetica, sans-serif;
font-size:1rem;
color:yellow;
background-color:#000;
border:1px outset yellow;
text-align:center;
width:100px;
padding:0.3rem;
border-radius:5px;
-webkit-border-radius:5px;
moz-border-radius:5px;
-o-border-radius:5px;
}
    
 
 
    
    
    
    
    
    
    
    

#div-table .divcontato .labelgeral {
display:inline-block;
width:26%;
padding-left:5px;   
}

#div-table .labelgeral:after {
    content: ':';
    padding-right:5px;
	 
}

 
  
.divcontatox{
display:inline-table;
margin-top:10px;
padding-top:20px;
padding-left:10px;
padding-right:10px;
}  
  
.inputcontato, .inputcontatopq, .inputcontatoestado, .inputareatexto  :  -webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color:lightyellow;
    background-image: none;
    color:green;
} 

.inputcontato, .inputcontatopq, .inputcontatoestado, .inputareatexto : focus {
border-color:#FFFF00;


}
 

  
.inputcontato{
border:2px inset lightyellow;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:0.895rem;
height:1.2rem;
width:65%;
color:black;
font-weight:bold;
background-color:lightyellow;


}

.inputcontatopq{
border:2px inset lightyellow;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:0.895rem;
height:1.2rem;
width:40%;
color:black;
font-weight:bold;
background-color:lightyellow;

}

.inputcontatoestado{
border:2px inset lightyellow;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:0.895rem;
height:1.2rem;
width:10%;
color:black;
font-weight:bold;
background-color:lightyellow;

}

.inputareatexto{
margin:0px;
border:2px inset lightyellow;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:1rem;
color:black;
font-weight:bold;
background-color:lightyellow;
resize:none;
width:99%;
}





.pcontatol{
font-size:0.895rem;
padding:0;
text-align:left;
}

.pcontatoc{
font-size:0.895rem;
padding:30px;
text-align:center;
}

.pcontatod{
font-size:0.895rem;
padding:0;
text-align:right;
}

 








 .vh100{
height:100vh;
}

.ate {
    /* background: none; */
	display:table-cell;
	word-wrap:break-word;
	
     
}
   
 
   
.atc {
    /* background: none; */
    display: block;    
}

.atm {
    /* background: none; */ 
	display:table-cell;
	width:40%;
	word-wrap:normal; 	
}
    
    .atmgrande {
    /* background: none; */  
	display:table-cell;
    text-align:center;
	width:40%;
	word-wrap:normal; 	
}

.atmessage {
    /* background: none; */ 
	display:table-cell;
	width:40%;
	height:600px;
	word-wrap:normal; 	
}

.atmessagecurta {
    /* background: none; */ 
	display:table-cell;
	width:40%;

	word-wrap:normal; 	
}

.atconsulta {
    /* background: none; */ 
	display:table-cell;
	width:40%;
	
	word-wrap:normal; 	
}

.atcontato {
    /* background: none; */ 
	display:table-cell;
	text-align:center;
	word-wrap:normal;
		 	
}

     
article{
    display: flex;
    flex-direction: column;
/*  align-items: center;   */
 /* justify-content: center; */
 /* text-align: center; */ 
  /*  background-size:cover;
    background-repeat: no-repeat;
    background-attachment: fixed; todos os 3 alterados em 10-04-2022 */
	z-index:1;
/*  _______________________________________________________________________________ TESTE */

 /* background-color:#333; */
 /*    display:block; */
     padding:15px;     
/*  codigo abaixo tambem herdado pela classe  atc */
    -webkit-box-shadow:1px 1px 20px lightyellow;
    -moz-box-shadow:1px 1px 20px #888;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     border-radius: 5px;
  /*   background-color:#101010; tambem alterado em 10-04-2022 */	 
}

/*
article:first-of-type { 
   text-transform: uppercase;
    font-size: 1vw; 
}


article:nth-of-type(odd) { 
  color: #fff;  
  background-color: #000000;  
  text-shadow: 0 0 5px rgba(0,0,0,0.4); 
}

article:nth-of-type(even) { 
   color: #fff;  
   background-color: 333333; 
   text-shadow: 0 0 5px rgba(0,0,0,0.4); 
}

*/



article:nth-child(1) {



 /* background-image: url(imagens/rocket.gif); */
}


article:nth-child(2) { 

/* background-image: url(imagens/rainha2.jpg); */
}

article:nth-child(3) { 

/* background-image: url(imagens/1.jpg); */
}

article:nth-child(4) { 

/* background-image: url(imagens/rainha2.jpg); */
}

article:nth-child(5) { 

/*  background-image: url(imagens/dragon3.jpg); */
}


article:nth-child(7) {

/*  background-image: url(imagens/dragon.jpg); */
}

article:nth-child(9) { 

/*    background-image: url(imagens/imageshori.jpg); */
}


/* ________________________________________________________________________________________________________________________  */
  
article footer{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 2px;
}


article h1{
  font-size:1.125rem;
}


footer {
margin:auto;
background-image: linear-gradient(to right, black , yellow, black);
display:block;
/*background-color:#ffff00;   */
color:lightyellow;
text-align:center;
padding:5px;
/*   pro rodape ser redondo 
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
*/
width:100vw;
position:fixed;
bottom:0px;
}


footer h7 {
text-align:center;
color:black;
font-size:12px;
font-weight:bold;
}


footer h2 {
font-size:18px;
color:#E1F3FE;
background-image: linear-gradient(to right , gray, yellow, gray);
 /* pro titulo do rodape ser redondo*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}




figure { float :left;}
figure, figure img { width :500px; height:333px; overflow:hidden;}
figcaption{
padding:5px;
font-style:italic;
background:rgba(0,60,0,0.5);
color:#00FF00;
position:relative;
bottom:400px;
transition: 600ms all;
}

figure:hover figcaption{
bottom:340px;
}



/*      FLIPS     */


.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  border: 1px solid lightgreen;
}

.flip-container:hover .flipper,  
.flip-container.hover .flipper {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 427px;
}

.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	transition: 3s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.front {
	background: url(imagens/dragon.jpg) 0 0 no-repeat;
	z-index: 2;
}

.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	background: #F8F8F8;
}

.front .name {
	font-size: 2em;
	display: inline-block;
	background: rgba(33, 33, 33, 0.9);
	color: #f8f8f8;
	font-family: Courier;
	padding: 5px 10px;
	border-radius: 5px;
	bottom: 60px;
	left: 25%;
	position: absolute;
	text-shadow: 0.1em 0.1em 0.05em #333;

	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
	transform: rotate(-20deg);
}

.back-logo {
	position: absolute;
	top: 40px;
	left: 90px;
	width: 160px;
	height: 117px;
	background: url(imagens/e.png) 0 0 no-repeat;
}

.back-title {
	font-weight: bold;
	color:green;
	position: absolute;
	top: 180px;
	left: 0;
	right: 0;
	text-align: center;
	text-shadow: 0.1em 0.1em 0.05em #acd7e5;
	font-family: Courier;
	font-size: 2em;
}

.back p {
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 0;
	text-align: center;
	padding: 0 20px;
  font-family: arial;
  line-height: 2em;
}









}