/**
 * @version 		$Id:$
 * @name			GalleryImagePro (Release 1.0.0)
 * @author			 ()
 * @package			com_galleryimagepro
 * @subpackage		com_galleryimagepro.site
 * @copyright		
 * @license			GNU General Public License version 3 or later; See http://www.gnu.org/copyleft/gpl.html 
 * 

/*#################### CSS GALERY ############################ */

/* .items-leading{
 display:none !important; 
} */

div.album{
float:left;
width:100%;
margin: 40px 0 60px 0 !important;
padding:5% 0 !important;
}

 .item-separator {
height:30px;
}  

.clr {
clear:both;
}

div.container_12 .grid_12 div.album {
width:100% !important;
padding:0  !important;
margin: 0 !important;
}

 .grid_12 div.album {
width:100% !important;
padding:0  !important;
margin:0 !important;
}

/*######################################################## */
/*############### 1 COLONNE  LEFT  ####################### */
/*######################################################## */
div.large_12 {
float:left ;
width:100%;
margin:0 ;
padding:0 ;
background-size:cover ;
}

/*######################################################## */
/*############### 2 COLONNES LEFT / RIGHT ################ */
/*######################################################## */
div.large_6 div.items.column-0 {
float:left ;
width:48.5%;
margin:0 ;
padding:0 ;
background-size:cover ;
}

div.large_6 div.items.column-1 {
float:left ; 
width:100%;
margin:0 ;
padding:0 ;
background-size:cover ;
} 

div.large_6 div.items.column-2 {
float:right ; 
width:100%;
margin:0 ;
padding:0 ;
background-size:cover ;
} 

 div.large_6  h2{
font-weight: 900;
font-size:30px;
}

 div.large_6 p {
width:70%;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:15px;
margin-bottom:15px;
font-size:14px;
} 

div.galleryimagepro.images-blog div.large_6 div.item-separator {
height:50px ;
}

/*######################################################## */
/*#################### SETTING ########################### */
/*######################################################## */

div.pp_pic_holder.light_square div.ppt {
display:none !important;
}

.albumgrid {
display: block;
float:none;  
position: relative; 
width: 100%;
height:100%;
overflow: hidden; 
text-decoration: none;
background-size:cover ; 
margin: 0 ;
padding:0 ; 
} 

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

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

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

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

.albumgrid img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 1;
margin:0 ;
padding:0 ;
background-size:cover ; 
}  

div.albumgrid div.album-text h2.name{
font-weight: 900;
text-transform:uppercase;
font-size:65px;
margin-top:8%;
}

div.album-text div.category-name div.category-name a {
font-size:14px;
margin-top:5px;
margin-bottom:95px ;
text-transform:capitalize;
display:block;
font-weight:100;
letter-spacing:1px;
}

.albumgrid p {
text-align:center;
line-height:35px;
padding-left:20px;
padding-right:20px;
} 

/*button red more */
div.album-text div.read-more  {
position:relative;
text-align:center ;
width:100%;
margin-top:50px;
text-transform:capitalize;
}

div.album-text div.read-more a  {
text-align:center ;
text-transform:capitalize;
font-weight:100;
font-size:14px ;
margin:0;
letter-spacing:1px;
}

div.album-text div.read-more button {
position:relative;
background:transparent;
text-align:center ;
}

.button--bestia a {
font-size: 1rem;
color: #fff;
background:#000;
}
 
.button--bestia .button__bg {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
border:1px solid #fff;
} 

.button--bestia:hover .button__bg {
transform: scale3d(1.2,1.2,1);
} 

.button--bestia .button__bg::before,
.button--bestia .button__bg::after {
content: '';
position: absolute;
background: #fff;	
}

.button--bestia .button__bg::before {
width: 110%;
height: 0;
padding-bottom: 110%;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate3d(-50%,-50%,0) scale3d(0,0,1);
}

.button--bestia:hover .button__bg::before {
transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
}

.button--bestia .button__bg::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s;
}

.button--bestia:hover .button__bg::after {
opacity: 1;
transition-duration: 0.01s;
transition-delay: 0.3s;
}

.button--bestia span a{
display: block;
position: relative;
padding:15px; 
mix-blend-mode: difference;
}  


/****PAGINATION *****/
.navigation-wrapper {
float:left; 
/* background:red ; */
display:block;
width:100%;
padding-top:40px;
}

p.counter {
margin-bottom:0 !important;
text-align:center !important;
}

div.pagination-wrapper {
margin-top:0 !important;
text-align:center !important;
}




 /*######################################################## */
 /*#################### EFFECT ############################ */
 /*######################################################## */
 
/*--------APOLLO-------*/
.effect-apollo {
background: #000;

}

.effect-apollo img {
position:relative;
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(1.05,1.05,1);
transform: scale3d(1.05,1.05,1);
}

.effect-apollo figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 .effect-apollo figcaption  i  {
opacity: 0;
position:absolute;
font-size:30px;
-webkit-transition: opacity 0.35s;
transition: opacity 0; 
}

.effect-apollo a:hover figcaption i  {
opacity: 1;
position:absolute;
top:50%;
font-size:40px;
-webkit-transition: opacity 0.35s;
color:#fff;
}
 
.effect-apollo:hover img {
opacity: 0.2;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}