#modern_portfolio{
  color: #000000;
  height: auto;
  position:relative;

}
a.modport_cats{
  color: #0000CC;
}
.infoblock, #modern_portfolio p{
  text-align:justify;
}
#modern_portfolio h4{
  margin-top: 10px;
  margin-bottom: 10px;
}
#modportBtnContainer{
text-align:center;
}

#modportBtnContainer .btn{
  margin-right: 5px;
  background: #CC0000;
  color:white;
}
#modportBtnContainer .active{
  color:white;
  background: #666;
}
#modportBtnContainer .btn:hover{
  background: #009933;
}
#load_container{
position:relative;
  width:100%;
  height:auto;
  float: left;
  text-align:center;
}

#modport_load, #modport_loading{
    margin-left:auto;
  margin-right:auto;
  margin-top:10px;
  margin-bottom:10px;
  text-align: center;
  background: #F06000;
  border-radius:5px;
  height:40px;
  width:20%;
}
#modport_load,#modport_loadtext{
    color:white;
}
#modport_loadtext{
  width: auto;
  font-size: 14px;
  margin-right: 10px;
  margin-top:7px;
  float: right;
}

#modport_loading div{
  display:inline-block;
}

@keyframes changefont {
  from {

    opacity:0;
  }

  to {
    opacity:1;
  }
}
#modport_loading{
background:#CC0000;
animation-duration: 0.5s;
  animation-name: changefont;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
#modport_loader {
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #555555;
    border-radius: 50%;
    margin:7px;
    width:15px;
    height: 15px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.moditems{
  margin-bottom:10px;

}

a.modport_readmore {
 color:white;
 background: #008CBA;
 padding: 7px;
 border-radius:5px;
 position:relative;
 font-weight:bold;
}
a.modport_readmore:hover{
 color:white;
 margin-left:15px;
 transition: margin-left 500ms;
}

.modportinfo{
  color: #AEAEAE;
  margin-right:5px;
}
.modport_img{
  padding: 5px;
  border:solid 1px #CCC;
  height:150px;
  overflow: hidden;
}
.modport_img img{
 object-fit:cover;
 width:100%;
 height: 100%;
}
.modport_container{
  position: relative;
}
.modport_imglink{
  width:100%;
  height:100%;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  color: #FFF;
  text-align:center;
  line-height: 1.2em;
  font-size: 1.2em;

}
.modport_imglink:after{
  content:"+";
  font-size: 1.5em;
  color: white;
  background: #008CBA;
  padding: 10px 15px;
  position:relative;
  top: 45%;
  border-radius:5px;


}


.modport_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity:0;
  transition: .5s ease;
  background-color: #000;
}

.modport_container:hover .modport_overlay {
  opacity:0.7;
}


.modrow {
    margin: 8px -16px;
    background: #DFDFDF;
}

/* Add padding BETWEEN each column (if you want) */
.modrow,
.modrow > .modcolumn {
    padding: 8px;
}

.fadeIn{

display:block;

}

/* Create three equal columns that floats next to each other */
.modcolumn {
    width: 31.6%;
    margin-right: 10px;
    margin-bottom: 10px;
    display:none;
    vertical-align:top;
}


/* Clear floats after rows */
.modrow:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.modport_content {
    background-color: white;
    padding: 10px 10px 15px 10px;
    float: left;
    margin-left:8px;
    margin-top:8px;
}

/* The "show" class is added to the filtered elements */
.show {
 display:inline-block;

}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #666;
   color: white;
}
@media only screen and (min-width: 1101px) {
  .modcolumn{
   width:31.6;
  }
}
@media only screen and (min-width: 451px) and (max-width: 1100px) {
  .modcolumn{
   width:44.5%;
  }
    #modportBtnContainer .btn{
    margin-bottom:10px;
  }
    #modport_load, #modport_loading{
    width: 30%;
  }
    .modport_img {
   width:95%;
  }
  .modport_img img{
 object-fit:cover;
 width:100%;
 height:100%;
}

  .modport_content{
    width:90%;
  }
}
@media only screen and (max-width: 450px){

    .modcolumn,#modportBtnContainer .btn{
    width:100%;
  }
  #modportBtnContainer .btn{
    margin-bottom:10px;
  }

  #modport_load, #modport_loading{
    width: 90%;
  }
  .modport_img {
   width:95%;
  }
  .modport_img img{
 object-fit:cover;
 width:100%;
 height:100%;
}

  .modport_content{
    width:90%;
  }

}