**********************
******JUX MASHUP********
************************/
.jux-mashup {
  position: relative;
  width: 100%;
  background-color: #D5ABAB;
  /* CSS when layout is LIST */
}
.jux-mashup .jux-controls {
  position: relative;
  /* background-color: #37474f;*/
  overflow: hidden;
  padding: 5px;
  color: #fff;
  /*Filters List*/
}
.jux-mashup .jux-controls .jux-style-grid-list{
  float:left;
  margin-right:4px;
}
/*.jux-mashup .jux-controls .jux-style-grid-list .jux-changelayout{
  cursor: pointer;
  width:100%;
  background-color: #DA6A6A;
  }*/
  .jux-mashup .jux-controls .jux-style-grid-list .jux-icon{
    padding-right:8px;
  }
  .jux-mashup .jux-controls .jux-filters {
    display: block;
    /*  position: relative;*/
  }
  .jux-mashup .jux-controls .jux-filters .jux-filters-group {
    float: left;
    margin-right: 10px;
  }
  .jux-mashup .jux-controls .jux-filters .jux-filters-group .jux-filters-title {
    margin: 5px 0px;
  }

  .jux-mashup .jux-controls .jux-sorts {
    display: block;
    position: relative;
    margin-top: 10px;
    overflow: hidden;
  }
  .jux-mashup .jux-controls .jux-sorts .jux-sorts-group {
    float: left;
  }
  .jux-mashup .jux-controls .jux-sorts .jux-sort {
    float: left;
  }
  .jux-mashup .jux-controls .jux-filters-list {
    display: block;
    position: relative;
    float: left;
  }
  .jux-mashup .jux-controls .jux-filters-list .jux-filters-group {
    float: left;
    margin-right: 0px;
  }
  .jux-mashup .jux-controls .jux-filters-list .jux-reset,
  .jux-mashup .jux-controls .jux-sorts-list .jux-changelayout{
    padding: 7px 14px;
    margin:0px;
  }
  .jux-mashup .jux-controls .jux-filters-list .jux-filters-group .jux-filters-title {
    margin: 5px 0px;
  }
  .jux-mashup .jux-controls .jux-filters-list .jux-reset {
  }
  .jux-mashup .jux-controls .jux-sorts-list {
    display: block;
    position: relative;
    padding-left: 20px;
    overflow: hidden;
  }
  .jux-mashup .jux-controls .jux-sorts-list .jux-sorts-group {
    float: left;
  }
  .jux-mashup .jux-controls .jux-sorts-list .jux-sort {
    /*float: left;*/
  }
/*.jux-mashup .jux-controls .jux-sorts-list .jux-changelayout {
  position: absolute;
  bottom: 0;
  width: 80px;
  margin-left: 10px;
  background: #da6a6a;
  }*/
  .jux-mashup .jux-controls .jux-icon {
    /*padding-left: 8px;*/
  }
  .jux-mashup .jux-controls .jux-sorts .jux-icon {
    padding-right: 8px;
  }
  .jux-mashup .jux-controls .jux-label {
    float: left;
    font-weight: 300;
    margin: 0 .4em 0 0;
  }
  .jux-mashup .jux-controls button {
    border-color: #fff;
    border: 1px solid #A8A8A8;
    border-radius: 3px;
    padding: 7px 10px;
    margin-bottom: 4px;
    background: #fff;
    color: #757575;
    font-size: 12px;
    overflow: hidden;
    text-transform: uppercase;
    webkit-transition: border-color 0.3s, color 0.3s;
    transition: border-color 0.3s, color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    box-sizing: content-box;
  }
  .jux-mashup .jux-controls button:hover,
  .jux-mashup .jux-controls button:focus,
  .jux-mashup .jux-controls button.jux-reset:hover,
  .jux-mashup .jux-controls button.jux-reset:focus {
    background: #08A0EC;
    color: #fff;
    border-color: #0088cc;
    outline: none;
    -webkit-transition: all .25s ease-in-out;
       -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
         -o-transition: all .25s ease-in-out;
            transition: all .25s ease-in-out;
  }
  .jux-mashup .jux-controls button.jux-reset {
    background-color: #E2E2E2;
  }
  .jux-mashup .jux-controls button.active {
    background: #0088cc;
    color: #fff;
    border-color: #0088cc;
  }
  .jux-mashup .jux-container {
    width: 100%;
    text-align: left;
    font-size: 0px;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
  .jux-mashup .jux-container:after {
    content: '';
    display: inline-block;
    width: 100%;
  }
  .jux-mashup .jux-container .mix {
    overflow: hidden;
    text-align: left;
    /*background: #fff;*/
    vertical-align: top;
    display: none;
  }
  .jux-mashup .jux-container .mix .jux-item {
    font-size: 14px;
  }
  .jux-mashup .jux-container .mix .jux-item .jux-image {
    width: 100%;
    position: relative;
  }
  .jux-mashup .jux-container .mix .jux-item .jux-image img {
    width: 100%;
  }
  .jux-mashup .jux-container .mix .jux-item .jux-image:hover .jux-image-overlay{
 /* background-color: #000;
 opacity: 0.7;*/
}
.jux-mashup .jux-container .mix .jux-item .jux-image .jux-image-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transition:all 0.4s ease-in-out;
  -webkit-transition:all 0.4s ease-in-out;
  -moz-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out;
}
.jux-mashup .jux-container .mix .jux-item .jux-info .jux-title {
  color: #FFF;
  font-size: 18px;
  /*  margin: 12px 10px;*/
}
.jux-mashup .jux-container .mix .jux-item .jux-info .jux-introtext {
  /*margin: 0 10px 10px 10px;*/
  font-size: 13px;
}
.jux-mashup .jux-container .mix .jux-item .jux-image .jux-hover-image{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  -webkit-transform: translate(-50%, -50%) scale(0);
  -moz-transform: translate(-50%, -50%) scale(0);
  -o-transform: translate(-50%, -50%) scale(0);
  transition:all 0.4s ease-in-out;
  -webkit-transition:all 0.4s ease-in-out;
  -moz-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out;
  border: 1px solid #fff;
  text-align: center;
}
.jux-mashup .jux-container .mix .jux-item .jux-image .jux-hover-image a.jux-hover-icon{
  text-decoration: none;
  color:#fff;
  margin:0px;
  padding:0px;
}
.jux-mashup .jux-container .mix .jux-item .jux-image .jux-hover-image a.jux-hover-icon i{
  color:#fff;
  font-size: 20px;
  padding:15px;
}
.jux-mashup .jux-container .mix .jux-item .jux-image:hover .jux-hover-image{
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  -moz-transform: translate(-50%, -50%) scale(1);
  -o-transform: translate(-50%, -50%) scale(1);
}
.jux-mashup .jux-loadmore{
  margin:40px auto 20px;
  width:100%;
  text-align: center;
}
.jux-mashup .jux-loadmore #ShowMore{
  width:100%;
  padding:10px 30px;
  text-align: center;
  color:#fff;
  text-decoration: none;
  font-size:14px;
  background-color: #08c;
  transition:all 0.2s ease-in-out;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
}
.jux-mashup .jux-loadmore #ShowMore:hover{
  box-shadow: 1px 1px 2px 1px #D6D6D6; 
  -webkit-box-shadow: 1px 1px 2px 1px #D6D6D6;
  -moz-box-shadow: 1px 1px 2px 1px #D6D6D6;
  -o-box-shadow: 1px 1px 2px 1px #D6D6D6;
  background-color: #fffdfd;
  color:#028DB5;

}
@media screen and (max-width: 680px) {
  .jux-mashup .jux-container .mix {
    width: 100%!important;
  }
  .jux-mashup .jux-container.list .mix .jux-item .jux-image,.jux-mashup .jux-container.list .mix .jux-item .jux-info{
    width:100%!important;
  }
  .jux-mashup .jux-container.list .mix .jux-item .jux-info{
    padding:10px 0px 10px 0px!important;
  }
  .jux-mashup .jux-container.list .mix .jux-item .jux-info ul.jux-tags{
    position: static!important;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .jux-mashup .jux-container.grid .mix .jux-item .jux-info .jux-au-ca div {
    width:33.33%!important;
  }
}
@media screen and (min-width: 680px) and (max-width: 768px) {
  .jux-mashup .jux-container .mix {
    width: 50%!important;
  }
}
.jux-mashup .jux-container .gap {
  display: inline-block;
  width: 24%;
  overflow: hidden;
}
/*@media screen and (max-width: 479px) {
  .jux-mashup .jux-container .gap {
    width: 100%!important;
  }
}
@media screen and (min-width: 480px) and (max-width: 639px) {
  .jux-mashup .jux-container .gap {
    width: 50%!important;
  }
}
@media screen and (min-width: 640px) and (max-width: 767px) {
  .jux-mashup .jux-container .gap {
    width: 33.333%!important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .jux-mashup .jux-container .gap {
    width: 25%!important;
  }
  }*/
  /*----------------------------General------------------------------*/
  .jux-mashup .jux-container .mix .jux-item h4.jux-title{
    margin:0px;
    padding: 0px 0px 5px 0px;
  }
  .jux-mashup .jux-container .mix .jux-item h4.jux-title a{
    /*color:#000;*/
    text-decoration: none;
    transition:all 0.4s ease-in-out;
    -webkit-transition:all 0.4s ease-in-out;
    -moz-transition:all 0.4s ease-in-out;
    -o-transition:all 0.4s ease-in-out;
    font-weight: bold; 
  }
  .jux-mashup .jux-container .mix .jux-item h4.jux-title a:hover{
    /*color:#0088cc;*/
  }
  .jux-mashup .jux-container.list .mix:before {
    padding-top: 40px;
  }
  .jux-mashup .jux-container .mix .jux-item .jux-au-ca{
    width:100%;
    margin-top:10px;

  }
  .jux-mashup .jux-container .mix .jux-item .jux-au-ca div{
    float: left;
    font-size:11px;
    color: gray;
  }
  .jux-mashup .jux-container .mix .jux-item .jux-au-ca div i{
    float:left;
    margin: 4px 2px;
  }
  /*----------------------------------------------List style--------------------------------------------------*/
  .jux-mashup .jux-container.list .mix {
    width: 100%!important;
    margin-top: 20px;
    position: relative;
  }
  .jux-mashup .jux-container.list .mix .jux-item{
    width:100%;
  }
  .jux-mashup .jux-container.list .mix .jux-item .jux-image{
    width:40%;
    float:left;
  }
  .jux-mashup .jux-container.list .mix .jux-item .jux-image .jux-image-datetime{
    display: none;
  }
  .jux-mashup .jux-container.list .mix .jux-item .jux-info{
    float:left;
    width:60%;
    padding: 15px 25px;
    line-height: 20px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
  }
  .jux-mashup .jux-container.list .mix .jux-item .jux-info h4.jux-title a{
    font-size: 18px;
  }
  .jux-mashup .jux-container.list .mix .jux-item .jux-info .jux-au-ca div{
    width: auto;
    float: left;
    display: inline-flex;
    margin-right: 10px;
  }
  .jux-mashup .jux-container.list .mix .jux-item .jux-info ul.jux-tags{
    position:absolute;
    bottom:5px;
    margin: 0px 0px 10px 0px!important;
    padding:0px!important;
  }
  .jux-mashup .jux-container.list .mix .jux-item .jux-info ul.jux-tags li.jux-get-tags{
    float:left;
    text-align: center;
    margin-right:3px;
    list-style: none;
    color:gray;
    font-size: 12px;
  }
  /*---------------------------------------End list style-------------------------------------------------*/
  /*---------------------------------------Grid Style-----------------------------------------------------*/
/*.jux-mashup .jux-container.grid .mix .jux-item .jux-image .jux-image-datetime{
  position:absolute;
  bottom: 60%;
  padding: 2px;
  left: 50%;
  text-align: center;
  transform: translateX(-50%) scale(0);
  -webkit-transform: translateX(-50%) scale(0);
  -moz-transform: translateX(-50%) scale(0);
  -o-transform: translateX(-50%) scale(0);
  color: #fff;
  border: 1px solid #fff;
  transition:all 0.4s ease-in-out;
  -webkit-transition:all 0.4s ease-in-out;
  -moz-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-image:hover .jux-image-datetime{
  transform: translateX(-50%) scale(1);
  -webkit-transform: translateX(-50%) scale(1);
  -moz-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
  }*/
/*.jux-mashup .jux-container.grid .mix .jux-item .jux-info .jux-au-ca div{
  width:50%;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-info{
  padding:5px;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-info ul.jux-tags{
  margin: 20px 0px 50px 0px;
  padding:0px;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-info .jux-tags .jux-get-tags{
  float:left;
  list-style:none;
  font-size:12px;
  padding:2px;
  border:1px solid #aeaeae;
  margin-right:5px;
  color:gray;

}
.jux-mashup .jux-container.grid .mix .jux-item .jux-info h4.jux-title a{
  font-size: 16px;
  }*/
  /*------------------------------------End Grid Style----------------------------------------------------*/

  /*Text-layout = none*/
/*.jux-mashup .jux-container.grid .mix .jux-item .jux-image .jux-image-info{
  position: absolute;
  bottom:0px;
  width:100%;
  background-color: #000;
  opacity: 0.6;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-image .jux-image-info div{
  float:left;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-image .jux-image-info .jux-image-post{
  width:70%;
  padding:0px 5px;
  margin:0px;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-image .jux-image-info .jux-image-post .jux-title h4 a{
  text-decoration: none;
  color:#fff;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-image .jux-image-info .jux-image-post .jux-title h4 a:hover{
  color:#0088cc;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-image .jux-image-info .jux-image-post .jux-title h4{
  margin:12px 0px 8px 2px;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-image .jux-image-info .jux-image-post .jux-au-ca{
  margin-top:2px;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-image .jux-image-info .jux-image-post .jux-au-ca div{
  width:50%;
  color:#fff;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-image .jux-image-info .jux-image-datetime{
  text-align: center;
  color:#fff;
  padding: 2px;
  border:2px solid #fff;
  box-sizing: border-box;
  margin:8px;
}
.jux-mashup .jux-container.grid .mix .jux-item .jux-image .jux-image-info .jux-image-datetime:hover{

}
.jux-mashup .jux-container.grid .mix .jux-item .jux-image:hover .jux-image-datetime{
  background-color:#0088cc;
  }*/
  .jux-mashup .jux-container .mix .jux-item .jux-image:hover .jux-image-overlay{
    background-color: #000;
    opacity: 0.7;
  }
  .jux-item ul.jux-tags{
    display: inline-block;
  }