/*
*   name           FavShowcase
*   version        1.4
*   description    Responsive and customizable Joomla!3 module
*   demo           http://extensions.favthemes.com/favshowcase
*   author         FavThemes
*   author URL     http://www.favthemes.com
*   copyright      Copyright (C) 2012-2018 FavThemes.com. All Rights Reserved.
*   license        Licensed under GNU/GPLv3, see http://www.gnu.org/licenses/gpl-3.0.html
*/

/*
////////////////////////////////////////////////////////////////////////////////

1. reset
2. layout
3. image
4. content
5. grid
5. layout effects

////////////////////////////////////////////////////////////////////////////////
*/

/*/
////////////////////////////////////////////////////////////////////////////////
///
///  favshowcase css
///
////////////////////////////////////////////////////////////////////////////////
/*/

/*//////////////////////////////////////////////////////////////////////////////

1. reset

//////////////////////////////////////////////////////////////////////////////*/

div[id^="favshowcase"] a,
div[id*=" favshowcase"] a,
div[id^="favshowcase"] a:hover,
div[id*=" favshowcase"] a:hover,
div[id^="favshowcase"] a:focus,
div[id*=" favshowcase"] a:focus {
  text-decoration: none!important;
}

/*//////////////////////////////////////////////////////////////////////////////

2. layout

//////////////////////////////////////////////////////////////////////////////*/

div[id^="favshowcase-box"],
div[id*=" favshowcase-box"] {
	margin-bottom: 21px;
  margin-top: 21px;
}

/*//////////////////////////////////////////////////////////////////////////////

3. image

//////////////////////////////////////////////////////////////////////////////*/

/*//////////////////////////////////////////////////////////////////////////////
///
///  image
///
//////////////////////////////////////////////////////////////////////////////*/

div[id^="favshowcase-image"],
div[id*=" favshowcase-image"] {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  padding-bottom: 0px;
}
div[id^="favshowcase-image"] img,
div[id*=" favshowcase-image"] img {
  width: 100%;
}

@media (max-width: 767px) {

  div[id^="favshowcase-image"],
  div[id*=" favshowcase-image"] {
    float: none!important;
    margin: 0 0 4% 0!important;
    width: 100%!important;
  }

}

/*//////////////////////////////////////////////////////////////////////////////
///
///  image float
///
//////////////////////////////////////////////////////////////////////////////*/

div[id^="favshowcase-image"].fav-right,
div[id*=" favshowcase-image"].fav-right {
  float: right;
  margin-left: 3%;
  text-align: right;
}
div[id^="favshowcase-image"].fav-left,
div[id*=" favshowcase-image"].fav-left {
  float: left;
  margin-right: 3%;
  text-align: left;
}

/*//////////////////////////////////////////////////////////////////////////////
///
///  image width
///
//////////////////////////////////////////////////////////////////////////////*/

div[id^="favshowcase-image"].fav-width1,
div[id*=" favshowcase-image"].fav-width1 {
  width: 30%;
}
div[id^="favshowcase-image"].fav-width2,
div[id*=" favshowcase-image"].fav-width2 {
  width: 40%;
}
div[id^="favshowcase-image"].fav-width3,
div[id*=" favshowcase-image"].fav-width3 {
  width: 50%;
}
div[id^="favshowcase-image"].fav-width4,
div[id*=" favshowcase-image"].fav-width4 {
  width: 60%;
}

/*//////////////////////////////////////////////////////////////////////////////
///
///  image style
///
//////////////////////////////////////////////////////////////////////////////*/

div[id^="favshowcase-image"] img,
div[id*=" favshowcase-image"] img {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* style 1 */

div[id^="favshowcase-image"].fav-imgstyle1 img,
div[id*=" favshowcase-image"].fav-imgstyle1 img {
  border: 1px solid #DDD;
}

/* style 2 */

div[id^="favshowcase-image"].fav-imgstyle2 img,
div[id*=" favshowcase-image"].fav-imgstyle2 img {
  padding: 7px;
  background-color: #f2f2f2;
  border: 1px solid #e2e2e2;
}

/* style 3 */

div[id^="favshowcase-image"].fav-imgstyle3,
div[id*=" favshowcase-image"].fav-imgstyle3 {
  -webkit-box-shadow: 0px 0px 7px 0px rgba(34,34,34,0.4);
  -moz-box-shadow: 0px 0px 7px 0px rgba(34,34,34,0.4);
  box-shadow: 0px 0px 7px 0px rgba(34,34,34,0.4);
}
div[id^="favshowcase-image"].fav-imgstyle3.fav-left,
div[id*=" favshowcase-image"].fav-imgstyle3.fav-left {
  margin-left: 7px;
}
div[id^="favshowcase-image"].fav-imgstyle3.fav-right,
div[id*=" favshowcase-image"].fav-imgstyle3.fav-right {
  margin-right: 7px;
}

/*//////////////////////////////////////////////////////////////////////////////

4. content

//////////////////////////////////////////////////////////////////////////////*/

/*//////////////////////////////////////////////////////////////////////////////
///
///  title
///
//////////////////////////////////////////////////////////////////////////////*/

h3[id^="favshowcase-title"],
h3[id*=" favshowcase-title"],
h3[id^="favshowcase-title"],
h3[id*=" favshowcase-title"] {
  margin: 2% 0;
  font-weight: normal;
  border: none !important;
  padding: 0 !important;
  text-shadow: none;
}
h3[id^="favshowcase-title"] a:hover,
h3[id*=" favshowcase-title"] a:hover,
h3[id^="favshowcase-title"] a:focus,
h3[id*=" favshowcase-title"] a:focus {
  background-color: transparent!important;
}

@media (max-width: 991px) {

  h3[id^="favshowcase-title"],
  h3[id*=" favshowcase-title"],
  h3[id^="favshowcase-title"],
  h3[id*=" favshowcase-title"] {
    margin-top: 1.4% !important;
  }

}

/*//////////////////////////////////////////////////////////////////////////////
///
///  description text
///
//////////////////////////////////////////////////////////////////////////////*/

div[id^="favshowcase-description"] p,
div[id*=" favshowcase-description"] p {
  margin-bottom: 2%;
}

/*//////////////////////////////////////////////////////////////////////////////
///
///  read more
///
//////////////////////////////////////////////////////////////////////////////*/

div[id^="favshowcase-readmore"],
div[id*=" favshowcase-readmore"] {
  margin-top: 2.4%;
}
div[id^="favshowcase-readmore"] a.btn,
div[id*=" favshowcase-readmore"] a.btn {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.42857143;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  box-shadow: none;
  text-shadow: none;
  border-radius: 0;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
div[id^="favshowcase-readmore"] a.btn:hover,
div[id*=" favshowcase-readmore"] a.btn:hover,
div[id^="favshowcase-readmore"] a.btn:focus,
div[id*=" favshowcase-readmore"] a.btn:focus {
  text-decoration: none;
}
div[id^="favshowcase-readmore"] i,
div[id*=" favshowcase-readmore"] i {
  padding-left: 14px;
  padding-right: 0;
  float: right;
  line-height: 1.24;
  font-size: 16px;
}

/*/// tablet ///*/
@media (max-width: 991px) {

  div[id^="favshowcase-readmore"],
  div[id*=" favshowcase-readmore"] {
    float: left;
    clear: both;
    margin-top: 3%;
    margin-bottom: 3%;
  }

}

/*//////////////////////////////////////////////////////////////////////////////

5. layout effects

//////////////////////////////////////////////////////////////////////////////*/

/*/
///
///  js classes
///
/*/

.favhide { opacity:0; }
.favshow { opacity:1; }

/*/
///
///  no layout effect
///
/*/

.layout-effect-none {
   -webkit-animation: none;
   -moz-animation: none;
   -o-animation: none;
   -ms-animation: none;
   animation: none;
}

/*/
///
///  layout effect 1
///
/*/

.layout-effect1 {
  -webkit-animation-name: layout-effect1;
  -moz-animation-name: layout-effect1;
  animation-name: layout-effect1;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes layout-effect1 {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}

@-moz-keyframes layout-effect1 {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}

@keyframes layout-effect1 {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

}

/*/
///
///  layout effect 2
///
/*/

.layout-effect2 {
  -webkit-animation-name: layout-effect2;
  -moz-animation-name: layout-effect2;
  animation-name: layout-effect2;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes layout-effect2 {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

}

@-moz-keyframes layout-effect2 {

  0% {
    opacity: 0;
    -moz-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -moz-transform: none;
    transform: none;
  }

}

@keyframes layout-effect2 {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: translate3d(0, -100%, 0);
    transform: none;
  }

}

/*/
///
///  layout effect 3
///
/*/

.layout-effect3 {
  -webkit-animation-name: layout-effect3;
  -moz-animation-name: layout-effect3;
  animation-name: layout-effect3;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes layout-effect3 {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

}

@-moz-keyframes layout-effect3 {

  0% {
    opacity: 0;
    -moz-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
  }

  100% {
    opacity: 1;
    -moz-transform: none;
    transform: none;
  }

}

@keyframes layout-effect3 {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-25%, 0, 0);
    -moz-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }

}

/*/
///
///  layout effect 4
///
/*/

.layout-effect4 {
  -webkit-animation-name: layout-effect4;
  -moz-animation-name: layout-effect4;
  animation-name: layout-effect4;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes layout-effect4 {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(25%, 0, 0);
    transform: translate3d(25%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

}

@-moz-keyframes layout-effect4 {

  0% {
    opacity: 0;
    -moz-transform: translate3d(25%, 0, 0);
    transform: translate3d(25%, 0, 0);
  }

  100% {
    opacity: 1;
    -moz-transform: none;
    transform: none;
  }

}


@keyframes layout-effect4 {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(25%, 0, 0);
    -moz-transform: translate3d(25%, 0, 0);
    transform: translate3d(25%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }

}

/*/
///
///  layout effect 5
///
/*/

.layout-effect5 {
  -webkit-animation-name: layout-effect5;
  -moz-animation-name: layout-effect5;
  animation-name: layout-effect5;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes layout-effect5 {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

}

@-moz-keyframes layout-effect5 {

  0% {
    opacity: 0;
    -moz-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -moz-transform: none;
    transform: none;
  }

}

@keyframes layout-effect5 {

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }

}

/*/
///
///  layout effect 6
///
/*/

.layout-effect6 {
  -webkit-animation-name: layout-effect6;
  -moz-animation-name: layout-effect6;
  animation-name: layout-effect6;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes layout-effect6 {

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }

}

@-moz-keyframes layout-effect6 {

  0% {
    opacity: 0;
    -moz-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }

}

@keyframes layout-effect6 {

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -moz-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }

}

/*/
///
///  layout effect 7
///
/*/

.layout-effect7 {
  -webkit-animation-name: layout-effect7;
  -moz-animation-name: layout-effect7;
  animation-name: layout-effect7;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes layout-effect7 {

  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

}

@-moz-keyframes layout-effect7 {

  0% {
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -moz-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -moz-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -moz-transform: perspective(400px);
    transform: perspective(400px);
  }

}

@keyframes layout-effect7 {

  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px);
    transform: perspective(400px);
  }

}

/*/
///
///  layout effect 8
///
/*/

.layout-effect8 {
  -webkit-animation-name: layout-effect8;
  -moz-animation-name: layout-effect8;
  animation-name: layout-effect8;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes layout-effect8 {

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }

}

@keyframes layout-effect8 {

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }

}