.portfolio-menu {
  text-align: center;
}
.portfolio-menu ul li {
  display: inline-block;
  margin: 0;
  list-style: none;
  padding: 10px 15px;
  cursor: pointer;
  -webkit-transition: all 05s ease;
  -moz-transition: all 05s ease;
  -ms-transition: all 05s ease;
  -o-transition: all 05s ease;
  transition: all 0.5s ease;
}

.portfolio-item {
  margin: 0 auto;
}
.portfolio-item, .item {
  width:100%;
  float: left;
  
}
.item img,.portfolio-item img {min-height:248px;margin-bottom: 5px;margin-top:5px}
.portfolio-item>.col-4 {min-height:268px}

.red {color: #ff0000}
  .hover-desc span {font-size:18px; margin:0px; padding:0px; text-align:left; margin-left:10%; width:40%}
  
 @media screen and (max-width:1670px){.hover-desc span {margin-left:8% }}
 @media screen and (max-width:1550px){.hover-desc span {margin-left:6%;width:43% }}
  @media screen and (max-width:1550px){.hover-desc span {margin-left:8%;width:40% }}
   @media screen and (max-width:1390px){.hover-desc span {margin-left:8%;width:40%;font-size:16px }}
     @media screen and (max-width:1158px){.hover-desc span {margin-left:8%;width:40%;font-size:15px }}
	      @media screen and (max-width:987px){.hover-desc span {margin-left:9%;width:40%;font-size:18px }}
		       @media screen and (max-width:987px){.hover-desc span {margin-left:8%;}}
			    @media screen and (max-width:818px){.hover-desc span {font-size:16px }}
   .my-boat-hover {
        cursor: pointer;
        min-height: 248px;
        margin-bottom: 5px;
        margin-top: 5px;
        position: relative;
        overflow: hidden;
        width: 100%;
        text-align: center;

      }
      .my-boat-hover .fadedbox {
        background-color: #000;
        position: absolute;
      bottom: 5px;
    left: 0;
    color: #fff;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    width: 96.5%;
     min-height: 248px;
    padding: 0px;
    /* margin-right: 10px; */
    margin-left: 1.8%;
    margin-top: 20px;
	height: 97%;
      }
	  
      .my-boat-hover:hover .fadedbox {
        opacity: 0.8;cursor:pointer; min-height: 248px;
      }
      .my-boat-hover .text {
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        transform: translateY(30px);
        -webkit-transform: translateY(30px);
      }
      .my-boat-hover .title {
        font-size: 28px;
    text-transform: uppercase;
    opacity: 0;
    transition-delay: 0.3s;
    transition-duration: 0.5s;
    bottom: 0px;
    vertical-align: sub;
   min-height: 260px;
    height: 100%;
	padding-top:30%
      }
      .my-boat-hover:hover .title,
      .my-boat-hover:focus .title {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
	
      } 
@media screen and (max-width:1640px){.my-boat-hover .fadedbox {bottom: 8px;height: 95%; }}
@media screen and (max-width:1630px){.my-boat-hover .fadedbox {bottom: 12px;height: 94%; }}
@media screen and (max-width:1610px){.my-boat-hover .fadedbox {bottom: 14px;height: 93%; }}	
@media screen and (max-width:1530px){.my-boat-hover .fadedbox {bottom: 6px;height: 96%; }}  
@media screen and (max-width:1450px){.my-boat-hover .fadedbox {bottom: 8px;height: 95%; }} 
@media screen and (max-width:1430px){.my-boat-hover .fadedbox {bottom: 12px;height: 94%; }}
@media screen and (max-width:1410px){.my-boat-hover .fadedbox {bottom: 14px;height: 93%; }}
@media screen and (max-width:1364px){.my-boat-hover .fadedbox {bottom: 5px;height: 96%; }}
@media screen and (max-width:1342px){.my-boat-hover .fadedbox {bottom: 7px;height: 96%; }}
@media screen and (max-width:1330px){.my-boat-hover .fadedbox {bottom: 10px;height: 94%; }}
@media screen and (max-width:1320px){.my-boat-hover .fadedbox {bottom: 12px;height: 94%; }}
@media screen and (max-width:1310px){.my-boat-hover .fadedbox {bottom: 14px;height: 93%; }}
@media screen and (max-width:1250px){.my-boat-hover .fadedbox {width: 95.5%;margin-left: 2.5%; bottom: 16px;height: 92%;}}
@media screen and (max-width:1190px){.my-boat-hover .fadedbox {width: 95.8%;margin-left: 2.3%; bottom: 16px;height: 92%;}}
@media screen and (max-width:1140px){.my-boat-hover .fadedbox {width: 95.5%;margin-left: 2.3%; bottom: 14px;height: 92%;}}
@media screen and (max-width:1090px){.my-boat-hover .fadedbox {width: 95.2%;margin-left: 2.3%; bottom: 14px;height: 92%;}}
@media screen and (max-width:1080px){.my-boat-hover .fadedbox {width: 95.5%;margin-left: 2.3%; bottom: 14px;height: 92%;}}
@media screen and (max-width:1050px){.my-boat-hover .fadedbox {width: 95.2%;margin-left: 2.3%; bottom: 15px;height: 91%;}}
@media screen and (max-width:985px){.my-boat-hover .fadedbox {width: 96.4%;margin-left: 2.0%; bottom:6px;height: 96.5%;}}	
@media screen and (max-width:800px){.my-boat-hover .fadedbox {width: 96.2%;margin-left: 2.0%; bottom:16px;height: 92.5%;}}
@media screen and (max-width:780px){.my-boat-hover .fadedbox {width: 96.0%;margin-left: 2.0%; bottom:14px;height: 92.5%;}}
@media screen and (max-width:740px){.my-boat-hover .fadedbox {width: 96%;margin-left: 2.0%; bottom:14px;height: 93%;}}
@media screen and (max-width:700px){.my-boat-hover .fadedbox {display:none}
.portfolio-menu ul  {padding-left:0px; text-align:center}

}