/*
Plugin Name: Wordpress Portfolio Boxes
Plugin URI:  https://www.yydevelopment.com/yydevelopment-wordpress-plugins/
Description: Simple plugin that will allow to to create boxes portfolios in wordpress
Version:     1.0
Author:      YYDevelopment   
Author URI:  https://www.yydevelopment.com/
*/

/*================================
=============== Portfolio Box
==================================*/

.hide-portfolio-box {
 display: none !important;
}

.yydev_portfolio {
   margin: 20px auto 20px;
   width: 100%;
   text-align: center;
   font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
   letter-spacing: 0px;
}

.yydev_portfolio .wordpress_potrfolio-boxes {
   max-width: 300px;
   display: inline-block;
   background: #fff;
   margin: 0px 15px 20px 0px;
   vertical-align: top;
   border: 1px solid #a6a6a6;
   background: #5c5c5c;
   position: relative; 
}

.yydev_portfolio .wordpress_potrfolio-boxes .box-image {
   position: relative;
   overflow: hidden;
}

.yydev_portfolio .wordpress_potrfolio-boxes .box-image img {
   width: 100%;
   margin: 0px;
   padding: 0px;
   display: block;
   border: none;
}

.yydev_portfolio .wordpress_potrfolio-boxes .box-image a img { 
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

.yydev_portfolio .wordpress_potrfolio-boxes .box-image:hover a img { 
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}

.yydev_portfolio .wordpress_potrfolio-boxes .mask {
   background: #c17a1e;
   background: rgba(193, 122, 30, 0.8);
   display: block;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: absolute;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}

.yydev_portfolio .wordpress_potrfolio-boxes .mask:hover {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

.yydev_portfolio .wordpress_potrfolio-boxes .mask a {
   width: 100%;
   height: 100%;
   display: block;
   background: url(../images/search-icon.png) center center no-repeat;
}

.yydev_portfolio .wordpress_potrfolio-boxes .mask:hover a {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}

.yydev_portfolio .wordpress_potrfolio-boxes .box-text-info {
   padding: 0px;
   margin: 0px;
}

a.portfolio-edit-works-button {
   text-align: center;
   margin: 10px auto 10px;
   padding: 7px 5px 7px 5px;
   margin-bottom: 10px;
   max-width: 80%;
   border: 1px solid #e2e2e2;
   color: #55b9ff;
   display: block;
   font-weight: bold;
}

/*------ Portoflio Pagination -------- */


.yydev_portfolio .pages {
 text-align: center;
 margin: 0px 0px 20px 0px;
}

.yydev_portfolio .bottom-pagination {
 text-align: center;
 margin: 5px 0px 0px 0px;
}

.yydev_portfolio .pages p {
 display: inline;
 font-size: 16px;
 color: #696a6c;
 font-weight: bold;
 vertical-align: -6px;
}

.yydev_portfolio .pages a {
 font-size: 14px;
 font-weight: normal;
 color: #626262;
 text-decoration: none;
 padding: 6px 13px;
 border: 1px solid #bdbdbd;
 margin: 8px 2px 8px 2px;
 line-height: 18px;
 white-space: nowrap;
 display: inline-block;
}

.yydev_portfolio .pages a:hover {
 background: #8a8a8a;
 color: #fff;
}

.yydev_portfolio .pages a.selected {
 background: #8a8a8a;
 color: #fff;
}


/*================================
=============== Mobile
==================================*/

@media only screen and (max-width: 768px) {

   /*------ Portoflio Boxes -------- */
   
   .yydev_portfolio .wordpress_potrfolio-boxes {
      max-width: 100%;
   }

}