.portfolio img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  /* height: auto; */
  play: block;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index:1;
}

.portfolio span {
  position:absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(68, 68, 68, 0.29);
  z-index:5;
  background: -moz-linear-gradient(-45deg,  rgba(13,30,66,1) 0%, rgba(49,94,111,0.72) 50%, rgba(85,158,155,1) 100%);
  /* background: -webkit-linear-gradient(-45deg,  rgba(13,30,66,1) 0%,rgba(49,94,111,0.72) 50%,rgba(85,158,155,1) 100%); */
  /* background: linear-gradient(135deg,  rgba(13,30,66,1) 0%,rgba(49,94,111,0.72) 50%,rgba(85,158,155,1) 100%); */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d1e42', endColorstr='#559e9b',GradientType=1 );
}

.portfolio {
  margin: 20px 0 20px 0;
  padding: 0 0 0 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  overflow: hidden;
  width: 100%;
  /* padding: 47px 10px; */
}
@media (min-width:1000px){
  .portfolio {
    /*! padding-left: 14%; */}
}

.portfolio li {
  float: left;
  width: 100%;
  list-style: none;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  /* margin: 1em 0; */

    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 00px;
}
.portfolio figure {
  margin: 0 16px 5px 0;
  position: relative;
  /* text-align: center; */
  border: 3px solid #edf21c;
  -moz-border-radius: 8px;
  /* -webkit-border-radius: 8px; */
  /* border-radius: 8px; */
  overflow: hidden;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 100.915ms ease-in-out 0ms;
  height:250px;
  background: radial-gradient(#113a5d 15%, transparent 16%) 0 0, radial-gradient(#1a4464 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-color: #1e1c3c;
  background-size:16px 16px;
}
.portfolio figure:hover {
  border: 3px solid #feffdf;
}
.portfolio figure:hover img {
  opacity: .3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}
.portfolio figure:hover figcaption {
  top: 0%;
  margin-top: 0px;
}
.portfolio figure:hover h3 {
  bottom: 0%;
}
.portfolio figure:hover h4 {
  bottom: 0%;
}
.portfolio figcaption {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  -moz-transition: all 0.2s ease-in-out 0.2s;
  -o-transition: all 0.2s ease-in-out 0.2s;
  -webkit-transition: all 0.2s ease-in-out;
  -webkit-transition-delay: 0.2s;
  transition: all 62.7183ms ease-in-out 120.168ms;
  text-align: center;
  z-index: 10;
}

/*boton arriba*/
.portfolio a {
  background-color: #D4B532;
  /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
  font-weight: bold;
  /* text-shadow: 0 -1px 1px #5C6060; */
  text-decoration: none;
  color: #fff;
  width: 100%;
  line-height: 3em;
  display: inline-block;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
/*boton en el centro*/
.portfolio a {
  background-color: #edf21c;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  /* text-shadow: 0 -1px 1px #ffffff; */
  text-decoration: none;
  color: #405357;
  width: auto;
  height: 30px;
  line-height: 30px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  margin-top: 80px;
  font-size:large;
  padding: 0 2%;
}

.portfolio a:hover {
  background-color: #feffe6;
}
.unacol.portfolio li{
  width:100%;
}

.trescol.portfolio li{
  width:100%;
  margin: 0 0 3px 0;
}
.trescol.portfolio figure {
  height: 230px;
}
@media (min-width:1000px){
   .trescol.portfolio li{
    width:33% !important;
  }
   .unacol.portfolio li{
    margin-left:14%;
    display:flex; 
    width:100% !important;
  }
   .unacol.portfolio li figure{
    width:30% !important;
  }
  .unacol.portfolio li > p {
    width: 16%;
  }
}



figure h3 {
  color: white;
  font-size: 1.5em;
  font-weight: 300 !important;
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  /* font-weight: 500; */
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  display: block;
  padding: 10px;
  margin:0;
  orphans: 1;
  widows: 10;
  /*-moz-transition: all 0.15s ease-in-out 0.4s;*/
  /*-o-transition: all 0.15s ease-in-out 0.4s;*/
  /*-webkit-transition: all 0.15s ease-in-out;*/
  /*-webkit-transition-delay: 0.4s;*/
  /*transition: all 0.15s ease-in-out 0.4s;*/
  font-weight: lighter;
  z-index: 5;
  background: rgba(0,0,0,.3);

background: -moz-linear-gradient(top,  rgba(0, 0, 0, 0.92) 10%,rgba(18,94,32,0) 100%);
background: -webkit-linear-gradient(top,  rgba(0, 0, 0, 0.92) 10%,rgba(18,94,32,0) 100%);
background: linear-gradient(to bottom,  rgba(0, 0, 0, 0.92) 10%,rgba(18,94,32,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf1c2135', endColorstr='#00125e20',GradientType=0 );


}
.portfolio li figure h3 i {
  color: white;
  font-size: 0.9em;
}
figure h3 span{
  font-size: 1%;
  font-weight: 300;
  display: block;
}
figure h2 {
  color: #edf21c;
  background: rgba(0,0,0,0.7);
  font-size: 1rem;
  font-weight: 300;
  /* text-transform: uppercase; */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  font-weight: 500;
  position: absolute;
  bottom: 0%;
  left: 0;
  width: 100%;
  display: block;
  padding: 10px;
  margin:0;
  orphans: 1;
  widows: 1;
  /*-moz-transition: all 0.15s ease-in-out 0.4s;*/
  /*-o-transition: all 0.15s ease-in-out 0.4s;*/
  /*-webkit-transition: all 0.15s ease-in-out;*/
  /*-webkit-transition-delay: 0.4s;*/
  /*transition: all 0.15s ease-in-out 0.4s;*/
  z-index: 10;
}
.portfolio li > p {
  width: 80%;
  font-size: smaller;
  overflow-y: auto;
  display: block;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}


.tabs {
  margin: 0 0 20px 0;
  padding: 0;
  overflow: hidden;
}
.tabs li {
  list-style: none;
  float: left;
  margin: 20px 20px 0 0;
}


[data-filter*="group"] {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  width: auto;
  height: auto;
  padding: 0 1em;
  border-bottom: 4px solid #c3786c;
  position: relative;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
[data-filter*="group"]:active {
  top: 3px;
  border-bottom: none;
}
[data-filter*="group"].active {
  background-color: #e28e80;
}


@media (min-width: 600px) {
  .portfolio li {
   width: 50% !important;
  }
}

@media (min-width: 830px) {
    .portfolio ul {
   margin: 0 0 0 0;
  }
  .portfolio li {
   width: 50% !important;
  }
   .portfolio figure {
   height:auto;
  }
}




.grilla {
  /* justify-content: center; */
  flex-flow: wrap row;
  width: 100%;
  overflow: hidden;
}

.grilla ul{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  padding: 0px 16px;
  list-style: none;
  /*! overflow: hidden; */
  justify-content: space-around;
  position: relative;
}

.grilla li{
  height:auto;
  position:relative;
  background: rgba(0,0,0,.5);
  /*! flex: 1; */
  width: 100%;
  margin: 0 0 20px 0;
}
@media (min-width:830px){
 .columnas3 li{
  width:48.5%;
  }
}
@media (min-width:1000px){
 .columnas3 li{
  width:32%;  }
}