/* CSS Document */


/* Estilo link Igreja padrão */

	
#linkb a {
	text-decoration: none; color: #5858FA; font-size: 300%; 
    position: relative; float: left; margin-left: 10%;
}

#linkb a:hover  {
	text-decoration: none; color: #DF013A; font-size: 350%; 
}

/* Estilo link Igreja com media querie */

@media screen and (max-width: 450px) {
	#linkb a {
		text-decoration: none; color: #5858FA; position: relative; 
		margin-left: 20%; font-size: 200%; float: left;
	} 

	#linkb a:hover {
		text-decoration: none; color: #DF013A; font-size: 250%; 
	}
}

@media screen and (min-width: 451px) and (max-width: 495px) {
	#linkb a {
		text-decoration: none; color: #5858FA; position: relative; 
		margin-left: 20%; font-size: 220%; float: left;
	} 

	#linkb a:hover {
		text-decoration: none; color: #DF013A; font-size: 270%; 
	}
}

/* Estilo link Catequese padrão */

#linkc a {
	text-decoration: none; color: #5858FA; font-size: 300%;
	position: relative; float: right; margin-right: 10%;
}

#linkc a:hover {
	text-decoration: none; color: #DF013A; font-size: 350%;
}

/* Estilo link Catequese com media querie */

@media screen and (max-width: 450px) {
	#linkc a {
		text-decoration: none; color: #5858FA;
	    position: relative; clear: left; float: right; margin-right: 20%; font-size: 200%; 
	} 

	#linkc a:hover {
		text-decoration: none; color: #DF013A; font-size: 250%;
	}


}

@media screen and (min-width: 451px) and (max-width: 495px) {
	#linkc a {
		text-decoration: none; color: #5858FA;
	    position: relative; clear: left; float: right; margin-right: 20%; font-size: 220%; 
	} 

	#linkc a:hover {
		text-decoration: none; color: #DF013A; font-size: 270%;
	}


}

/* Estilo link RCC padrão */

#linkd a {
	text-decoration: none; color: #5858FA; font-size: 300%; 
    position: relative; float: left; margin-left: 10%;  
}

#linkd a:hover  {
	text-decoration: none; color: #DF013A; font-size: 350%; 
}

/* Estilo link RCC com media querie */

@media screen and (max-width: 450px) {
	#linkd a {
		text-decoration: none; color: #5858FA; position: relative; 
		margin-left: 20%; font-size: 200%; clear: right; float: left;
	} 

	#linkd a:hover {
		text-decoration: none; color: #DF013A; font-size: 250%; 
	}
}

@media screen and (min-width: 451px) and (max-width: 495px) {
	#linkd a {
		text-decoration: none; color: #5858FA; position: relative; 
		margin-left: 20%; font-size: 220%; clear: right; float: left;
	} 

	#linkd a:hover {
		text-decoration: none; color: #DF013A; font-size: 270%; 
	}
}

/* Liturgia CN padrão */

#linka a  {
	text-decoration: none; color: #5858FA;
	    position: relative; float: right; margin-right: 10%; font-size: 300%; 
}

#linka a:hover  {
	text-decoration: none; color: #DF013A; font-size: 350%;  
}

/* Liturgia CN com Media querie */

@media screen and (max-width: 450px) {
	#linka a {
		text-decoration: none; color: #5858FA;
	    position: relative; float: right; margin-right: 20%; font-size: 200%;
	} 

	#linka a:hover {
		text-decoration: none; color: #DF013A; font-size: 250%; 
	}
}

@media screen and (min-width: 451px) and (max-width: 495px) {
	#linka a {
		text-decoration: none; color: #5858FA;
	    position: relative; float: right; margin-right: 20%; font-size: 220%;
	} 

	#linka a:hover {
		text-decoration: none; color: #DF013A; font-size: 270%; 
	}
}

/* Orações padrão */


#linke a {
	text-decoration: none; color: #5858FA; font-size: 300%;
	position: relative; text-align: center; 
}

#linke a:hover {
	text-decoration: none; color: #DF013A; font-size: 350%;  
}

/* Orações com Media Querie */ 

@media screen and (max-width: 450px) {
	#linke a {
	text-decoration: none; color: #5858FA; font-size: 200%;
	position: relative; text-align: center; 
}

#linke a:hover {
	text-decoration: none; color: #DF013A; font-size: 250%;  
}

}

@media screen and (min-width: 451px) and (max-width: 495px) {
	#linke a {
	text-decoration: none; color: #5858FA; font-size: 220%;
	position: relative; text-align: center; 
}

#linke a:hover {
	text-decoration: none; color: #DF013A; font-size: 270%;  
}

}


#linkp a {
	text-decoration: none; color: #800000; position: relative; font-size: 120%;
}

#linkp a:hover  {
    text-decoration: none; color: #ADD8E6; font-size: 150%; 
}


#linkp a {
	text-decoration: none; color: #800000; position: relative; font-size: 120%; display: block; 
}

#linkp a:hover  {
    text-decoration: none; color: #ADD8E6; font-size: 150%; display: block; 
}	



/* Efeito de animação flipping - site maujor.com - modo padrão*/

/* O container geral define a perspectiva */  
.flip-container { perspective: 1000;}  	

/* vira os containers frente e verso quando o mouse passa em cima */
.flip-container:hover .flipper, .flip-container.hover .flipper {  		
  transform: rotateY(180deg);  	
}    
.flip-container, .front, .back {  	
  width: 320px;  	
  height: 480px;  
}

/* define a velocidade da transição */
.flipper {  	
  transition: 0.6s;  	
  transform-style: preserve-3d;    	
  position: relative; 
  bottom: -5%;
   }
    
/* esconde o verso durante a animação */
.front, .back {  	
  backface-visibility: hidden;    	
  position: relative;  	
  top: 0;  	
 left: 0;  
}
    
/* frente posicionada sobre o verso */
.front { z-index: 2; }    

/* verso inicialmente escondido */
.back { transform: rotateY(180deg); }

/* Ajuste mediaquerie */

@media screen and (max-width: 631px) and (min-width: 529px) {
 
 .flip-container:hover .flipper, .flip-container.hover .flipper {  		
  transform: rotateY(180deg);  	
}    
.flip-container, .front, .back {  	
  width: 320px;  	
  height: 480px;  
}  

   .flipper {  	
  transition: 0.6s;  	
  transform-style: preserve-3d;    	
  position: relative; 
  bottom: -200%;
   }
	
/* esconde o verso durante a animação */
.front, .back {  	
  backface-visibility: hidden;    	
  position: absolute;  	
  top: 0;  	
 left: 0;  
}
    
/* frente posicionada sobre o verso */
.front { z-index: 2; }    

/* verso inicialmente escondido */
.back { transform: rotateY(180deg); }
}