/**
 * @version 		$Id:$
 * @name			Album (Release 1.0.0)
 * @author			 ()
 * @package			com_album
 * @subpackage		com_album.site
 * @copyright		
 * @license			GNU General Public License version 3 or later; See http://www.gnu.org/copyleft/gpl.html 
 * 
 * The following Component Architect header section must remain in any distribution of this file
 *
 * 
 */
/*#################### gallery responsive ############################ */

@media only screen and (min-width: 1401px) and (max-width: 1699px) {
div.album-text div.category-name div.category-name a {
margin-bottom:65px !important ;
}
}

@media only screen and (min-width: 1201px) and (max-width: 1400px) {
div.albumgrid div.album-text h2.name{
font-size:36px;
margin-top:7%;
text-align:center;
}

div.album-text div.category-name div.category-name a {
font-size:13px;
margin-top:10px;
margin-bottom:10px !important;
text-align:center;
}

.albumgrid p {
text-align:center;
line-height:24px;
} 

div.album-text div.read-more  {
text-align:center ;
width:100%;
margin-top:20px;
margin-bottom:20px;
}

.button--bestia span a{
padding:8px; 
mix-blend-mode: difference;
}  

}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {
div.albumgrid div.album-text h2.name{
font-size:33px;
margin-top:7%;
text-align:center;
}

div.album-text div.category-name div.category-name a {
font-size:13px;
margin-top:10px;
margin-bottom:5px !important ;
text-align:center;
}

.albumgrid p {
text-align:center;
line-height:22px;
} 

div.album-text div.read-more  {
text-align:center ;
width:100%;
margin-top:10px;
margin-bottom:20px;
}

.button--bestia span a{
padding:8px; 
mix-blend-mode: difference;
}  


}



@media only screen and (min-width: 901px) and (max-width: 1024px) {
div.albumgrid div.album-text h2.name{
font-size:30px;
margin-top:4%;
text-align:center;
}

div.album-text div.category-name div.category-name a {
font-size:13px;
margin-top:10px;
margin-bottom:5px !important;
text-align:center;
}

.albumgrid p {
text-align:center;
line-height:22px;
} 

div.album-text div.read-more  {
text-align:center ;
width:100%;
margin-top:10px;
margin-bottom:20px;
}

.button--bestia span a{
padding:8px; 
mix-blend-mode: difference;
}  

}




@media only screen and (min-width: 0px) and (max-width: 900px) {
.column-1 .album-image {
float:left; 
width: 100%;
height:100%;
overflow: hidden;
text-decoration: none;
background-size:cover ;
margin:0 ;
padding:0 ;
}

.column-1 .album-text {
float:left; 
width: 100%;
height:100%;
overflow: hidden;
text-decoration: none;
background-size:cover ;
margin:0 ;
padding:0 ;
}

.column-2 .album-image {
float:left; 
width: 100%;
height:100%;
overflow: hidden;
text-decoration: none;
background-size:cover ;
margin:0 ;
padding:0 ;
}

.column-2 .album-text {
float:left; 
width: 100%;
height:100%;
overflow: hidden;
text-decoration: none;
background-size:cover ;
margin:0 ;
padding:0 ;
}

div.albumgrid div.album-text h2.name{
font-size:35px;
margin-top:8%;
text-align:center;
}

div.album-text div.category-name div.category-name a {
font-size:13px;
margin-top:10px;
margin-bottom:35px ;
text-align:center;
}

.albumgrid p {
text-align:center;
line-height:20px;
} 

div.album-text div.read-more  {
text-align:center ;
width:100%;
margin-top:20px;
margin-bottom:30px;
}

.button--bestia span a{
padding:8px; 
mix-blend-mode: difference;
}  

} 

@media only screen and (min-width: 0px) and (max-width: 600px) {
.effect-apollo a:hover figcaption i  {
top:20%;
left:50%;
font-size:25px;

}
}

@media only screen and (min-width: 601px) and (max-width: 800px) {
.effect-apollo a:hover figcaption i  {
top:22%;
left:50%;
font-size:25px;

}
}

@media only screen and (min-width: 801px) and (max-width: 900px) {
.effect-apollo a:hover figcaption i  {
top:25%;
left:50%;
font-size:25px;
}
}

@media only screen and (min-width: 901px) and (max-width: 1024px) {
.effect-apollo a:hover figcaption i  {
top:45%;
left:25%;
font-size:25px;
}

.column-2 .effect-apollo a:hover figcaption i {
top:45%;
left:75% !important;
}
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {
.effect-apollo a:hover figcaption i  {
top:47%;
left:25%;
font-size:25px;
}

.column-2 .effect-apollo a:hover figcaption i {
top:47%;
left:75% !important;
}
}

@media only screen and (min-width: 1021px) and (max-width: 1400px) {
.effect-apollo a:hover figcaption i  {
top:47%;
left:25%;
font-size:25px;
}

.column-2 .effect-apollo a:hover figcaption i {
top:47%;
left:75% !important;
}
}