/*------------Responsive Columns CSS----------------------*/
.tc_full_column {
  width: 98%;
  padding: 0px;
  margin: 0 auto;
}
.tc_column_1,
.tc_column_2,
.tc_column_3,
.tc_column_4,
.tc_column_5,
.tc_column_6 {
  display: inline-block;
}
.tc_column_1 {
  width: 99%;
  margin: 0 0 30px 0;
}
.tc_column_2 {
  width: 46%;
  margin: 1.5%;
}
.tc_column_3 {
  width: 31%;
  margin: 1%;
}
.tc_column_4 {
  width: 22.5%;
  margin: 1%;
}
.tc_column_5 {
  width: 18%;
  margin: 1%;
}
.tc_column_6 {
  width: 15%;
  margin: 0.8%;
}
.extension_icon,
.extension_box {
  display: inline-block;
  vertical-align: top;
}
.extension_single {
  background: #eee;
  padding: 15px;
  border: 1px solid #d1d3d7;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.07);
  vertical-align: top;
}
.extension_single:hover {
  border: 1px solid transparent;
}
.extension_single .extension_icon {
  width: 30%;
  margin-right: 3%;
}
.extension_single .extension_icon img {
  max-width: 100%;
}
.extension_single .extension_box {
  width: 65%;
}
.extension_single .extension_box h2 {
  margin-top: 0;
  font-size: 20px;
}
.extension_single .extension_box h2 a {
  color: #000;
}
@media only screen and (max-width: 650px) {
  /*--------------------------- Smartphone view: 1 tile maximum----------------------- */
  .tc_column_1,
  .tc_column_2,
  .tc_column_3,
  .tc_column_4,
  .tc_column_5,
  .tc_column_6 {
    width: 99%;
    margin: 0 0 20px 0;
  }
}
@media only screen and (max-width: 1050px) and (min-width: 651px) {
  /* -------------------Small desktop / ipad view: 4 tiles ---------------------------*/
  .tc_column_1,
  .tc_column_2,
  .tc_column_3,
  .tc_column_4,
  .tc_column_5,
  .tc_column_6 {
    width: 45%;
    margin: 2.5%;
  }
}
h1.extension_title {
  text-align: center;
}
.header_text {
  margin: 30px 0;
}
/****************************************Extension category page*********************************************************/
.extension_info_icon {
  overflow: hidden;
}
.extension_info_icon span {
  display: inline-block;
  float: none;
  line-height: 1;
  height: 20px;
}
.extension_info_icon span.module,
.extension_info_icon span.plugin,
.extension_info_icon span.component,
.extension_info_icon span.joomla,
.extension_info_icon span.joomla25,
.extension_info_icon span.joomla3,
.extension_info_icon span.free,
.extension_info_icon span.paid,
.extension_info_icon span.language,
.extension_info_icon span.template {
  margin: 0 4px 0 0;
}
.extension_info_icon span:before {
  border-radius: 1px;
  color: #ffffff;
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 5px 4px;
  text-transform: uppercase;
}
.extension_info_icon span.joomla {
  background: url("../images/joomla-small-icon.png") no-repeat center center #2b85c1;
  border-radius: 1px;
  height: 20px;
  width: 18px;
}
.extension_info_icon span.component:before {
  background-color: #27ae60;
  content: "C";
}
.extension_info_icon span.module:before {
  background-color: #e62c2c;
  content: "M";
}
.extension_info_icon span.plugin:before {
  background-color: #6e48c8;
  content: "P";
}
.extension_info_icon span.template:before {
  background-color: #0E3252;
  content: "T";
}
.extension_info_icon span.language:before {
  background-color: #E20079;
  content: "L";
}
.extension_info_icon span.free:before {
  background-color: #27ae60;
  content: "Free";
}
.extension_info_icon span.paid:before {
  background-color: #27ae60;
  content: "Commercial";
}
.extension_info_icon span.joomla25:before {
  background-color: #5091cd;
  content: "J4.x";
}
.extension_info_icon span.joomla3:before {
  background-color: #c59230;
  content: "J3.x";
}
/* Hover after effect */
.tc-extension_effect {
  -webkit-transform: translateZ(1);
  transform: translateZ(1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 5s;
  transition-duration: 5s;
}
.tc-extension_effect:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 5s;
  transition-duration: 5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  opacity: 0;
}
.tc-extension_effect:hover:before,
.tc-extension_effect:focus:before,
.tc-extension_effect:active:before {
  -webkit-transform: scale(2);
  transform: scale(2);
  opacity: 1;
}
.hover_after {
  text-align: center;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 1 0;
  transition: all 0.7s;
  width: 100%;
  position: absolute;
}
.tc-extension_effect:hover .hover_after {
  opacity: 1;
  transform: scaleY(1);
}
.hover_after ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hover_after ul li {
  display: inline-block;
}
.hover_after ul li a {
  display: block;
  padding: 5px 20px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.7s ease .7s;
  margin-right: 10px;
}
.hover_after ul li.demo a {
  background: #6e48c8;
}
.hover_after ul li.more a {
  background: #c59230;
}
.hover_after ul li a:hover {
  color: #000000;
  background: #ffffff;
}
/*=============================================
=            Extension Details           =
=============================================*/
.margin-left-none {
  margin-left: 0;
}
.quick_info.extension_single {
  background: #f5f5f5 none repeat scroll 0 0;
  border: 1px solid #dde4e6;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
  font-size: 12px;
  margin-bottom: 24px;
  padding: 15px;
  transition: all 0.4s ease .4s;
}
.quick_info.extension_single > .tc_column_2 {
  vertical-align: top;
}
.quick_info.extension_single > .tc_column_2 > h3 {
  margin-top: 0;
  line-height: 25px;
}
.quick_info.extension_single > .tc_column_2 ul {
  margin-left: 0;
  padding-left: 0;
}
.quick_info.extension_single > .tc_column_2 ul li {
  list-style: none;
  border-top: 1px solid #e5e5e5;
  padding: 10px 0;
}
.quick_info.extension_single > .tc_column_2 ul li strong {
  min-width: 130px;
  display: inline-block;
}
.quick_info.extension_single .tc_column_2.links {
  vertical-align: top;
}
.quick_info.extension_single .tc_column_2.links .btn {
  display: block;
  font-size: 16px;
  margin: 0 0 12px;
  padding: 12px 20px;
  text-align: left;
}
.quick_info.extension_single:hover {
  border: 1px solid #dde4e6;
  background: #fff;
}
.description_box {
  background: #f5f5f5 none repeat scroll 0 0;
  border: 1px solid #dde4e6;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
  font-size: 14px;
  margin-bottom: 24px;
  padding: 15px;
  transition: all 0.4s ease .4s;
}
.description_box:hover {
  background: #fff;
}
.right_slidebar {
  vertical-align: top;
}
.right_slidebar .owl-dots .owl-dot {
  display: inline-block;
  text-align: center;
  width: 8px;
  padding: 6px;
  background: #33b5e5;
  margin: 5px;
  overflow:hidden;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  border-radius:50px;
}
.right_slidebar .owl-dots .owl-dot:hover {
  background: #145889;
}
.right_slidebar .owl-dots .owl-dot.active {
  background: #145889;
}
/*=====  End of  Extension Details      ======*/
/* Styles for dialog window */
#small-dialog,
#full-feature {
  background: white;
  text-align: left;
  max-width: 800px;
  margin: 0px auto;
  position: relative;
  z-index: 999999;
}
#small-dialog h2,
#full-feature h2 {
  margin-top: 0;
}
.top_bg {
  background: #eee;
  padding: 10px 20px 10px 10px;
  width: 100%;
}
.popup_content {
  position: relative;
  background: #fff;
  height: 400px;
  overflow-y: auto;
  padding: 10px;
}
.bottom_bg {
  background: #eee;
  padding: 10px;
  width: 100%;
  display: inline-block;
  margin-bottom: 0;
}
.bottom_bg button {
  float: right;
  margin-bottom: 0;
}
/**
 * Fade-zoom animation for first dialog
 */
/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}
/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0;
}
/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}
/**
 * Fade-move animation for second dialog
 */
/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
  opacity: 0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg);
  -moz-transform: translateY(-20px) perspective(600px) rotateX(10deg);
  -ms-transform: translateY(-20px) perspective(600px) rotateX(10deg);
  -o-transform: translateY(-20px) perspective(600px) rotateX(10deg);
  transform: translateY(-20px) perspective(600px) rotateX(10deg);
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
  opacity: 1;
  -webkit-transform: translateY(0) perspective(600px) rotateX(0);
  -moz-transform: translateY(0) perspective(600px) rotateX(0);
  -ms-transform: translateY(0) perspective(600px) rotateX(0);
  -o-transform: translateY(0) perspective(600px) rotateX(0);
  transform: translateY(0) perspective(600px) rotateX(0);
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
  opacity: 0;
  -webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg);
  -moz-transform: translateY(-10px) perspective(600px) rotateX(10deg);
  -ms-transform: translateY(-10px) perspective(600px) rotateX(10deg);
  -o-transform: translateY(-10px) perspective(600px) rotateX(10deg);
  transform: translateY(-10px) perspective(600px) rotateX(10deg);
}
/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
  opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
  opacity: 0;
}
.screenshots_slider .owl-controls .owl-prev {
  position: absolute;
  left: 15px !important;
  float: left;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px 8px 10px !important;
  display: block!important;
}
.screenshots_slider .owl-controls .owl-next {
  position: absolute;
  right: 15px !important;
  float: right;
  background: rgba(0, 0, 0, 0.8);
  padding: 10px 8px 10px !important;
  display: block !important;
}
.screenshots_slider .owl-controls .owl-dots {
  width: 100%;
}
.screenshots_slider .owl-prev,
.screenshots_slider .owl-next {
  position: absolute;
  top: 50%;
  margin-top: -50px;
  width: 46px;
  text-align: center;
  filter: alpha(opacity=50);
  /*IE7 fix*/
  opacity: 0.7;
  color: #fff;
  font-weight: bold;
}
.screenshots_slider .owl-prev:hover,
.owl-next:hover {
  filter: alpha(opacity=100);
  /*IE7 fix*/
  opacity: 1;
}
/*==================================
=            Pagination            =
==================================*/
.pagination.pagination-toolbar {
  width: 100%;
}
.pagination.pagination-toolbar .limit.pull-right {
  float: none !important;
}
.pagination.pagination-toolbar ul.pagination-list {
  margin-top: 10px;
}
.pagination.pagination-toolbar ul.pagination-list li {
  display: inline-block;
  padding: 2px 10px;
  margin: 5px;
  background: #c59230 ;
  color: #1a1a1a;
}
.pagination.pagination-toolbar ul.pagination-list li a {
  color: #1a1a1a;
}
.pagination.pagination-toolbar ul.pagination-list li:hover {
  background: #1a1a1a;
  color: #fff ;
}
.pagination.pagination-toolbar ul.pagination-list li:hover a {
  color: #fff ;
}
.pagination.pagination-toolbar ul.pagination-list li.active {
  background: #1a1a1a;
  color: #fff ;
}
.pagination.pagination-toolbar ul.pagination-list li.active span {
  color: #fff ;
}
.icon-step-backward:before {
  content: "\e206";
}
.icon-step-forward:before {
  content: "\e205";
}
/*=====  End of Pagination  ======*/
/*================================
=            Featured            =
================================*/
span.featured {
  display: block;
  font-size: 12px;
  font-weight: 700;
  height: 61px;
  left: -46px;
  line-height: 90px;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: -10px;
  transform: rotate(-45deg);
  transition: background-color 400ms ease 0s;
  width: 128px;
  z-index: 1;
}
/*=====  End of Featured  ======*/